WordPress カスタムメニューのliタグにclass名を追加する

WordPress カスタムメニューのliタグにclass名を追加する

WordPressのカスタムメニューをregister_nav_menuで呼び出すことでテーマ機能を追加してからwp_nav_menuでカスタムメニューをサイトに表示すると、表示したカスタムメニューのliタグには最初からclass属性が付与されています。

だいたい以下のようなclass名がカスタムメニューのliタグに付いています。

 

  • menu-item
  • menu-item-type-custom
  • menu-item-object-custom
  • current-menu-item
  • current_page_item
  • menu-item-home
  • menu-item-3943

 

WordPressのカスタムメニューは上記のクラス名以外にも任意で自分の好きなclass名を追加して、WordPressのカスタムメニューのli要素にCSSを適用することができるので、やり方を知りたい場合は参考に使って下さい。

 

カスタムメニューの表示オプションにチェックを入れる

 

WordPressのカスタムメニューのliタグに任意のクラス名を追加する場合は、まずWordPressの管理画面からメニューを開きます。

 

 

そして開いたメニュー画面の右上にある「表示オプション」をクリックすると表示オプションが現れるので、表示オプションの中の「CSSクラス」という項目のチェックボックスにチェックを入れます。

そうすると、それぞれのメニュー項目ごとにCSSを適用したりできるクラス名を追加できるようになります。

 

CSS class(オプション)でliタグにclass名を追加

 

表示オプションでCSSクラスにチェックを入れたことにより、カスタムメニューで作成しているメニューの項目ごとの中には「CSS class(オプション)」という入力ボックスが追加表示されています。

 

 

あとは各メニューの項目に表示されたCSS class(オプション)の入力ボックスに任意のクラス名を入力して保存するだけで、カスタムメニューのliタグのclass属性として追加できます。

Advertisement

それぞれ使用中のWordPressテーマのヘッダーやフッターにカスタムメニューでメニュー項目を追加してメニュー構造を作られている方もいるかと思いますが、カスタムメニューのクラス名の追加は各メニューリストのliタグごとにclass名を付与できます。

例えばグローバルメニューとしてヘッダー用に作成したカスタムメニューとフッター用として作成した2つのカスタムメニューがあったとしても、それぞれのカスタムメニューのliタグ用にCSSが適用できる任意のclass名にできます。

 

liタグにclass名を追加できたかソース確認

 

カスタムメニューを使用しているWordPressのサイトのページを表示して「ページのソース」や「検証ツール」でliタグのclass属性に任意のクラス名が追加できているか確認しておくようにします。

カスタムメニューの親要素はwp_nav_menuで表示する<nav id=”header-nav” class=”header-nav”>というHTML5から追加されたnavタグでマークアップされているので、ハイライトすると任意のクラス名を追加したli要素の特定がやりやすくなります。

 

<nav id="header-nav" class="header-nav">
 <ul id="menu-%e3%83%98%e3%83%83%e3%83%80%e3%83%bc" class="menu">
  <li id="menu-item-3943" class="h menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-3943"><a href="http://z.local" aria-current="page">ホーム</a></li>
 </ul>
</nav>

 

カスタムメニューに追加したクラス名の確認は、例えばの例ですがワードプレスのカスタムメニューの項目にホームに移動できるリスト項目を作成して、ホームメニューのclass名を任意で「h」にした場合。

ソースコードを確認すると上のHTMLのようにliタグには”h”が追加できているのが確認できます。

このときに任意のクラス名以外のクラス名がありますが、必要ない場合には任意で追加したクラス名だけを残して、それ以外のクラス名を消すこともできます。

 

カスタムメニューのliタグに追加したクラス名だけにする

 

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);

function my_css_attributes_filter($var) {
return is_array($var) ? array_intersect($var, array( 'h' ) ) : '';
}

 

上のPHPコードで最後の行のarray( ‘’)のカッコ()の中に、カスタムメニューのメニュー項目に任意で追加したクラス名だけを記述します。

そして記述したPHPコードをWordPressのfunctions.phpに記述します。

 

<nav id="header-nav" class="header-nav">
 <ul id="menu-global" class="menu">
  <li class="h"><a href="http://z.local" aria-current="page">ホーム</a></li>
 </ul>
</nav>

 

そうするとカスタムメニューでliタグのクラス属性に追加したクラス名は、array( ‘h’)のカッコの中に記述したクラス名だけ付与することができ、ソースコードを確認するとカスタムメニューのliタグには任意のクラス名だけ付与できているのが確認できます。

Advertisement

 

カスタムメニューにCSSを適用してみる

 

WordPressのカスタムメニューのliにクラス名を追加できているかをHTMLのソースコードで確認してマークアップしてあれば問題ないかと思いますが、CSSをカスタムメニューのliに追加したクラス名で当てられるか背景色と余白、そしてCSSのbeforeとafterの擬似要素を適用させて確認しておきます。念のためですね。

 

.h{
 padding:5px;
 background: pink;
}

画像ではホームのli要素に背景色をCSSで変えてます。

カスタムメニューのliタグに追加した任意のクラス名をセレクタにしてpaddingとbackgroundを適用してみただけですが、問題なくCSSが適用できるのでカスタムメニューのliタグにクラス名の追加が成功しています。

li要素の右余白が広いのは確認するだけだから。と調整していません。

 

.h:before{
 content:'(';
 color: tomato;
}
.h:after{
 content:')';
 color: tomato;
}
.h a{
	color: gray;
	padding:5px;
}

 

CSSのbeforeとafterでカスタムメニューのli要素の前後に擬似要素を適用できるか確認しても大丈夫そうなので、WordPressのカスタムメニューのメニュー項目ごとにクラス名を追加すれば、アイコンフォントを表示することができるようになります。

このとき追加したliタグのclass名の子要素a要素で組み合わせたセレクタにしてCSSをカスタムメニューのa要素に適用することもできます。

 

まとめ

 

WordPressのカスタムメニューは新しいメニューを作成して保存しておけば何種類かのカスタムメニューを作成しておくことができます。

作成のとき同時にliタグにクラス名を追加しておき、それぞれのメニュー用のCSSを作っておけば、あとはWordPressのメニュー設定で好きなメニューに切り替えるだけで運営するWordPressサイトのメニューデザインを好きに変更できますね。

WordPress使い方カテゴリの最新記事