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="http://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クラスを追加するようにします。

functions.php
//クラスの削除と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 で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。