カスタムメニューで生成されるナビゲーションメニューには、デフォルトでたくさんの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カスタムメニューの長いクラス名などを消してすっきりさせたときのメモ