ワードプレスのビジュアルエディタでCSSクラスを任意の場所に適用するカスタマイズ

ウェブ

wp-visual-editor-customize

ワードプレスを覚えたての頃はブログを投稿する際に、テキストエディタでHTML を用いて、スタイルシートを割り当ててと、見た目において極力魅力的な記事を作成することに注力していました。

ただ、最近はだんだんと横着になってきたと言いますか、『ワードプレスでブログを書くなら、ビジュアルエディタ以外考えられないでしょ』と、怠慢な態度を取る管理人でございます。

ただ、やっぱり頑張って記事を書くわけですから、少しでも見栄えを良くしたいと思うのが人の性。

そんな、横着なくせに見た目はこだわるという方へ今回の記事を書いてみました。

 

やりたいこと

  • 投稿時に文章内で任意の部分を選択し、そこへのみ特定のスタイルシートを適用させたい
  • ワンステップで実行したい

上記の望みを叶えると、投稿画面に下記のようなインターフェースの設置が実現します。

img

 

やりかた

TinyMCE Advanced を使用する

ワードプレスのビジュアルエディタの利便性を向上させるプラグインとしてお馴染みの『TinyMCE Advanced』を利用します。

インストール方法や使い方などは、他サイト様でたくさん記事が出ているかと思いますので、そちらをご確認くだしい。

 

functions.php で定義する

functions.php にて、自分好みのHTML 要素とCSS クラス名を定義します。
ひとまず、下記コードを同ファイルに記述します。

 

まぁ、お分かりだと思いますが、以下の要領で適宜定義をしてください。

title 管理画面上に表示されるメニュー名
block コマンド適用時に付与されるHTMLの要素
インライン要素にする際は、「block」を「inline」と書く必要があります
classes コマンド適用時に付与されるクラス名

必要に応じて、「 array( 」〜「 ), 」を継ぎ足していけば、いくらでも登録できますね。

ただ、div に関しては、ビジュアルエディタで使用すると若干のクセがあったので、慣れるまで頑張るか、極力span などのインライン要素で利用する方が使いやすいのかな、と思いました。

 

スタイルシートで装飾する

あとは、上記のfunctions.php にて定義したクラス名に、スタイルを割り当てていきます。
文字サイズを1000%にしてみたりマージンを100em付けることも可能ですね。

 

以上、ワードプレスのブログ投稿で、最低限やりたい装飾は実現できるのではないでしょうか。

 

【参考にさせて戴いたサイト様】
WordPress『TinyMCE Advanced』の投稿画面をカスタマイズ

こんな記事もよければどうぞ!

プロフィール

niki

age
30+
gender
male

なんやかややっています。
趣味・日常・仕事のことなどを書いています。

© COPYRIGHT 2016 niki weblog