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 」はメニューリストを表示する文字列なので、必ず記述しましょう。

これで無事解決しました。