WordPressでテーマ内にカスタムメニューを設置すると、以下のようにリストに対して自動的にIDやクラスが付与されます。
<ul class="nav-menu"> <li id="menu-item-58" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-58"><a title="TechMemo" href="https://techmemo.biz/" data-wpel-link="internal">HOME</a></li> </ul>
今回は、カスタムメニューに自動付与されるIDやクラスを削除して、コードをスッキリさせる方法をご紹介いたします。
カスタムメニューに付与されるIDやクラスを削除する方法
テーマ内にカスタムメニューを設置するには、wp_nav_menu関数を記述しますが、以下のようにitems_wrapを指定してあげると、IDやクラスは付与されなくなります。
<?php wp_nav_menu( array( 'container' => false , 'items_wrap' => '<ul>%3$s</ul>' ) ); ?>
containerでは、メニューを囲むdiv要素も無効化しています。
カスタムメニューからIDやクラスを削除しつつ、閲覧中のページではcurrent_page_itemクラスを追加する
上述した方法でカスタムメニューを設置すれば、IDやクラスが削除されてコードはスッキリしますが、カレント表示が使えなくなります。閲覧中のページではリストの装飾を変更したい場合もあるかと思いますので、開いているページではli要素にcurrent_page_itemクラスを追加するようにします。
//クラスの削除とcurrent_page_itemクラス付与
function removeclass_and_currentadd( $classes, $item ) {
//管理画面で設定されたカスタムクラス名を変数に代入
if( !empty( $classes[0] ) ){
$custom_class = esc_attr( $classes[0] );
}
$classes = array();
if( $item -> current == true ) {
$classes[] = 'current_page_item';
}
//変数に入れておいたカスタムクラス名を配列へ格納
if( !empty( $custom_class ) ){
$classes[] = $custom_class;
}
return $classes;
}
add_filter( 'nav_menu_css_class', 'removeclass_and_currentadd', 10, 2 );
//IDの削除
function removeid( $id ){
return $id = array();
}
add_filter('nav_menu_item_id', 'removeid', 10);
functions.phpに上記を追加すると、カスタムメニューからIDやクラスが削除され、閲覧中のページではli要素にcurrent_page_itemクラスが追加されるようになります。
あとがき
カスタムメニューのコードをカスタマイズしたい時は、参考にしていただけると幸いです。
逆に任意のIDやクラスを追加したい場合は、「カスタムメニューで出力されるulやliに任意のクラスを追加する方法」をご参照ください。