WordPressのTinyMCE Advanceは必ずインストールするプラグインのひとつですが、「テーブルタグの追加ボタン」と「プルダウン形式のスタイル追加ボタン」がとても便利です。

自分用のブログやサイトだと、単に「ビジュアル」エディターから「HTML」エディターに切り替え、手打ちでクラスを入れてしまえば終わりなのですが、クライアントさんに納品する場合には、このスタイル追加ボタンによく使うCSSのクラスを登録しておくと、HTMLやCSSに精通していなくても事前に用意したデザインを記事の中で利用することができます。

このスタイル追加ボタンにオリジナルのスタイルを追加する方法を紹介します。

content.cssにクラスを追加する
function.phpにフィルターを追加する

１．content.cssにクラスを追加する

もっとも簡単な方法は「wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css」に新しくクラスを追加する方法です。クラスを追加しただけで自動的に読み込まれて「スタイル追加ボタン」に表示され始めます。

気をつけなければいけないのは、「.（ドット）ではじまるクラス名のみ追加される」ことで、たとえば「div.クラス名」のような記述は読み込んでくれません。シンプルに「.クラス名」としてください。

２．functrion.phpにフィルターを追加する

少し手間ですが、function.phpにフィルターを追加する方法もあります。以下の利点があるのでこちらの方がオススメです。

テーマごとにスタイルリストを変えられる
スタイルリストのスタイル名に日本語が使える

スタイルリストに、「style1」と「style2」を追加したい場合には、function.phpに以下の記述を追記します。

// tinyMCE Advanceにスタイルを追加
function my_tiny_mce_before_init( $init_array ) {
$init_array['theme_advanced_styles'] = "style1=style1;style2=style2";
return $init_array;
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

また、スタイルリストのスタイル名に日本語を使いたい場合には、以下のように記述します。

// tiny_mceにスタイルを追加
function my_tiny_mce_before_init( $init_array ) {
$init_array['theme_advanced_styles'] = "スタイル１=style1;スタイル２=style2";
return $init_array;
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

これで、スタイル追加ボタンに「スタイル１」と「スタイル２」という項目が表示されるようになるので、適当な文字列などを選んでスタイルを追加すると

<span class="style1">文字列</style>

のようにクラスが挿入されます。

このクラスに対するスタイル自体は、テーマのスタイルシートなどに追加しておけばOKです。