目次
目次

おすすめカードをカテゴリーページごとに変更する方法

Cocoonカスタマイズ集
この記事は約5分で読めます。
記事内に広告が含まれています。

はじめに

以下をCocoonで実現します。

【SWELL】ピックアップバナーを記事のカテゴリーごとに変更するカスタマイズ｜かんた🌊SWELLマニア
※2024年11月記事更新（問い合わせへの返答を追加） WordPressテーマSWELLのカスタマイズメモです。 「ピックアップバナーを記事が属するカテゴリーごとに変更する」というのが今回のカスタマイズです。 ピックアップバナーって何だ？...
note.com

おすすめカードを、カテゴリーページごとに変更します。

この記事では、この方法について説明します。

実装手順

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

  • ラベル
    Cocoon設定

    表1に示す項目を設定をします。
    該当のカテゴリーページ以外では、「メニュー選択」で設定されたメニューが表示されます。

    Cocoon設定
    設定大項目項目設定値
    おすすめカードおすすめカード設定メニュー選択
  • ラベル
    PHPを追加

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

    add_filter('theme_mod_recommended_cards_menu_name', function ($current_mod) {
  // カテゴリーIDとメニュー名の対応を設定
  $cat_menu_map = [
    123 => 'menu123',
    456 => 'menu456',
  ];

  if (is_category()) {
    // 現在のカテゴリーIDを取得
    $cat_id = get_queried_object_id();

    // 対応するカテゴリーIDがある場合
    if (isset($cat_menu_map[$cat_id])) {
      $current_mod = $cat_menu_map[$cat_id];
    }
  }

  return $current_mod;
});

ノーコードで実現する方法

ノーコードで実現するなら、Cocoon設定→おすすめカードではなく「おすすめカード」ウィジェットを使用します。
この際、表示設定でカテゴリーを指定し、カテゴリーごとに複数「 おすすめカード」ウィジェットを配置します。

参考：カテゴリー編集にメニュー設定を追加する方法

投稿→カテゴリー→カテゴリー編集に、独自にの設定項目「おすすめカード」を追加します。

グローバルナビメニューをカテゴリーページごとに変更する方法
「Cocoonのグローバルナビをカテゴリーごとに変更する方法」を解説。カテゴリーIDに応じて表示するメニューを切り替える方法や、カテゴリー編集画面からメニューを指定する方法、カテゴリーとメニューのIDを一覧で確認する方法、他のメニューや固定ページへ応用する方法を分かりやすく紹介します。
chuya.s239.xrea.com

完成イメージ

実装手順

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

// カテゴリー編集にメニューを追加
add_action('category_edit_form_fields', function ($term) {
  // ナビゲーションメニュー一覧を取得
  $menus = wp_get_nav_menus();

  // 保存済みメニューIDを取得
  $menu_id = get_term_meta($term->term_id, 'my_category_recommended_cards', true);

  ?>
  <tr class="form-field term-menu-wrap">
    <th>
      <label for="category_recommended_cards">おすすめカード</label>
    </th>
    <td>
      <?php wp_nonce_field('category_recommended_cards_action', 'category_recommended_cards_nonce'); ?>
      <select name="category_recommended_cards" id="category_recommended_cards">
        <option value="">未選択</option>
        <?php foreach ($menus as $menu) : ?>
          <option value="<?= esc_attr($menu->term_id); ?>" <?php selected($menu_id, $menu->term_id); ?>><?= esc_html($menu->name); ?></option>
        <?php endforeach; ?>
      </select>


      <p class="description">このカテゴリーに表示するおすすめカードを選択してください。</p>
    </td>
  </tr>
  <?php
});


// カテゴリー編集の設定を保存
add_action('edited_category', function ($term_id) {
  // nonceチェック
  if (!isset($_POST['category_recommended_cards_nonce']) || !wp_verify_nonce($_POST['category_recommended_cards_nonce'], 'category_recommended_cards_action')) {
    return;
  }

  if (isset($_POST['category_recommended_cards'])) {
    update_term_meta($term_id, 'my_category_recommended_cards', (int) $_POST['category_recommended_cards']);
  }
});


// Cocoon設定（おすすめカード）のメニューを変更
add_filter('theme_mod_recommended_cards_menu_name', function ($current_mod) {
  if (!is_category()) {
    return $current_mod;
  }

  $cat    = get_queried_object();
  $cat_id = $cat->term_id;

  // カテゴリーに保存されたメニューIDを取得
  $menu_id = get_term_meta($cat_id, 'my_category_recommended_cards', true);

  // 有効なメニューIDの場合
  if (!empty($menu_id) && is_nav_menu((int) $menu_id)) {
    $current_mod = (int) $menu_id;
  }

  return $current_mod;
});

さいごに

今回紹介した方法を使えば、カテゴリーページごとにおすすめカードを簡単に変更することができます。
これにより、各カテゴリーに合わせた内容を提示し、訪問者の興味を引くことができるでしょう。

タイトルとURLをコピーしました