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」というクラスも追加されます。
あとがき
リスト毎に異なるスタイルを適用したい場合は、非常に役立ちますね。
メニューをカスタマイズする時に、ぜひご活用ください。