浅野直樹の学習日記

WordPressのリッチテキストエディタは便利なのですが、かゆいところに手が届かない感じがします。この記事の末尾にあるように、まとめとして四角囲みをしようとしてもそのようなボタンはありません。かといって毎回テキストでhtmlタグを手打ちするのも嫌です。そこでスタイルシート（CSS）を適用して解決しました。この方法だとCSSのほうで自由な記述ができるので応用もききます。

 

まずは目的のCSSを作ります。今回は単にまわりを囲んで余白を調整したいだけなので次のような記述をしました。

 

div.matome {
        border:solid;
        margin-left:1em;
        padding-left:1em;
}

 

div要素のclass名”matome”として作成しました。内容は枠線を引いて左側の線の内外に余白を取るということです。

 

WordPressのCSSは「外観」→「テーマ編集」からブラウザ上で直接いじれます。てっきりFTPでファイルを転送しなければならないと思い込んでいたので、簡単に編集できるのはありがたいです。

 

スタイルシート（style.css）の末尾に先ほどのコードを追記します。

 

もしかするとビジュアルエディターのスタイルシート（editor-style.css）も「テーマ編集」の画面に表示されるかもしれません。これはその名の通りビジュアルエディタのためのスタイルシートです。このように実際の記事本体とビジュアルエディタとで別々のCSSを適用しているのですね。どうりでビジュアルエディタの表示と実際の表示とが微妙に違うわけです。それを揃えるやり方も検索すればたくさん出てきますので、興味のある方は試してみてください。

 

これでCSSの設定はできましたが、それを適用するためにはhtmlタグのほうに「<div class=”matome”>内容</div>」のような指定をしなければなりません。

 

これをするためにはリッチテキストエディタにスタイルの選択ボタンを追加します。これはWordPressのphpファイルをいじることで実現できます。具体的には先ほどと同じように「外観」→「テーマ編集」から、今度は、テーマのための関数(functions.php)を選びます。以下のコードを追記します。追記する場所は基本的にどこでも構いませんが、最後の「?>」の直前がわかりやすいでしょう。「/*（コメントの記述）*/」の部分はコメントでありコードではないので、この部分に書いてもうまくいきません。

 

function ilc_mce_buttons($buttons){
        array_push($buttons, "styleselect");
        return $buttons;
}
add_filter("mce_buttons", "ilc_mce_buttons");

 

ボタンにスタイル選択ボタンを追加してくれという内容です。WordPressの管理ページをより便利にカスタマイズする方法13の11番を参考にしました。

 

これでリッチテキストエディタからスタイルの選択ができるようになりますが、先ほど作った「matome」が選べないはずです。その代わりに他の選択肢がたくさんあるかもしれません。これでは使えないのでこの選択肢の設定を最後にします。

 

先ほどと同じように「外観」→「テーマ編集」から、テーマのための関数(functions.php)を選びます。同じ要領で次のコードを追記します。

 

function _my_tinymce($initArray) {
        $style_formats = array(
                array(
                        'title' => 'まとめ',
                        'block' => 'div',
                        'classes' => 'matome'
                ),
                array(
                        'title' => 'まとめ２',
                        'block' => 'div',
                        'classes' => 'matome2'
                )
                );
        $initArray['style_formats'] = json_encode($style_formats);
        return $initArray;
}
add_filter('tiny_mce_before_init', '_my_tinymce');

 

ついでに２つ目のスタイルも用意しておきました。「まとめ」の部分がスタイルの選択肢に表示される文字で、「matome」の部分は最初に定義したCSSのクラス名です。「div」はもちろん要素名です。WordPressのTinyMCEをチキチキにカスタマイズするを参考にしました。

 

これでめでたく完成です。

 

まとめ