WordPressでグローバルナビゲーションなどの「メニュー」を表示するために「wp_nav_menu」を使うこともあると思います。

この「wp_nav_menu」には、メニューをカスタマイズするために設定できるパラメーターがいくつか用意されています。

今回は、その中でも表示する「メニューを囲む要素」をカスタマイズする必要があったので、方法をまとめました。

「メニューを囲む要素」ってなんだ

私の表現力がとても不足しているので「『メニューを囲む要素』って何よ？」と思う方のほうが多いんじゃないかと思います。

ですので、「どこの要素のことを言っているのか」以下に例を挙げました。

カスタマイズしたいのはこの要素

例えば、「wp_nav_menu」を特に何もパラメーターを指定せずに使うと、以下のようなコードが出力されます。※要素の箇所だけを説明したいので、classやhref属性などは省略しています。

<div>
 <ul>
  <li><a>メニュー1</a></li>
  <li><a>メニュー2</a></li>
  <li><a>メニュー3</a></li>
 </ul>
</div>

上のコードの「div」要素が今回カスタマイズしたい「メニューを囲む要素」の部分です。

というわけで、以上が長い前提で以下が本題です。

指定できる要素を追加したいときは

デフォルトでは「div」「nav」の2つの要素だけ指定できますが「wp_nav_menu_container_allowedtags」を使えば、要素を追加することができます。

例えば「section」要素を追加するには、functions.phpの最後尾などに以下のように書きます。コードはこちらを参考にしました。

//section要素を追加する
add_filter( 'wp_nav_menu_container_allowedtags', 'add_wp_nav_menu_coutainer_allowed_html' );
function add_wp_nav_menu_coutainer_allowed_html( $allowed_html ) {
 $allowed_html[] = 'section';
 return $allowed_html;
}

コードがやっていること

配列「$allowed_html」には使用できる要素「div」「nav」が格納されているので、そこに使用したい要素を追加してあげている、という単純な処理です。

「要素は指定しなくてもいい。削除したい」ってときは

逆に「別に何も囲んでくれなくてもいい。削除したい」って方は結構いるかもしれないですね。

そんな時は、以下の2つの方法のどちらかを使えばOKです。

方法1

functions.phpの最後尾などにコードを追記する方法です。

//要素を削除する
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );
function my_wp_nav_menu_args( $args = '' ) {
 $args['container'] = false;
 return $args;
}

方法2

「wp_nav_menu」のパラメーター「container」を以下のように設定する方法です。

wp_nav_menu( array( 'container' => '' ) );

どちらの方法もCodexを参考にしています。方法1はコードの書き順をちょっと変えて、方法2は引用しています。

やりやすい方法を選べばいいですね。

一歩進んだカスタマイズをするときには必要かも

「『wp_nav_menu』を使って出力されるメニューはリストだし、要素も『ul』『li』だし、それを囲む要素としては『div』『nav』だけ指定できればいいんじゃないの？」

と、思う方もいらっしゃるかもしれませんね。

実はこの「ul」「li」要素もWalkerを使えば別の要素に変更したり削除することもできますし、以前下のページに書いたのですが「メニューの機能を利用して、もう少し変わった使い方をしたい」という場合のために用意されているんだろうな～と自分なりに解釈しました。

これまでメニューをカスタマイズした経験が少ないので、この方法を使いこなして今後に役立てたいです。