WordPressのカスタムメニュー【4】長いClassをスッキリさせる

カスタムメニュー
WordPressカテゴリー

カスタムメニューで生成されるナビゲーションメニューには、デフォルトでたくさんのclassが設定されています。
はじめてHTMLを見た方はその長さにビックリしてしまうかと思います。
もちろんそのまま有効活用する手もありますが、実際には不要に思っている方のほうが多いのではないでしょうか。
今回はその長いたくさんついてくるClassをスッキリと消してしまう方法をご紹介します。

もくじ

function.phpに記述するコード

function.phpに下記を記述することで、<li>から、id と classがきれいになくなります。

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
function my_css_attributes_filter($var) { 
   return is_array($var) ? array_intersect($var, array(
   'current-menu-item',
   'menu-item-home'
    )) : '';
}

これで、該当ページを表示している時だけ追加されるclass「current-menu-item」と、トップページを表示している時だけ追加される「menu-item-home」は残るようなっていますので、該当ページ表示時のCSSを当てることができます。

array_intersect()で指定したもののみ残す

最初の2行

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);

WordPressデフォルトのフィルターフック「nav_menu_css_class」と「nav_menu_item_id」が、「my_css_attributes_filter」を優先的に呼び出すよう設定しています。

function my_css_attributes_filter($var) { 
   return is_array($var) ? array_intersect($var, array(
   'current-menu-item',
   'menu-item-home'
    )) : '';
}

そして$varの配列要素(idとclass名)から、array_intersect()を用いて$varとarray()を比較して、指定してる「current-menu-item」と「menu-item-home」だけを抽出してはきだすようにルールづけしています。

注意点

1点注意しなければいけない点があります。 管理画面やテンプレートphp上で独自にCSSを指定しているものもキレイに消してしまいます。
なので、残したいclassやidはarray()の中に追記しておく必要があります。

下記サイトを参考にさせていただきました。
WordPressカスタムメニューの長いCSSを削除する方法
WordPressカスタムメニューの長いクラス名などを消してすっきりさせたときのメモ