【Cocoonカスタマイズ】グローバルナビメニューをカテゴリーページごとに変更する方法

はじめに

以下をCocoonで実現します。

【SWELL】グロナビをページごとに変更するカスタマイズ | LP・カテゴリー・固定ページ対応｜かんた🌊SWELLマニア

実装手順

以下の手順で実装します。

ラベル

メニューの作成

外観→メニューからカテゴリーごとに表示するメニューを作成します（図1参照）。
図1①のメニューの位置を、表1に示します。

メニューの位置

メニューの位置	値
ヘッダーメニュー	NAV_MENU_HEADER
ヘッダーモバイルメニュー	NAV_MENU_HEADER_MOBILE
ヘッダーモバイルボタン	NAV_MENU_HEADER_MOBILE_BUTTONS
フッターメニュー	NAV_MENU_FOOTER
フッターモバイルボタン	NAV_MENU_FOOTER_MOBILE_BUTTONS
モバイルスライドインメニュー	NAV_MENU_MOBILE_SLIDE_IN

ラベル

PHPを追加

以下のコードをfunctions.phpに追加します。
例えば、カテゴリーID=123の場合、図1②で設定したメニュー名「menu123」に変更します。

add_filter('wp_nav_menu_args', function ($args) {
  // カテゴリーIDと対応するメニュー名の配列
  $cat_menu_map = [
    123 => 'menu123',
    456 => 'menu456'
  ];

  // ヘッダーメニューの場合
  if ($args["theme_location"] === NAV_MENU_HEADER) {
    if (is_category()) {
      // 現在のカテゴリーIDを取得
      $cat_id = get_queried_object_id();

     // マップ内にカテゴリーIDが存在する場合
     if (isset($cat_menu_map[$cat_id])) {
        $args['menu'] = $cat_menu_map[$cat_id];
      }
    }
  }

  return $args;
});

参考：カテゴリー、メニュー情報を表示する方法

管理画面のダッシュボードに、現在使用可能な「カテゴリー」と「ナビゲーションメニュー」を一覧表示します。
カテゴリーIDやメニューIDを確認する際に利用できます。

完成イメージ

実装コード

以下のコードをfunctions.phpに追加します。

// ダッシュボードウィジェットを追加
add_action('wp_dashboard_setup', function () {
  wp_add_dashboard_widget(
    'category-and-menu-list',
    'カテゴリー・メニュー一覧',
    'render_category_and_menu_list'
  );
});


/**
 * ダッシュボードにウィジェットを出力
 *
 * @return void
 */
if (!function_exists('render_category_and_menu_list')):
function render_category_and_menu_list() {
  // カテゴリーを取得
  $categories = get_categories([
    'hide_empty' => false,
  ]);

  // ナビゲーションメニュー一覧を取得
  $menus = wp_get_nav_menus();

  if (empty($categories) && empty($menus)) {
    return;
  }

  ?>
  <div class="category-and-menu-list">
    <?php if (!empty($categories)): ?>
      <h3 class="category-and-menu-list__heading">カテゴリー一覧</h3>
      <table class="category-and-menu-list__table widefat fixed striped">
        <thead>
          <tr>
            <th>カテゴリー名</th>
            <th>ID</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($categories as $cat): ?>
            <tr>
              <td><?= esc_html($cat->name); ?></td>
              <td><?= esc_html($cat->term_id); ?></td>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    <?php endif; ?>

    <?php if (!empty($menus)): ?>
      <h4 class="category-and-menu-list__heading">メニュー一覧</h4>
      <table class="category-and-menu-list__table widefat fixed striped">
        <thead>
          <tr>
            <th>メニュー名</th>
            <th>ID</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($menus as $menu): ?>
            <tr>
              <td><?= esc_html($menu->name); ?></td>
              <td><?= esc_html($menu->term_id); ?></td>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    <?php endif; ?>
  </div>
  <?php
}
endif;