【WordPress】カスタムメニューの項目ごと別々のアイコンフォントを設置する方法

ナビバーなどで使うカスタムメニューの項目別にアイコンフォントを付けたい場合、ダッシュボード内のメニューに直接記述しても反映しません。カスタムメニューにアイコンフォントを表示したいときはCSS側で設定するのです。アイコンフォントを使い慣れている人はけっこう簡単にできてしまいます。

こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。

カスタムメニュークラス名をつけ、クラス名に応じたアイコンフォントを設置

手順としてはアイコンフォントはカスタムメニューのliに個別のクラス名を付与し、そのクラスに対してcssで：beforeでアイコンフォントを付けていきます。

カスタムメニューのliタグにクラス名をつける

外観→メニュ→表示オプション→【CSS クラス】にチェック→メニューのバーを開き、それぞれにクラス名を入力していきます。アイコンフォントを付けたいメニュー項目すべてにクラス名を入力します。※日本語不可。

カスタムメニューのliに任意のクラス名を付ける方法は下記で詳しく説明してありますので、参考になさってください。

カスタムメニュー呼び出し条件を書き換える

ナビバーに使ってあるカスタムメニューをカスタマイズしたい場合はheader.phpにある＜?php wp_nav_menu(); ?＞を下記のコードに書き換えます。

<?php wp_nav_menu(
    array(
        'container' => false ,
        'items_wrap' => '<ul class="icon_menu">%3$s</ul>'
    )
); ?>

ulのクラス名は好きなものでOKです。これでカスタムメニューのデフォルトで入っている＜div＞と＜ul＞のクラス名を削除して＜ul class=”icon_menu”＞と自分でわかるクラス名に書き換えました。
そうするとこのようなコードに変わります。

<ul class="icon_menu">
<li class="home menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-8"><a href="https://##">ホーム</a></li>
<li class="site menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="https://###">サイト作成</a></li>
<li class="otoiawase menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="https://###">お問い合わせ</a></li>
</ul>

コードもすっきりしてきてはいますがまだliのクラスあたりがごちゃごちゃしています。liについているいらないクラスを削除する方法もこちらで説明しています。（←必須ではありません）

アイコンフォントを使う準備

STINGER5でもデフォルトで搭載しているアイコンフォントFont Awesomeでご説明します。利用されていない方は＜/head＞の前に以下を追記するだけでOK！

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

cssに記述

例として、ホーム(class=”home”)、サイト作成(class=”site”)、お問い合わせ(class=”otoiawase”)にというカテゴリを作りアイコンフォントを入れていくとします。

.icon_menu ul{
		list-style-type:none;
}

.icon_menu li a{	
    text-decoration:none;
　　font-size:12px;
　　display:inline;
}

.icon_menu .home a:before,
.icon_menu .site a:before,
.icon_menu .otoiawase a:before
{ 
　　color: #666; 
  　font-family: "FontAwesome";
    padding-right:5px;
　　font-size:120%;
}
/*各クラス名に対してアイコンフォントを個別にセット*/
.icon_menu .home a:before{
　　content: "\f015"; 
}
.icon_menu .site a:before{
　  content: "\f109"; 
}
.icon_menu .otoiawase a:before{
    content: "\f003"; 
}

これでカテゴリの項目前にアイコンフォントを付けることができました！

まとめ

アイコンフォントがナビバーにあるとグッとかわいいサイトになりますよね？