【WordPress】WPのカスタムメニュー機能（グロナビ）の設置方法とPCとSPで表示するメニューを切り替える方法

WPのカスタムメニュー機能（グロナビ）の設置方法とPCとSPで表示するメニューを切り替える方法

PCとSPで表示するメニューを切り替える方法

PCとSP（ハンバーガーメニュー）でメニュー内容を変えたい時に使える方法。

PCは「会社案内」と「お知らせ」だけ表示させたい。

SPのハンバーガーメニューは「会社案内」と「お知らせ」に加えて「ホーム」も表示させたい。

結論、管理画面のメニューを編集する画面で、右上にある「表示オプション」をクリック。

そして表示された「詳細メニュー設定を表示」の項目の「CSSクラス」にチェックボックスを入れる。

すると、各メニューにCSSのclassをそれぞれ振ることができるようになる。

「ホーム」はSPだけに表示させたいので、あらかじめSPだけで表示されるCSSのクラス名「sp」を付ければPCでは表示されずSPだけに表示されるようになる。

STEP①カスタムメニューを追加する

ここからは実際にPHPファイルに記述するコード。

/*********************************
メニュー機能追加
 **********************************/
add_theme_support('menus');
// メニュー機能を使えるようにする
add_action('init', function () {
  // メニューに位置指定チェックボックス作成(連想配列)
  //複数のメニューを登録する場合
  register_nav_menus(array(
    'header' => 'ヘッダーメニュー',
  ));
});

STEP②カスタムメニューを表示するテーマファイルに記述

header.phpにナビメニューを表示することが多いと思うので、今実装中のheaderをそのまま貼り付け。

  <header>
    <div class="headerInner">
      <div class="headerLogo">
        <figure class="logo">
          <a href="<?php echo esc_url(home_url()); ?>">
            <img src="<?php echo esc_url(get_theme_file_uri('img/logo_01.png')) ?>" alt="">
          </a>
        </figure>
      </div>
      <nav class="headerNav">
        <?php
        wp_nav_menu(array(
          'theme_location' => 'header',
          'container'      => '',
          'menu_class'     => 'navList',
          'depth'          => 1,
        ));
        ?>
        <div class="btnBox">
          <a href="#" class="btn -type1" target="_blank">お問い合わせ</a>
        </div>
        <div class="sp">
          <div class="overlay" id="js-overlay"></div>
          <div class="hamburger"><span></span><span></span><span></span></div>
        </div>
      </nav>
    </div>
  </header>

PC用とSP用でメニューを切り替えるならそれぞれメニューを表示させて、pcとspそれぞれ表示させないようにclass名を振ったのだが、wp関数の方が強力なのか制御ができなかった。

        <?php
        wp_nav_menu(array(
          'theme_location' => 'header',
          'container'      => '',
          'menu_class'     => 'navList',
          'depth'          => 1,
        ));
        ?>

ポイントは’container’の部分は空にしておく。

そしてulにnavListのclass名を振っておくとcssをあてやすい。

wp_nav_menu() のパラメータ

こちらの記事の表が見やすかったので引用させてもらいました。

キー	値の型	初期値	内容
theme_location	文字列	なし	register_nav_menu() や register_nav_menus() で登録した際の「メニューの位置」の識別子の値。
menu	文字列	なし	出力するメニューの名前（メニューを作成する際に「メニュー名」で設定した名前）。add_theme_support( ‘menus’ ) でメニューを有効化してメニューを作成した場合に使用。※theme_location を指定した場合は、このキーは使用しない。
container	文字列	div	メニューの ul 要素を囲む要素（コンテナ）のタグ（要素）名。div または nav（HTML5）のどちらかを指定。コンテナをなしにする場合は false を指定。例: ‘container’ => false
container_id	文字列	なし	メニューの ul 要素を囲む要素（コンテナ）に割り当てる ID。
container_class	文字列	menu-{メニュー名}-container	メニューの ul 要素を囲む要素（コンテナ）に割り当てるクラス名
menu_id	文字列	menu-{メニュー名}	メニューの ul 要素に割り当てる ID
menu_class	文字列	menu	メニューの ul 要素に割り当てるクラス名
before	文字列	なし	リンクの前に出力する文字列
after	文字列	なし	リンクの後に出力する文字列
link_before	文字列	なし	リンク対象文字列の前に出力する文字列
link_after	文字列	なし	リンク対象文字列の後に出力する文字列
depth	整数	0	出力するメニューの階層の上限。0 を指定すると全階層を出力
fallback_cb	文字列	wp_page_menu	メニューが存在しないときに実行する関数名
echo	true/false	true	false を指定すると、結果の HTML を出力せずに、戻り値として返す

WordPress Codexも参考に。

<?php wp_nav_menu( array(
  'theme_location'  => 'global',
  'menu'            => '',
  'menu_class'      => 'menu',
  'menu_id'         => '',
  'container'       => 'div',
  'container_class' => 'div-class',
  'container_id'    => 'div-id',
  'fallback_cb'     => 'wp_page_menu',
  'before'          => '',
  'after'           => '',
  'link_before'     => '',
  'link_after'      => '',
  'echo'            => true,
  'depth'           => 0,
  'walker'          => '',
  'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
)); ?>

header.phpのCSS

おまけに今回使用したCSSファイルも。

@use '../global'as g;

/* header */
header {
  width: 100%;
  height: 90px;

  @include g.sp {
    height: 3.75rem;
  }

  .headerInner {
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;

    .headerLogo {
      margin: 15px 0 17px 48px;

      @include g.sp {
        margin: 0.5em;
      }
    }


    .headerNav {
      display: flex;
      justify-content: space-between;

      @include g.sp {
        align-items: center;
      }

      .navList {
        display: flex;

        @include g.pc {
          justify-content: space-between;
        }



        li {
          font-size: 14px;
          font-weight: bold;
          margin: 36px 40px 33px 0;

          @include g.sp {
            font-size: 0.875rem;
            margin: 0.5em;
            line-height: 2;
          }
        }
      }
    }
  }
}