構造化データをしっかり設定するのに凝りだしたのに、Wordpressのデフォルトのメニューは対応してへんやんけ
と、憤りを感じている方。
一晩考えたのちに諦めて、メニュー機能を切り捨てて直接コードを書いてしまっていませんか。
今回は、Wordpressのデフォルトメニューを制御しているclass_walker_nav_menu.phpの「Walker_Nav_Menu 」を継承しつつ、コピペで実装可能な方法をご紹介します。
functions.phpへの記載
まずは、functions.phpに以下をコピペしてください。
著者が参考にした複数サイトのコードはwordpressの仕様変更かなんかでエラーを吐いていましたが、以下は2022年7月現在エラー吐かずに動作確認済みです。
class New_Walker_Nav_Menu extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
{
$output .= '<li itemprop="name" class="menu-item">';
$item_output .= '<a itemprop="url" href="'
. esc_attr($item -> url) .'">'
. $item -> title . '</a>';
$output .= apply_filters('walker_nav_menu_start_el',$item_output,$item,$depth,$args);
}
}メニューを表示したいテンプレートファイルへの記載
次にメニューを表示したいテンプレートファイルの該当部分に下記を追記します。
グローバルナビなら「header.php」が一般的かと思います。
<?php if (has_nav_menu('gnav')) { ?>
<nav id="gnav" role="navigation" itemscope="itemscope" itemtype="http://scheme.org/SiteNavigationElement">
<div class="wrap">
<?php
wp_nav_menu(array(
'theme_location' => 'gnav',
'menu_class' => 'clearfix',
'menu_id' => 'gnav-ul',
'container' => 'div',
'container_id' => 'gnav-container',
'container_class' => 'gnav-container',
'walker' => new New_Walker_Nav_Menu
));
?>
</div>
</nav>
<?php } ?>「menu_class」「menu_id」はそのまま、出力される「ul」にidとclassを付与したいときに記載します。必要なければ不要です。
「container_id」「container_class」は「container」で指定したタグが先述の「ul」の親要素として出力されるので、それのidとclassの制御です。こちらも同様に不要でしたら記載なしで大丈夫ですが、「container」のところは「false」にします。
最後に、「theme_location」はwordpress管理画面で選択するナビの表示させたい場所のスラッグです。
ちなみにメニューのスラッグは「functions.php」に以下を指定することで自由に変更可能です。
register_nav_menus( array(
'gnav' => 'グローバル',
'side' => 'サイド',
'footer' => 'フッター'
) );まとめ
最終的には以下のように、しっかり構造化できたhtmlにて出力されます。
<div id="gnav-container" class="gnav-container">
<ul id="gnav-ul" class="clearfix">
<li itemprop="name" class="menu-item"><a itemprop="url" href="http://example.com">サンプル</a></li>
</ul>
</div>
