WordPressのカスタムメニューから不要なコードを削除する方法

WordPressのテンプレートタグwp_nav_menuを使用して表示したカスタムメニューから、不要なコードを削除する方法の備忘録です。

カスタムメニューの作り方

WordPress管理画面左サイドメニューの「外観」＜「メニュー」からカスタムメニューの作成画面を開きます。

メニュー名を入力して、「メニューを作成」ボタンをクリックして保存します。

続いて、メニュー項目を追加からメニューに追加したい項目にチェックを入れます。

項目にチェックを入れた状態で「メニューに追加」ボタンをクリックすると、右側のメニュー構造に追加されます。

最後に「メニューを保存」ボタンをクリックして設定を保存します。

作成したカスタムメニューは、テンプレートタグwp_nav_menuを使用して表示します。

<?php
  wp_nav_menu ( array('menu'=>'header-navi', 'fallback_cb'=>'') );
?>

Webサイトを確認すると、以下のようなHTMLで構成されたメニューが出力されます。

<div class="menu-header-navi-container">
  <ul id="menu-header-navi" class="menu">
    <li id="menu-item-143" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-143"><a href="https://sample.com" aria-current="page">ホーム</a></li>
    <li id="menu-item-141" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-141"><a href="https://sample.com/about">私たちについて</a></li>
    <li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-139"><a href="https://sample.com/company">企業情報</a></li>
    <li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140"><a href="https://sample.com/access">アクセス</a></li>
    <li id="menu-item-138" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-138"><a href="https://sample.com/news">お知らせ</a></li>
    <li id="menu-item-142" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142"><a href="https://sample.com/contact">お問い合わせ</a></li>
    <li id="menu-item-146" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-146"><a href="https://sample.com/recruit">採用情報</a></li>
  </ul>
</div>

そのままではカスタムメニューのIDやクラスが大量に設定されているので、ここから不要なコードを削除していきます。

カスタムメニューの詳しい作り方は、こちらの記事で紹介しています。

WordPressでカスタムメニューを設置する方法

WordPressでカスタムメニューを設置する方法

WordPressのカスタムメニューを使用してグローバルメニューを設置する手順の備忘録です。 カスタムメニューの有効化 カスタムメニューを作成するために、WordPressのメニュー機能を使用します。…

div要素を削除する

メニュー全体を囲っているdiv要素を削除する方法です。

カスタムメニューを出力しているwp_nav_menuのコードを、下記のように修正します。

<?php
  wp_nav_menu ( array('menu'=>'header-navi', 'container'=>false, 'fallback_cb'=>'') );
?>

配列内に'container'=>falseを追加しています。

containerはul要素を囲むHTML要素を指定するプロパティです。「false」を設定することで、ul要素を囲む要素を削除できます。

<ul id="menu-header-navi" class="menu">
  <li id="menu-item-143" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-143"><a href="https://sample.com" aria-current="page">ホーム</a></li>
  <li id="menu-item-141" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-141"><a href="https://sample.com/about">私たちについて</a></li>
  <li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-139"><a href="https://sample.com/company">企業情報</a></li>
  <li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140"><a href="https://sample.com/access">アクセス</a></li>
  <li id="menu-item-138" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-138"><a href="https://sample.com/news">お知らせ</a></li>
  <li id="menu-item-142" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142"><a href="https://sample.com/contact">お問い合わせ</a></li>
  <li id="menu-item-146" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-146"><a href="https://sample.com/recruit">採用情報</a></li>
</ul>

divを別のHTML要素に変更することも可能です。例えば'container' => 'nav'とした場合、ul要素をnavで囲みます。

ul要素からidとclassを削除する

ul要素からid属性とclass属性を削除する方法です。

カスタムメニューを出力しているwp_nav_menuのコードを、下記のように修正します。

<?php
  wp_nav_menu ( array('menu'=>'header-navi', 'container'=>false, 'items_wrap'=>'<ul>%3$s</ul>', 'fallback_cb'=>'') );
?>

配列内'items_wrap'=>'<ul>%3$s</ul>'を追加しています。

items_wrapは、メニュー項目を囲むul要素を変更するプロパティです。デフォルトではidとclassが設定されているので、削除したシンプルな<ul>の形に書き換えています。

