WordPressのビジュアルエディター(TinyMCE)に独自タグ挿入用のスタイル選択ボックスを追加するカスタマイズ

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

前回、Wordpressのテキストエディターにタグ挿入ボタンを追加する方法を書きました。

プラグイン不要!Wordpressのテキストエディタにタグ挿入クイックタグボタンを追加する方法
Wordpressの、テキストエディターには、デフォルトで以下のようなクイックタグ(タグ挿入)ボタンがあります。 今回...

今回は、ビジュアルエディターに独自タグ挿入用のスタイルボックスを追加する方法を紹介したいと思います。

通常のビジュアルエディターは、以下のようになっていますが

デフォルトのTinyMCE.pngの状態

今回のカスタマイズを行うことで、「スタイル選択ボックス」が表示され、

ビジュアルエディターにスタイル選択ボックスが表示される

アイテムを選択することにより、独自スタイルを設定しているHTMLタグを手軽に挿入できるようになります。

スタイル選択ボックスのアイテム

以下で、そのカスタマイズ方法について説明したいと思います。

スポンサーリンク
レクタングル(大)広告

主な手順

今回のカスタマイズを行うのに必要な主な手順は以下です。

  1. CSSスタイルを作成する
  2. editor-style.cssの設定
  3. functions.phpにコードを書く

基本的な処理部分は、コピペで行います。ただ、スタイルや、タグの設定などは、環境に合わせて自前でする必要があります。

CSSスタイルを作成する

まずは、独自スタイル用のCSSを書きます。

今回は、例としてstyle.cssに以下のようなスタイルを書きました。

太字と、赤色はインライン要素用のスタイルです。そして、サクセスメッセージはブロック要素用のスタイルです。

editor-style.cssの設定

ビジュアルエディター上でも、スタイルを確認しながら編集できた方が楽です。なので、前項で書いたスタイルをビジュアルエディター上でも反映させる設定を行います。

まずは、使用しているテーマフォルダ直下に「editor-style.css」というCSSファイルがあるかを確認してください。そして、無い場合は、「editor-style.css」ファイルを作成してださい。

そして、「editor-style.css」に前項のスタイルを記入してください。

同じ設定が2回重複して記入されてしまうのが嫌な場合は、「editor-style.css」に以下のように書いてしまってもいいかもしれません。

そして、エディター上でスタイルを呼び出すためfunctions.phpに以下のように書きます。

もちろん、既にfunctions.php上に上記のコードの記述がある場合は、コードの記入は不要です。

functions.phpにコードを書く

最後に、ビジュアルエディターにスタイル選択ボックス追加するコードをfunctions.phpににします。

記入するコード例は以下。

initialize_tinymce_styles関数では、スタイル選択ボックスに追加するスタイルの設定を行っています。

add_styles_to_tinymce_buttons関数では、ビジュアルエディターのツールバー(TinyMCE)にスタイル選択ボックスを追加しています。

スタイルの設定

スタイルの設定は、initialize_tinymce_styles関数の$style_formats配列に以下のように配列を追加することで行います。

インライン要素のスタイルの時は「’inline’ => ‘span’」、ブロック要素のスタイルの時は「’block’ => ‘div’」のように設定しているのに注意してください。

参考 WordPress『TinyMCE Advanced』の投稿画面をカスタマイズ | com4tis

参考 Plugin API/Filter Reference/mce buttons

動作確認

実際に、スタイル選択ボックスを使うと、以下のように動作します。

スタイル選択ボックスを使ってみた

これで、ビジュアルエディターでの編集が、かなり捗ります。

まとめ

こんな感じで、ちょっとした手間をかければ、ビジュアルエディターをより使いやすくさせることができます。

ただ、Wordpressには、AddQuicktagという素晴らしいプラグインもあるので、これを使うことで手軽に同様のことを行うこともできます。

ただ、「出来る限りプラグインを使いたくない」とか「テーマ側でクイックタグを管理したい」なんて場合は、今回のカスタマイズ方法はお勧めです。

『WordPressのビジュアルエディター(TinyMCE)に独自タグ挿入用のスタイル選択ボックスを追加するカスタマイズ』へのコメント

  1. 名前:らんくる 投稿日:2016/08/30(火) 08:31:14 ID:603450c1c

    お世話になってます。

    アフィリエイトBのキーワードタグをどこに貼り付けたら良いのかわかりません。

    もしわかればお願いします。

  2. わいひら 名前:わいひら 投稿日:2016/08/30(火) 13:02:58 ID:16a3ee896

    先日、以下に返信を書きました。
    アフィリエイトBの成果発生したキーワードが見れるコードの貼り付け場所

  3. 名前:アシベ 投稿日:2016/11/14(月) 10:51:09 ID:67290eee0

    記事を拝見いたしました。
    ビジュアルエディタ内でスタイルの設定のみならず、独自HTMLタグも追加できるようにできるんですね。
    記事作成の幅も広がりますね。
    テキストエディタの独自タグの記事の方法かこちらの方法を利用するかは利用する人によって異なることがわかりました。
    私は、ビジュアルエディタの方に挑戦してみようかな・・・

  4. わいひら 名前:わいひら 投稿日:2016/11/14(月) 12:53:14 ID:0c96a13ae

    ですよね。
    Wordpressは様々な処理をフックすることができるので、本当にいろいろな部分を自由にカスタマイズできるようになっていて助かります。
    ビジュアルエディターの利用頻度が高い場合は、ビジュアルエディターだけで良いかもしれませんね。
    僕もよく考えたら、テキストエディターの方はあまり使用していません。利用するにしても、タグを確認するくらいで。