おすすめカードを表示場所ごとに出し分ける方法

はじめに

「おすすめカード」は、Cocoon設定→おすすめカード（コンテンツ上部）とウィジェットの2箇所で利用されます。

しかし、標準仕様では両者に共通のフィルターフックrecommend_cards_navi_list_attsが適用されるため、「コンテンツ上部のみ表示スタイルを変える」といった個別のカスタマイズが困難です。
どちらから呼び出されても渡されるパラメータ$attsが同一で、内部的な条件分岐ができないためです。

そこで、テンプレートの読み込み前後にフックを割り込ませ、一時的なフラグを立てることで表示箇所を特定する手法をとります。
具体的には、コンテンツ上部用のテンプレート処理が始まる直前にグローバル変数でフラグを立て、処理が終わった瞬間にそのフラグを解除することで、特定の箇所だけにカスタマイズを適用させます。

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

完成イメージ

実装手順

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

例えば、コンテンツ上部のおすすめカードをスライド可能にします。

// テンプレート（関連記事カード）の前に変更
add_filter('cocoon_part_before__tmp/recommended-cards', function () {
  $GLOBALS['recommend'] = true;
});


// テンプレート（関連記事カード）の後に変更
add_filter('cocoon_part_after__tmp/recommended-cards', function () {
  $GLOBALS['recommend'] = false;
});


// おすすめカードのクエリを設定
add_filter('recommend_cards_navi_list_atts', function ($atts) {
  if (!is_admin() && !empty($GLOBALS['recommend'])) {
    $atts['horizontal'] = 1;
  }
  return $atts;
});

参考：debug_backtraceで呼び出し元ファイルを特定し処理を分岐する方法

フラグ管理を行わずに、PHPのdebug_backtrace関数を用いて実行履歴（バックトレース）から直接呼び出し元を判定する方法もあります。

フックの前後でフラグを立てるのが難しいケースや、テンプレートを介さない処理であっても、この方法なら関数の呼び出し元を動的に判別できます。
構造上の制約に縛られず、システム全体のどこからでも実行コンテキストを特定できるのが最大のメリットです。

実装手順

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

add_filter('recommend_cards_navi_list_atts', function (array $atts): array {
  if (is_admin()) {
    return $atts;
  }

  // 実行履歴を取得
  $backtrace   = debug_backtrace(DEBUG_BACKTRACE_IGNORE_ARGS);
  $is_from_tmp = false;

  // 履歴の中にコンテンツ上部テンプレートのパスが含まれているか確認
  foreach ($backtrace as $step) {
    if (isset($step['file']) && str_contains($step['file'], 'tmp/recommended-cards')) {
      $is_from_tmp = true;
      break;
    }
  }

  // コンテンツ上部テンプレートからの実行でない場合は処理対象外
  if ($is_from_tmp) {
    $atts['horizontal'] = 1;
  }

  return $atts;
});

参考：「おすすめカード」ウィジェットのスライダー表示について

「おすすめカード」ウィジェットを横並び（スライダー）にする際は、「ナビカード」をご活用ください。
デザインは異なりますが、機能は通常のナビカードと共通です。

さいごに

今回紹介した方法を使えば、これまで一括でしか制御できなかった「おすすめカード」のスタイルを、表示場所に合わせて自由に変更できるようになります。
サイトのデザインに合わせて、特定の場所だけカードのサイズを変えたり、横並びにしたりといった細かな調整が可能になります。