<ul>
  <li id="menu-item-143" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-143"><a href="https://sample.com" aria-current="page">ホーム</a></li>
  <li id="menu-item-141" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-141"><a href="https://sample.com/about">私たちについて</a></li>
  <li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-139"><a href="https://sample.com/company">企業情報</a></li>
  <li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140"><a href="https://sample.com/access">アクセス</a></li>
  <li id="menu-item-138" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-138"><a href="https://sample.com/news">お知らせ</a></li>
  <li id="menu-item-142" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142"><a href="https://sample.com/contact">お問い合わせ</a></li>
  <li id="menu-item-146" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-146"><a href="https://sample.com/recruit">採用情報</a></li>
</ul>

ul要素に別のidやclassを設定したい場合もitems_wrapに直接記入が可能です。

また、デフォルトの設定を元にidだけ、またはclassだけを削除することも可能です。

'menu_id' => 'global-menu',
'menu_class' => 'menu',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',

%1$sにmenu_id、%2$sにmenu_class、%3$sにメニュー項目が入ります。

<ul id="global-menu" class="menu">
...
</ul>

li要素からidを削除する

HTML内の<li>要素に付与されるid属性を削除する方法です。

テーマファイルの「functions.php」内に、下記のコードを記述します。

function remove_menu_id($id){
  return $id = array();
}
add_filter('nav_menu_item_id', 'remove_menu_id', 10);

functions.phpにエラーがあるとWebサイトが正常に表示できなくなる可能性があるため、編集する際はバックアップを取るなど十分に注意して作業してください。

フィルターフックnav_menu_item_idを利用して、idの値に空の配列を格納することで削除しています。

<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-143"><a href="https://sample.com" aria-current="page">ホーム</a></li>

li要素からclassを削除する

同様にHTML内の<li>要素に付与されるclass属性を削除する方法です。

テーマファイルの「functions.php」内に、下記のコードを記述します。

function remove_menu_class($classes){ 
  return $classes = array();
}
add_filter('nav_menu_css_class', 'remove_menu_class', 10, 2);

フィルターフックnav_menu_css_classを利用して、classの文字列が入っている配列を空にすることで削除しています。

<ul>
  <li><a href="https://sample.com/" aria-current="page">ホーム</a></li>
  <li><a href="https://sample.com/about">私たちについて</a></li>
  <li><a href="https://sample.com/company">企業情報</a></li>
  <li><a href="https://sample.com/access">アクセス</a></li>
  <li><a href="https://sample.com/news">お知らせ</a></li>
  <li><a href="https://sample.com/contact/">お問い合わせ</a></li>
  <li><a href="https://sample.com/recruit">採用情報</a></li>
</ul>

大量に設定されていたclassがなくなり、HTMLがすっきりしました。

aria-currentを削除する

最後に、現在表示しているページのメニューに設定されているarea-current属性を削除する方法です。

サンプルのHTMLでは、「ホーム」にaria-current="page"が設定されています。

テーマファイルの「functions.php」内に、下記のコードを記述します。

function remove_menu_aria_current($atts, $item, $args){
  unset ($atts['aria-current']);
  return $atts;
}
add_filter('nav_menu_link_attributes', 'remove_menu_aria_current', 11, 5);

フィルターフックnav_menu_link_attributesを利用して、メニュー項目のリンク要素からaria-current属性を削除しています。

<ul>
  <li><a href="https://sample.com/">ホーム</a></li>
  <li><a href="https://sample.com/about">私たちについて</a></li>
  <li><a href="https://sample.com/company">企業情報</a></li>
  <li><a href="https://sample.com/access">アクセス</a></li>
  <li><a href="https://sample.com/news">お知らせ</a></li>
  <li><a href="https://sample.com/contact/">お問い合わせ</a></li>
  <li><a href="https://sample.com/recruit">採用情報</a></li>
</ul>

リストとリンク要素だけの、すっきりとしたHTMLが完成しました。

Share on Twitter
関連記事
WordPressで記事内に同じカテゴリーの記事一覧を表示する方法
WordPressで記事内に同じカテゴリーの記事一覧を表示する方法
WordPressでテンプレートパーツを作成する方法
WordPressでテンプレートパーツを作成する方法
カスタムメニューをショートコードで表示する方法
カスタムメニューをショートコードで表示する方法