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

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

custommenu-4

カスタムメニューの表示

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

<?php wp_nav_menu( array( 'theme_location' => 'primary', 
  'container_class' => 'menu',
  'menu_class' => '',
  'menu_id' => 'menu-primary-items',
  'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>' ) ); ?>

出力されるHTMLは、

<div class="menu">
  <ul class="" id="menu-primary-items">
    <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-367" id="menu-item-367"><a href="/">ホーム</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-370" id="menu-item-370"><a href="/information">会社案内</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-368" id="menu-item-368"><a href="/news">お知らせ</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-369" id="menu-item-369"><a href="/access">アクセス</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-371" id="menu-item-371"><a href="/contact">お問い合わせ</a>  </li>
  </ul>
</div>

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

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

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

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

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

表示オプション

表示オプション

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

CSS class

CSS class

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

<div class="menu">
  <ul class="" id="menu-primary-items">
    <li class="home menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-367" id="menu-item-367"><a href="/">ホーム</a></li>
    <li class="about menu-item menu-item-type-custom menu-item-object-custom menu-item-370" id="menu-item-370"><a href="/about">会社案内</a></li>
    <li class="news menu-item menu-item-type-custom menu-item-object-custom menu-item-368" id="menu-item-368"><a href="/news">お知らせ</a></li>
    <li class="access menu-item menu-item-type-custom menu-item-object-custom menu-item-369" id="menu-item-369"><a href="/access">アクセス</a></li>
    <li class="contact menu-item menu-item-type-custom menu-item-object-custom menu-item-371" id="menu-item-371"><a href="/contact">お問い合わせ</a></li>
  </ul>
</div>

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

.menu li.home {
 /*  なにかのスタイル */
}

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

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

グローバルメニューにアイコンフォントを使う

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

/*------------------------------
Font Awesome
-----------------------------*/
@font-face {
  font-family: 'FontAwesome';
  src: url("font-awesome/fontawesome-webfont.eot?v=4.1.0");
  src: url("font-awesome/fontawesome-webfont.eot?#iefix&v=4.1.0") format("embedded-opentype"), url("font-awesome/fontawesome-webfont.woff?v=4.1.0") format("woff"), url("font-awesome/fontawesome-webfont.ttf?v=4.1.0") format("truetype"), url("font-awesome/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }

/*------------------------------
Custom Menu
-----------------------------*/
.menu ul#menu-primary-items li a:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  padding-right: 2px;
}

.menu ul#menu-primary-items li.home a:before {
  content: "\f015";
}

.menu ul#menu-primary-items li.about a:before {
  content: "\f06c";
}

.menu ul#menu-primary-items li.news a:before {
  content: "\f05a";
}

.menu ul#menu-primary-items li.access a:before {
  content: "\f041";
}

.menu ul#menu-primary-items li.contact a:before {
  content: "\f0e0";
}

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

3件のコメント

  1. […] た。 グローバルメニューを表示する際に、WordPressではカスタムメニューの機能を利用します。 [紹介元] WordPressのカスタムメニューにCSSを当てる方法 | データベースに接続できません […]

  2. […] データベースに接続できません – WordPressのカスタムメニューにCSSを当てる方法 […]

コメントを残す

メールアドレスが公開されることはありません。