管理画面から柔軟にメニューが作成できるWordPressのカスタムメニューに独自の連番クラスを追加してみました。
カスタムメニューを有効にする
まずは、functions.php に下記の記述を追加しカスタムメニューを有効化します。
使用用途に合わせて指定を行います。
/* 一つだけ指定 */
register_nav_menus(array('global_menu' => 'グローバルメニュー'));
/* 複数指定をする場合 */
register_nav_menus( array(
'global_menu' => 'グローバルメニュー',
'footer_link' => 'フッターリンク'
));
管理画面で設定を行う
管理画面の [外観]に [メニュー] が追加されるのでクリックし設定を行います。
※設定参考例
表示をする①「関数 wp_get_nav_menu_items 」で表示
これを使ってメニューの配列を取得し、foreachを使って処理します。
追記する場所はテーマのメニューを表示したい箇所。
wp_get_nav_menu_items の引数は、メニューで作成したメニュー名。
<ul class="clearfix">
<?php
$css_count = 1;
$menu_lists = wp_get_nav_menu_items('nav_global');
foreach($menu_lists as $menu) {
echo '<li class="navi'.$css_count++.'"><a href="'.esc_url($menu->url).'">'.esc_html($menu->title).'</a></li>'.PHP_EOL;
}
?>
</ul>
表示するメニュー数を制限する場合
foreachの所をarray_slice()を使って書くと表示数の制限が出来ます。
1～5個までのメニュー表示する場合はこんな感じですね
foreach(array_slice($menu_lists, 0, 5) as $menu) { ***** }
表示の確認をしてみる
連番のクラスが付きます。
<ul> <li class="navi1"><a href="http://localhost/demo">PORTFOLIO</a></li> <li class="navi2"><a href="http://localhost/demo/about.html">ABOUT</a></li> <li class="navi3"><a href="http://localhost/demo/blog.html">BLOG</a></li> <li class="navi4"><a href="http://localhost/demo/contact.html">CONTACT</a></li> </ul>
表示をする②「wp_nav_menu」で表示する場合
こちらは主にfunction.phpで指定を行います。
function.php に記述を追加
カスタムメニューのliにクラスをwp_nav_menu_objects にフックして追加します。
function add_list_custom_class( $add_lists_css ) {
$css_count = 1;
foreach ( $add_lists_css as $item ) {
$item->classes[] = 'navi' . $css_count;
$css_count++;
}
return $add_lists_css;
}
add_filter( 'wp_nav_menu_objects', 'add_list_custom_class');
使いたいテーマの箇所に記述を追加
テンプレート内の表示したい位置に wp_nav_menu の引数に使いたい項目を記述します。
<ul class="clearfix"> <?php wp_nav_menu( array ( 'theme_location' => 'global_menu', 'items_wrap' => '%3$s', 'container' => false )); ?> </ul>
theme_locationは、register_nav_menu() で登録した値をいれます。
例えば、function.php に下記と指定していた場合、
register_nav_menus(array('global_menu' => 'グローバルメニュー'));
theme_location には、「global_menu」を指定します。
‘items_wrap’ => ‘%3$s’ とすると「ul」 の削除が出来ます。
container は、ul をラップするか、ラップする場合は何でラップするかを指定できます。
※使えるタグは、 div、nav。省略した場合 div でラップ。
ここでは何もさせたくないので false を指定。
他にも指定出来るパラメータがあります。詳細は下記リンク先をご覧ください。
表示の確認をしてみる
ソースで見てみると wp_nav_menu を使うとクラスに current-menu-item が付属されます。
表示中のページのボタンデザインを替えたい時に便利ですね。
説明は省きますが不要なクラスを削除する事も可能ですご興味がありましたら「wp_nav_menu 不要クラス削除」等で検索してみて下さい。
<ul class="clearfix"> <li id="menu-item-145" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-16 current_page_item navi1 menu-item-145"><a href="http://localhost/demo/">PORTFOLIO</a></li> <li id="menu-item-144" class="menu-item menu-item-type-post_type menu-item-object-page navi2 menu-item-144"><a href="http://localhost/demo/about/">ABOUT</a></li> <li id="menu-item-143" class="menu-item menu-item-type-post_type menu-item-object-page navi3 menu-item-143"><a href="http://localhost/demo/blog/">BLOG</a></li> <li id="menu-item-146" class="menu-item menu-item-type-post_type menu-item-object-page navi4 menu-item-146"><a href="http://localhost/demo/contact/">CONTACT</a></li> </ul>
以上
また、応用で色々な使い方があるかと思いますので使っていない場合は是非お試しを