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

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

Wordpressの、テキストエディターには、デフォルトで以下のようなクイックタグ(タグ挿入)ボタンがあります。今回...

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

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

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

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

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

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

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

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

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

主な手順

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

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

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

CSSスタイルを作成する

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

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

/*太字*/
.bold{
  font-weight:bold;
}

/*赤色*/
.red{
  color:#E50202;
}

/*サクセスメッセージ*/
.sp-success {
  background-color: #DFF0D8;
  border-color: #D6E9C6;
  padding:15px;
  border-radius:4px;
  margin-bottom:20px;
}

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

editor-style.cssの設定

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

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

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

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

@import url('style.css');

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

add_editor_style();

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

functions.phpにコードを書く

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

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

    //TinyMCE追加用のスタイルを初期化
    //http://com4tis.net/tinymce-advanced-post-custom/
    if ( !function_exists( 'initialize_tinymce_styles' ) ):
    function initialize_tinymce_styles($init_array) {
      //追加するスタイルの配列を作成
      $style_formats = array(
        array(
          'title' => '太字',
          'inline' => 'span',
          'classes' => 'bold'
        ),
        array(
          'title' => '赤字',
          'inline' => 'span',
          'classes' => 'red'
        ),
        array(
          'title' => 'successボックス',
          'block' => 'div',
          'classes' => 'sp-success'
        ),
      );
      //JSONに変換
      $init_array['style_formats'] = json_encode($style_formats);
      return $init_array;
    }
    endif;
    add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000);
    
    //TinyMCEにスタイルセレクトボックスを追加
    //https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_buttons,_mce_buttons_2,_mce_buttons_3,_mce_buttons_4
    if ( !function_exists( 'add_styles_to_tinymce_buttons' ) ):
    function add_styles_to_tinymce_buttons($buttons) {
      //見出しなどが入っているセレクトボックスを取り出す
      $temp = array_shift($buttons);
      //先頭にスタイルセレクトボックスを追加
      array_unshift($buttons, 'styleselect');
      //先頭に見出しのセレクトボックスを追加
      array_unshift($buttons, $temp);
    
      return $buttons;
    }
    endif;
    add_filter('mce_buttons_2','add_styles_to_tinymce_buttons');

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

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

    スタイルの設定

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

    //追加するスタイルの配列を作成
    $style_formats = array(
      array(
        'title' => '太字',
        'inline' => 'span',
        'classes' => 'bold'
      ),
      array(
        'title' => '赤字',
        'inline' => 'span',
        'classes' => 'red'
      ),
      array(
        'title' => 'successボックス',
        'block' => 'div',
        'classes' => 'sp-success'
      ),
    );

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

    5. 名前:アシベ 投稿日:2017/01/24(火) 11:25:40 ID:e3823e329

      前回のコメント後にビジュアルエディタで記事の作成がずいぶん簡単になりましたが、
      ulやolブロックレベル後にliタグを追加するは可能なのかと、ふと思いました。
      array内にtag=>liと追加しても変化がありませんでした
      ご伝授ください。

    6. アバター画像 名前:わいひら 投稿日:2017/01/24(火) 16:52:17 ID:ae0ed8e9d

      その場合、ツールバーの以下のボタンを押すのではダメなのでしょうか?
      ツールバーのリストボタン
      もし、意味が違っていたならば、以下の部分をもう少し詳しく説明いただければ幸いです。

      ulやolブロックレベル後にliタグを追加するは可能なのか

    7. 名前:アシベ 投稿日:2017/01/24(火) 19:38:08 ID:e3823e329

      わいひらさん、回答ありがとうございます。
       たしかにエディタ上の囲まれているボタンを押せば済みました。独自タグ(スタイル)が追加できるのばかりに目が行っており盲点となっておりました。
      あと、もう一つお聞きしたいことが、divタグで空の状態のスタイルを挿入↓
      (例えば)

      (エディタから画像を挿入)

      (エディタから画像を挿入)


      とエディタ側で設定しようとした場合、最初の空状態のdivがから設定した場合、その後ろに画像を挿入すると削除された状態になり、となりってしまい、段落式に記述することはビジュアルエディタでは難しいのでしょうか?(display:flex)で横並びとかにしたいので・・・
       やはり、そういった場合はテキストエディタに変えて直接HTMLで打ち込んだほうがいいのでしょうか?

    8. 名前:アシベ 投稿日:2017/01/24(火) 19:41:15 ID:e3823e329

      上記コメントと重複していたので削除

    9. 名前:アシベ 投稿日:2017/01/24(火) 19:49:13 ID:e3823e329

      すみません、なかなかコメント送信に時間がかかっていたので更新後にまた投稿してしまいました。HTMLタグは打ち込めないんですね。
      言いたかったことは、classを適用させた空のdivの中にエディタから画像を挿入し階層式にして画像のレイアウトを2カラムなどにしようと考えていたのですが、空のdivを挿入した後に画像を挿入すると先に挿入したスタイル(空のdiv)が削除され、挿入した後のimgタグ内に一緒にスタイル名が適用されてしまいdisplay:flexでの横並びが実現できないので少し悩んでいます。
      (Qiitaのサイト内に)自動整形無効のやり方が載っていたのでそちらで試してみます。
      連投失礼いたしました。

    10. アバター画像 名前:わいひら 投稿日:2017/01/24(火) 22:01:30 ID:ae0ed8e9d

      申し訳ないですが、書いてある内容がどういった状態なのかが、ちょっと僕にはわからないです。
      分からないなりに推測で答えるので、あっているのかどうかわかりませんが、先にimgタグを挿入してから、後からdivで囲むのではダメなのでしょうか?

    11. 名前:アシベ 投稿日:2017/01/24(火) 22:24:00 ID:e3823e329

      お返事ありがとうございます。試しに先にビジュアルエディタ(ビジュアル)で画像を挿入してからスタイルを設定した”スタイル”選択リスト空のdivタグありで囲んでみましたが、どうやらビジュアルエディタで画像を複数挿入してdivで囲もうとして挿入したdivに画像の方に適応したスタイルも一緒に記述されてしまうようなので無理でした。
      素直に複雑なレイアウトの場合は(テキスト)のほうでHTMLタグで行ったほうが無難かなと改めて思いました。
      ビジュアルタグはあくまで簡易的な物として考えていたほうがいいんですね。
      (専用のプラグインもあるようですが、さすがにプラグインを入れてまでビジュアルのほうで行う気はいまのところないですかね)

    12. アバター画像 名前:わいひら 投稿日:2017/01/26(木) 23:13:38 ID:faf065649

      とりあえず、ビジュアルエディターは、ありものの機能を使ったほうが無難だのは間違いないかもしれません。
      いろいろ、よくわからない仕様もあるみたいですし。
      ビジュアルエディターでおかしな動作になる場合は、テキストのボタンにするしかないかもしれませんね。