🦒 【WordPress】カスタムメニューの設定方法 ③メニューを動的に表示する
作成日: 2021/07/06
1

header.phpのソースコード(before)

<header class="l-header">
  <div class="l-header__inner">
    <div class="p-header">
      <h1 class="p-header__logo"><a href="#" class="c-logo">Logo</a></h1>
      <nav class="p-header__nav p-globalNav">

        <!-- <ul class="p-globalNav__items">~</ul>までを書き換える -->
        <ul class="p-globalNav__items">
          <li class="p-globalNav__item"><a href="#a-menu1" class="p-globalNav__link">Menu1</a></li>
          <li class="p-globalNav__item"><a href="#a-menu2" class="p-globalNav__link">Menu2</a></li>
          <li class="p-globalNav__item"><a href="#a-menu3" class="p-globalNav__link">Menu3</a></li>
          <li class="p-globalNav__item"><a href="#a-menu4" class="p-globalNav__link">Menu4</a></li>
          <li class="p-globalNav__item"><a href="#a-menu5" class="p-globalNav__link">Menu5</a></li>
        </ul><!-- /.p-globalNav__items -->

      </nav><!-- /.p-header__nav -->
    </div><!-- /.p-header -->
  </div><!-- /.l-header__inner -->
</header><!-- /.l-header -->

<div class="p-hamburger">
  <div class="p-hamburger__bars">
    <span class="p-hamburger__bar p-hamburger__bar--top"></span>
    <span class="p-hamburger__bar p-hamburger__bar--middle"></span>
    <span class="p-hamburger__bar p-hamburger__bar--bottom"></span>
  </div><!-- /.p-hamburger__bars -->
  <div class="p-hamburger__label"></div>
</div><!-- /.p-hamburger -->

<div class="p-drawer">

  <!-- <div class="p-drawer__nav p-spNav">~</div>までを書き換える -->
  <div class="p-drawer__nav p-spNav">
    <ul class="p-spNav__items">
      <li class="p-spNav__item"><a href="#a-menu1" class="p-spNav__link">Menu1</a></li>
      <li class="p-spNav__item"><a href="#a-menu2" class="p-spNav__link">Menu2</a></li>
      <li class="p-spNav__item"><a href="#a-menu3" class="p-spNav__link">Menu3</a></li>
      <li class="p-spNav__item"><a href="#a-menu4" class="p-spNav__link">Menu4</a></li>
      <li class="p-spNav__item"><a href="#a-menu5" class="p-spNav__link">Menu5</a></li>
    </ul><!-- /.p-spNav__items -->
  </div><!-- /.p-spNav -->
  
</div><!-- /.p-drawer -->

header.phpのソースコード(after)

<header class="l-header">
  <div class="l-header__inner">
    <div class="p-header">
      <h1 class="p-header__logo"><a href="#" class="c-logo">Logo</a></h1>
      <nav class="p-header__nav p-globalNav">

        <?php
        wp_nav_menu(
          array(
            'depth' => 1, // メニュー階層の深さを設定。1は最上位のページのみに表示
            'theme_location' => 'global', // functions.phpに登録したメニューの表示位置を設定
            'container' => false, // ulタグをnavタグもしくはdivタグで囲むかどうかを設定。falseは何も囲まない
            'menu_class' => 'p-globalNav__items', // ulタグに付けるクラス名を設定
          )
        );
        ?>

      </nav><!-- /.p-header__nav -->
    </div><!-- /.p-header -->
  </div><!-- /.l-header__inner -->
</header><!-- /.l-header -->

~途中省略~

<div class="p-drawer">

  <?php
  wp_nav_menu(
    array(
      'depth' => 1,
      'theme_location' => 'drawer',
      'container' => 'div'
      'container_class' => 'p-drawer__nav p-spNav', // ulタグを囲むタグに対して付けるクラス名を設定
      'menu_class' => 'p-spNav__items',
    )
  );
  ?>

</div><!-- /.p-drawer -->

注意事項


31歳/福岡在住/現在統合失調症の治療中/高卒後に通った予備校で人間関係に苦しむ▶大学を6年かけて卒業▶自分の力で稼ぎたい思いで投資を始めるも挫折▶けんすうさんのnoteを読みWeb制作の学習開始/日々の学習内容を発信します😌