WordPressプラグイン「TinyMCE Advanced」に任意のスタイルを追加する方法

WordPressには便利なWYSIWYGエディタ（見たまま編集エディタ）が搭載されています。
標準で搭載されているエディタを拡張して、より便利にする「TinyMCE Advanced」というプラグインがあります。

このプラグインを利用して、ただのタグではない「よく使うパーツ」や「装飾」をクリックで追加出来るようにしましょう。

ここからはプラグイン「TinyMCE Advanced」がインストールされている前提で説明を行います。
インストールがまだの方は上記リンクからダウンロードしてアップロードするか、プラグインから検索してインストールしてください。

また、例として当ブログで利用しているWPテーマ「Simplicity」に搭載されている「extension.css」をTinyMCE Advancedのスタイル機能に登録し、ワンクリックで呼び出せるようにします。

1.　admin.phpに追加したいタイトル・ブロック・CSSのクラス名を定義したコードを追記する

/**
 * TinyMCEに渡す配列を作成する
 * @param array $initList
 * @return array
 */
function origin_tinymce($initList) {
  $formats = array(
    array(
     'title' => '囲みブロック（濃青）',
     'block' => 'div',
     'classes' => 'sp-primary'
    ),
    array(
     'title' => '囲みブロック（薄緑）',
     'block' => 'div',
     'classes' => 'sp-success'
    ),
    array(
     'title' => '囲みブロック（薄青）',
     'block' => 'div',
     'classes' => 'sp-info'
    ),
    array(
     'title' => '囲みブロック（薄黄）',
     'block' => 'div',
     'classes' => 'sp-warning'
    ),
    array(
     'title' => '囲みブロック（薄赤）',
     'block' => 'div',
     'classes' => 'sp-danger'
    ),
    array(
     'title' => '吹き出し（→）',
     'block' => 'div',
     'classes' => 'left-balloon'
    ),
    array(
     'title' => '吹き出し（←）',
     'block' => 'div',
     'classes' => 'right-balloon'
    ),
    array(
     'title' => '吹き出し割り込み解除',
     'block' => 'span',
     'classes' => 'clear-balloon'
    ),
    array(
     'title' => 'LINEっぽい背景',
     'block' => 'div',
     'classes' => 'line-back'
    ),
    array(
     'title' => '太字',
     'inline' => 'span',
     'classes' => 'bold'
    ),
    array(
     'title' => '赤字',
     'inline' => 'span',
     'classes' => 'red'
    ),
    array(
     'title' => 'マーカー書き',
     'inline' => 'span',
     'classes' => 'marker'
    ),
    array(
     'title' => '打ち消し線',
     'inline' => 'span',
     'classes' => 'strike'
    ),
    array(
     'title' => 'キーボードキー',
     'inline' => 'span',
     'classes' => '.keyboard-key'
    ),
    array(
     'title' => '参考',
     'inline' => 'span',
     'classes' => 'ref'
    ),
  );
  $initList['style_formats'] = json_encode($formats);
  return $initList;
}
//TinyMCE Advancedより後に実行されるように、フック番号を明示指定する
add_filter('tiny_mce_before_init', 'origin_tinymce', 30000);

今回はSimplicityに搭載されている「extension.css」の内容をスタイルに登録するため、上記コードを定義しています。

Simplicity 1.9.3のfunctions.phpを読む限り、設定ファイルが属性ごとにlibディレクトリに格納されていたため、そのルールに従い「lib/admin.php」の末尾に上記コードを追記しました。
普通に追加する場合は、「functions.php」の末尾に追加したら良いと思います。