WordPressのカスタムメニューに付与されるIDやクラスを削除する方法

WordPressのカスタムメニューに付与されるIDやクラスを削除する方法

WordPressのカスタムメニューに付与されるIDやクラスを削除する方法

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に任意のクラスを追加する方法」をご参照ください。

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

Twitter で

コメントを残す

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