文中の説明画像をクリックすると拡大します。
Advanced Editor Tools(旧TinyMCE Advanced)って何?
Advanced Editor Tools(旧TinyMCE Advanced)とは、WordPressで記事を作成する際に、レイアウトを簡単に編集できるようにするプラグインです。
「Advanced Editor Tools(旧TinyMCE Advanced)」
記事を作成する際には、編集画面の「ビジュアル」もしくは「テキスト」のどちらかのモードを使用して作成していきます。ブログサービスの編集画面のように、HTMLのコードも必要とせず、直感的に入力していくなら「ビジュアル」が適しているでしょう。
ビジュアルエディタで記事のレイアウトを変更するには、上部のメニューから編集することになります。
もし自力でレイアウトを変更しようとすると、「テキスト」モードでHTML・CSSのコードを直接入力する必要があります。そうなると、毎回記事に入力する手間がかかり、そもそもHTML・CSSのコードの知識が必要になりますので、初級者にとってはハードルが高いです。
それらの問題を解決するのが、プラグイン「TinyMCE Advanced」です。
デフォルトの状態よりも、入力に関する便利なボタンがたくさん追加できて、編集作業の効率が格段にアップします。
そのまま使用するのでもよいのですが、さらに「TinyMCE Advanced」をカスタマイズすることによって、例えば「文字を強調するためにマーカーを入れる」など、独自のCSSスタイルをビジュアルエディタに追加することができます。
CSSって何だっけ?という方はこちらをご覧ください。

独自スタイルのボタンを追加するには
「TinyMCE Advanced」に独自のCSSスタイルを追加すると、初級者にも操作が簡単にできて、「テキスト」モードでコードを書く必要もないのでとても便利です。
スタイルボタンをクリックすると、独自に作成したレイアウトに変更できます。
しかし、追加するための作業は以下のとおりです。
- editor-style.cssの編集
- functions.phpの編集
editor-style.cssがWordPressのテーマファイルにない場合は、後述の通り、editor-style.cssを追加します。
コードの編集なので苦手意識がある人も、一度設定してしまえば簡単に記事のレイアウトを変更できるので、以下の説明を参考にしながら、独自スタイルを追加してみてください。
独自スタイルを追加する事前準備
まずは、「設定」→「TinyMCE Advanced」にアクセスします。
そして、「高度なオプション」の中にある「CSS クラスメニューの作成」にチェックを入れましょう。ここで、チェックできない場合は、テーマファイルにeditor-style.cssがないことを示しています。
もしeditor-style.cssがないのであれば、FTPソフトなどで追加する必要があります。
※後述しますが、editor-style.cssが無い場合には、CSSファイルを作成する必要がありますが、このとき、「TinyMCE Advanced」で指定の「editor-style.css」という名称にこだわる必要はありません。作成したファイル名がなんであれ、header.phpでそれを読み込めばOKです。
以下の説明を参考に追加してみてください。(チェックできる場合は、この章は読み飛ばして大丈夫です)
FTPソフトの導入方法については、以下の記事を参考にしてください。

これで完了です。チェックボックスが選択できれば成功になります。
このファイルには、CSSのコードを追加するので、後からアップロードしても問題ありません。また、作成したCSSファイルが読み込まれるように、header.phpに以下のコードを追加します(editor-style.cssというファイル名の場合)。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/editor-style.css" >
header.phpにコードを追加するには、WordPress管理画面の「外観」→「テーマの編集」で確認できますが、当サイトではこれを直接編集するのではなく、一度パソコン上に(ローカル環境に)にheader.phpをダウンロードし、テキストエディタで編集してからアップロードする方法を推奨します。
テーマのテキストエディタでの編集については、以下を参考にご覧ください。

ここでは、便宜上、管理画面上での編集方法を示します。
コードを記述したら「ファイルを更新」をクリックして内容を保存しましょう(当サイト推奨は、ファイルのアップロードです)。
これで、editor-style.cssを正常に読み込んでくれるはずです。
※再度の説明ですが、editor-style.cssが無い場合には、CSSファイルを作成する必要がありますが、このとき、「TinyMCE Advanced」で指定の「editor-style.css」という名称にこだわる必要はありません。作成したファイル名がなんであれ、header.phpでそれを読み込めばOKです。
editor-style.cssの編集
準備が整ったら、実際に編集していきましょう。まずは、editor-style.cssにコードを追加します。
先ほどの作成したファイルにコードを追加して、FTPソフトなどでアップロードする方法か、もしくはWordPress管理画面の「外観」→「テーマの編集」から、テーマファイルeditor-style.cssを選択しましょう(当サイト推奨は、ファイルのアップロードです)。
今回の例では、黄色のマーカーと濃いピンクの文字を作成してみます。
以下のコードを入力します。
.yellow-marker { background:#FFFF00; } .deep-pink { color:#fa0260; }
最初に記述してある「.yellow-marker」や「.deep-pink」はクラス名です。「.kiiro-haikei」でも「.koi-pink」でも、任意のネーミングでOKです。
後にfunctions.phpでも使用するネーミングです。
そして、その後に記述してある「#FFFF00」で色を決定しています。#以降のカラーコードを変更すると、色を変えることが可能です。
例えば、以下などです。
- 「#c9fdcb」にすると黄緑色
- 「#cce5ff」にすると水色
クラス名と色を入力したら、「ファイルを更新」をクリックして内容を保存します(推奨:ファイルを保存してアップロードします)。
functions.phpの編集
次はfunctions.phpにコードを記述して、独自スタイルのボタンと先ほどのCSSファイルを紐付ける設定です。
同様にWordPress管理画面の「外観」→「テーマの編集」から、functions.phpを選択します。ここでも、当サイト推奨は、テキストエディタでの編集です。
特にfunctions.phpは、小さな記述ミスでも画面が見れなくなったりエラーが出たりするので、なおさらバックアップがとっておけて、やり直しのきくテキストエディタでの編集がよいです。
具体的には、以下のコードをファイルの一番下に入力しましょう。
//TinyMCE Advanced独自ボタン追加 // ビジュアルエディタで任意クラスを付与 function _my_tinymce($initArray) { $style_formats = array( array( 'title' => '黄色のマーカー', 'inline' => 'span', 'classes' => 'yb' ), array( 'title' => '濃いピンクの文字', 'inline' => 'span', 'classes' => 'deep-pink' ), ); $initArray['style_formats'] = json_encode($style_formats); return $initArray; } add_filter('tiny_mce_before_init', '_my_tinymce', 10000);
これで設定完了です。「ファイルを更新」をクリックして(推奨:編集したファイルをアップロードして)内容を保存します。
実際に記事の編集ページにいき、正常に機能するか確認してください。あとは、CSSで違う色のコードを入力して、functions.phpで項目を追加していけば、独自のスタイルを増やすことが可能です。
まとめ
- TinyMCE Advancedに独自スタイルを追加するには、「editor-style.css」と「functions.php」の編集が必要。
- 「editor-style.css」がない場合は、ファイルをアップロードする。
- 様々なコードを使えば、マーカーなど以外のものも作成できる。