WordPress でナビゲーションを表示する方法
ナビゲーションを WordPress 化する際につまづいたので、備忘録として記事にします。
フッターのナビゲーションを WordPress 化する
書き換えるコードは以下です。
<footer>
<div class="container">
<div class="inner">
<a href="logo-link"><img class="logo" src="/images/logo.svg" alt="Miu Bread ロゴ"></a>
<ul class="box">
<li><a href="#">こだわり</a></li>
<li><a href="#">お店の特徴</a></li>
<li><a href="#">商品メニュー</a></li>
<li><a href="#">お知らせ</a></li>
<li><a href="#">店舗情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
<p><small>© miu uehara. all rights reserved.</small></p>
</div> <!-- .container -->
</footer>
上記の <ul class=”box”> 内を以下のように編集します。
<ul class="box">
<?php wp_nav_menu( array(
'theme_location' => 'footer-menu'
)); ?>
</ul>
すると、デザインが崩れてしまいました。
functions.php を確認しましたが、記述に問題なく…
register_nav_menu( array (
'footer-menu' => 'footer-menu'
));
しかし、デベロッパーツールで確認するとナビゲーション部分が以下の構造となっていました。
<ul class="box">
<div class="menu">
<ul>
<li class="page_item page-item-30"><a href="http://localhost:〜">お問い合わせ</a></li>
<li class="page_item page-item-22"><a href="http://localhost:〜">お店の特徴</a></li>
<li class="page_item page-item-26"><a href="http://localhost:〜">お知らせ</a></li>
<li class="page_item page-item-20"><a href="http://localhost:〜">こだわり</a></li>
<li class="page_item page-item-24"><a href="http://localhost〜">商品メニュー</a></li>
<li class="page_item page-item-28"><a href="http://localhost:〜">店舗情報</a></li>
</ul>
</div>
</ul>
調べたところ、 wp_nav_menu は自動で <ul> タグや <div> タグが付与されるそうです。
ただ、今回の場合それが原因でデザインが崩れてしまっています。
「 items_wrap 」「 container 」を追加
そこで、 <ul class=”box”> 内に以下を追加しました。
<ul class="box">
<?php wp_nav_menu( array(
'theme_location' => 'footer-menu',
'container' => false,
'items_wrap' => '%3$s'
)); ?>
</ul>
まず、デフォルトで付与された <div> タグを削除するために ‘container’ => false を記述します。
次に、同じくデフォルト付与された <ul> タグを削除するために ‘items_wrap’ => ‘%3$s’ を記述します。「 %3$s 」はメニューリストを表示する文字列なので、必ず記述しましょう。
これで無事解決しました。
