最終更新：2017/01/16
本記事は、前の記事の方法でFont Awesomeを導入していることを前提としています。
Font Awesomeを導入しただけでは、プレビューを含む実際のサイトの表示にしか反映されない。ビジュアル・エディタにも表示されるようにしないと、プレビューでマークアップが間違っていないか逐一確認しなければならないので執筆の能率が落ちる。Font Awesomeは便利だけど、能率が悪くなると使う動機が薄れていく。可能ならばビジュアル・エディタにもFont Awesomeを表示させたい。
本記事を書いている時点でのFont Awesomeのバージョンは4.7.0。
WP Visual Icon Fontsは更新が停滞中
Font Awesomeをサイトとビジュアル・エディタの両方に表示させるプラグインとしてはWP Visual Icon Fontsが有名だけど、更新が年単位で滞っている。Font Awesome 4.0.3の時点で止まっているので、比較的最近追加されたアイコンフォントには対応していない。最初はその方法しか見つからなかったので試してみたけど、WordPress 4.7.1でも動作はするようだ。
使えないアイコンがあるとなると少々気持ち悪い。メジャーどころのアイコンは4.0までで実装されていたので実用上はそれほど困らないだろうけど、WP Visual Icon Fontsがいつまで使えるかはわからない。なんとかプラグインに頼らない方法はないか調べることにした。
エディタのCSSにスタイルを追加する方法
当初は、Font Awesome用のCSSをeditor-style.cssに単純にインポートすればいいのではないかと考えたんだけど、どうもそれではうまくいかない。強引に全体をコピー&ペーストする方法も考えたけど、Font Awesomeがバージョンアップする度にそれをやるのでは今後のメンテナンス作業に手間がかかりすぎる。CDN（Contents Delivery Network）を使って本家からCSSを引っ張ってくる方法を紹介している記事もあったけど、せっかく自分のサーバーにFont Awesomeを導入したのにビジュアル・エディタの表示のためだけにCDNを使うのでは二度手間になる。
そこで、functions.phpに次のコードを追加する。念のため、不具合があった時にすぐに戻せるように子テーマを編集するほうが好ましい。add_editor_style関数は、WordPress 3.0で追加された比較的新しい関数で、editor-style.cssに記述されているビジュアルエディタ専用スタイルシートに更にスタイルを追加するもの。引数にはFont AwesomeのCSSを指定するわけだけど、テーマが存在しているディレクトリ（フォルダ）から見て相対パスで指定する。
function vf_add_editor_styles() {
add_editor_style( 'font-awesome/css/font-awesome.min.css' );
}
add_action( 'admin_init', 'vf_add_editor_styles' );
functions.phpを保存してテーマのディレクトリにアップロードする。
表示の確認
新規記事を用意してテキスト・エディタでマークアップを打ち込んだ後、ビジュアル・エディタに切り替えると次のように表示される。Font Awesome 4.1～4.7で実装されたアイコンも表示されているので、WP Visual Icon Fontsを無効化し忘れたということはないことがわかる。
問題点
綺麗にまとまったように思えるけど、欠点もある。
WP Visual Icon Fontsは、TinyMCE（ビジュアル・エディタ）にアイコン挿入用のドロップダウンメニューを追加し、視覚的にアイコンを選べるようになっている。これはこれで便利で、上記の方法を使う場合は従前のようにFont Awesomeのページに行って、使いたいアイコンとそのクラス名を調べてこなければならない。
最新のアイコンは使えなくてもいいから手軽にアイコンを入力できるほうがいいか、プラグインの更新に左右されずに最新のアイコンと機能を使えるほうがいいかを選択することになる。同居させてもおそらく問題は起きないだろうけど、CSSは重複してお互いに打ち消し合う。
もっとも、WP Visual Icon Fontsのドロップダウンメニューでアイコンを選んだ場合でも、次のようなマークアップが挿入されてしまう。公式では<span>要素は文脈上必要でない限り、必須ではないとされている。
<i class="fa fa-camera-retro"><span style="color: transparent; display: none;">icon-camera-retro</span></i>
Font Awesome 4.0の頃はこれが正式な書き方だったのかもしれないけど、場合によってはテキスト・エディタに移って消して回らなければならないという問題も起こりえるため、一概にどちらが優れているとは言えないかもしれない。
関連記事
参考記事
- View Bootstrap, Font Awesome in WordPress Visual Post Editor（Quick Online Tips）
- How to Add Custom CSS Styles to WordPress Post Editor（QOT）
- 関数リファレンス/add_editor_style（WordPress Codex 日本語版）