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

navbar1

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

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

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

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

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

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

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

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

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

MEMO

当ブログで使用しているSTINGER5は <?php wp_nav_menu(array(‘theme_location’ => ‘navbar’));?>の間の部分を書き換えとなります。これはメニューとアコーディオンと2か所あります。

<?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"; 
}

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

まとめ

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

ちゅんこ

ちゅんこ

日々の生活を送る上で、「いかに手を抜くか」という不真面目なことを真面目に探求している意識低い系主婦です。東京ではない首都圏に極小ペンシルハウスを建築し、夫と娘(小1)と仲睦まじく暮らしています。好きな食べ物は舟和の芋ようかん。

関連するキーワード

1 件のコメント

  1. kengo0831様

    大変申し訳ございませんが、個別に対応することは一切行っておりませんのでご了承願います。