【Cocoonカスタマイズ】フロントページと一覧ページでカードタイプを切り替える方法

はじめに
実装手順
応用：画面幅に応じてカードタイプを切り替える方法
- 実装手順
さいごに

はじめに

以下の質問に回答します。

フロントページと記事一覧ページとでカラム数を分けることは可能ですか？

はじめて投稿します。現在、Cocoonを利用してメディアサイトの構築を進めております。ローカル環境で作業している段階のため、共有できるURLがありません。相談内容： PC版において、フロントページの記事一覧を3カラムとして、一覧ペ...

フロントページでは、画面幅に応じてカードタイプを切り替えます。

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

Cocoon設定→インデックス→「カードタイプ」から選択したカードタイプは、フロントページと一覧ページに適用されます。

実装手順

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

ラベル
Cocoon設定

表1に示す項目を設定をします。

Cocoon設定
設定大項目項目設定値
インデックスリスト設定カードタイプエントリーカード（デフォルト）

設定	大項目	項目	設定値
インデックス	リスト設定	カードタイプ	エントリーカード（デフォルト）

ラベル

PHPを追加

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

add_filter('theme_mod_entry_card_type',function ($current_mod ) {
  if (is_front_top_page()) {
    $current_mod ='vertical_card_3';
  }

  return $current_mod ;
});

応用：画面幅に応じてカードタイプを切り替える方法

Cocoon設定→インデックス→「カードタイプ」で「エントリーカード（デフォルト）」以外を選択している場合でも、画面幅が834px以下になると、フロントページのカードタイプを自動的に「エントリーカード（デフォルト）」に切り替えます。

実装手順

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

add_action('wp_enqueue_scripts', function () {
  if (!is_front_top_page()) {
    return;
  }

  // 対象要素を設定
  $elm = '.list';

  // カテゴリーごと（2カラム、3カラム）の場合
  if (
    is_front_page_type_category_2_columns() ||
    is_front_page_type_category_3_columns()
  ) {
    // 対象を新着記事に変更
    $elm = '.list-new-entries .list';
  }

  ob_start();
  ?>
  jQuery(function ($) {
    const $elm = $('<?= $elm; ?>');

    if (!$elm.length) {
      return;
    }

    // カードタイプのCSSクラスを取得
    const elm_class = $elm.attr('class').split(/\s+/).filter(c => c !== 'list');

    // メディアクエリで画面幅を監視
    const mediaQueryList = window.matchMedia('(min-width: 835px)');

    const listener = (event) => {
      // 画面幅に応じてCSSクラスを切り替え
      $elm.toggleClass(elm_class, event.matches);
    };

    // 初期状態を設定
    listener(mediaQueryList);

    // 画面幅の変更を監視
    mediaQueryList.addEventListener('change', listener);
  });
  <?php
  wp_add_inline_script('jquery', ob_get_clean(), 'after');
}, 999);

window.matchMediaを使用して、JavaScriptで画面幅を監視します。
resizeイベントとは異なり、メディアクエリの条件に一致するかどうかが変化したタイミングで処理が実行されます。

さいごに

今回紹介した方法を使えば、フロントページで縦型カードを表示し、記事一覧ページではエントリーカードに切り替えることができます。
カードタイプの切り替えは、フックを使用して数行で実現できます。