WordPressでカスタムメニューのリストに連番のクラスを追加する方法

WordPressでカスタムメニューのリストに連番のクラスを追加する方法

WordPressでカスタムメニューのリストに連番のクラスを追加する方法

WordPressのテーマ内に[外観] – [メニュー]で作成したメニューを追加するには、以下のようなコードを追加します。

add_theme_support('menus');

まずは、functions.phpでカスタムメニューを有効化し、header.phpなどのメニューを表示させたい場所に以下を追加します。

<?php wp_nav_menu(); ?>

これで[外観] – [メニュー]で作成したメニューが出力されるようになります。

出力されるメニューは、以下のような形になります。

<ul id="menu-xxx" class="menu">
<li id="menu-item-1" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1"><a href="#">メニュー1</a></li>
<li id="menu-item-2" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2"><a href="#">メニュー2</a></li>
<li id="menu-item-3" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3"><a href="#">メニュー3</a></li>
</ul>

このリストのli要素に連番のクラスを付与する方法を紹介したいと思います。連番を付けることによって、CSSによるカスタマイズが楽になります。

idが連番になっているように思えますが、メニューに追加した順番で数字が変わるので、必ずしも連番になってくれるわけではありません。

WordPressのカスタムメニューに連番のクラスを追加する方法

カスタムメニューのリストに連番のクラスを付けるには、functions.phpに以下のコードを追加します。

function add_nav_menu_custom_class( $sorted_menu_items ) {
 $num = 1;
 foreach ( $sorted_menu_items as $key => $sorted_menu_item ) {
 $sorted_menu_items[$key]->classes[] = 'menu-num-' . $num;
 if ( $num == 1 ) {
 $sorted_menu_items[$key]->classes[] = 'menu-item-first';
 } elseif ( $num == count( $sorted_menu_items ) ) {
 $sorted_menu_items[$key]->classes[] = 'menu-item-last';
 }
 $num++;
 }
 return $sorted_menu_items;
}
add_filter( 'wp_nav_menu_objects', 'add_nav_menu_custom_class' );

出力されるリストには、以下のように「menu-num-x」という連番のクラスが追加されます。

<ul id="menu-xxx" class="menu">
<li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-first menu-num-1 menu-item-4"><a href="#">メニュー1</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-num-2 menu-item-9"><a href="#">メニュー2</a></li>
<li id="menu-item-2" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-last menu-num-3 menu-item-2"><a href="#">メニュー3</a></li>
</ul>

メニューに追加した順番がバラバラでもmenu-num-xというクラスは、ちゃんと連番になってくれます。

さらに、最初のメニューには「menu-item-first」、最後のメニューには「menu-item-last」というクラスも追加されます。

あとがき

リスト毎に異なるスタイルを適用したい場合は、非常に役立ちますね。

メニューをカスタマイズする時に、ぜひご活用ください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です