WordPressのカスタムメニューにCSSを当てる方法

グローバルメニューを表示する際に、WordPressではカスタムメニューの機能を利用する。企業サイトなど実際の案件となるとここはテキストのみならず、CSSを使って画像やアイコンフォントを当てる場合が多いだろう。
その方法について考えた。

カスタムメニューの表示

カスタムメニューを表示する際は、たとえばテーマ(header.phpなど)で以下のように記述する。

出力されるHTMLは、

メニュー項目にアイコンを付けたい場合はこの中で、menu-item-367、menu-item-368といったクラスにCSSを当てればよかろうと思っていた。しかし、このように数字をともなうクラス名は構築した環境によって異なるため、テスト環境ではmenu-item-367なのに、本番環境ではmenu-item-52 となってしまったというような食い違いが生じる。
テスト環境と本番環境の両方を考慮し、クラス名を調べつつCSSを当てればよいのか？ちょっと面倒だし、間違えやすいなぁと思いながらやっていた。

ところが、最近あることを知った！
(知らなかったのは私だけなのか？)

メニュー項目にクラスを付与

カスタムメニューの各メニュー項目には、ダッシュボードより好きなクラスを付与できるのだッ！！

ダッシュボードの[外観]-[メニュー]に表示オプションがある。

このなかに、「CSSクラス」がある。
ここをチェックしておくと、メニュー項目の設定に「CSS class (オプション)」が表示される。

たとえば「ホーム」の項目にはCSS classとして「home」を指定する。他の項目にも同じようにそれぞれCSS classを指定した場合、出力されるHTMLは、

メニュー項目のliに対して「home」などのCSS classが付与されている。
こうなったらstyle.cssには以下のように書けばよい。

アイコンフォントを当てる

ためしにFont Awesomeというアイコンフォントを、メニュー項目に当ててみよう。

CSSの記述は以下のようになる。

これまでにカスタムメニューに対応したテーマを何回か作っているので慣れているつもりだった。にもかかわらずこのオプションに何年も気づかなった。
カスタムといえば、カスタムフィールド、カスタム投稿、カスタムタクソノミーの3兄弟ばかりが注目されるなか、カスタムメニューだってカスタムしがいがあるのだ。