「新着記事」「人気記事」「ナビカード」に現在のカレント表示する方法

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

/**
 * 現在のページURLと指定URLが一致するか判定
 *
 * @param string $url 比較対象のURL
 * @return bool URLが一致する場合はtrue、一致しない場合はfalse
 */
if (!function_exists('is_current_card_url')):
function is_current_card_url($url) {
  // URLを正規化（ホスト名を小文字にし、ページネーションと末尾のスラッシュを除去）
  $normalize_url = function($url) {
    $host = strtolower(wp_parse_url($url, PHP_URL_HOST) ?? '');
    $path = wp_parse_url($url, PHP_URL_PATH) ?? '/';
    $path = preg_replace('#/page/\d+/?$#', '', $path);

    return $host . untrailingslashit($path);
  };

  // 現在のページURLを取得
  $current_url = home_url(add_query_arg(array(), $GLOBALS['wp']->request));

  // 正規化したURLを比較して一致判定
  return $normalize_url($url) === $normalize_url($current_url);
}
endif;


// テンプレート（新着記事カード）のパラメータを変更
add_filter('cocoon_part_args__tmp/widget-entry-card', function($args, $name) {
  if (is_current_card_url($args['url'])) {
    $args['class_text'] = ($args['class_text'] ?? '') . ' current-item';
  }

  return $args;
}, 10, 2);


// テンプレート（人気記事カード）のパラメータを変更
add_filter('cocoon_part_args__tmp/popular-card', function($args) {
  // 人気記事の投稿URLを取得
  $card_url = get_permalink($args['popular_post']->ID);

  if (is_current_card_url($card_url)) {
    $args['swiper_slide'] = ($args['swiper_slide'] ?? '') . ' current-item';
  }

  return $args;
});

以下のコードをstyle.cssに追加します。

.widget-entry-card-link.current-item {
  background-color: #fff8e1;
  pointer-events: none;
}

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

/**
 * 現在のページURLと指定URLが一致するか判定
 *
 * @param string $url 比較対象のURL
 * @return bool URLが一致する場合はtrue、一致しない場合はfalse
 */
if (!function_exists('is_current_card_url')):
function is_current_card_url($url) {
  // URLを正規化（ホスト名を小文字にし、ページネーションと末尾のスラッシュを除去）
  $normalize_url = function($url) {
    $host = strtolower(wp_parse_url($url, PHP_URL_HOST) ?? '');
    $path = wp_parse_url($url, PHP_URL_PATH) ?? '/';
    $path = preg_replace('#/page/\d+/?$#', '', $path);

    return $host . untrailingslashit($path);
  };

  // 現在のページURLを取得
  $current_url = home_url(add_query_arg(array(), $GLOBALS['wp']->request));

  // 正規化したURLを比較して一致判定
  return $normalize_url($url) === $normalize_url($current_url);
}
endif;


// 投稿情報のクラス属性を変更
add_filter('post_class', function($classes, $class, $post_id) {
  $target_classes = [
    'new-entry-card',
    'popular-entry-card',
    'carousel-entry-card',
  ];

  if (array_intersect($target_classes, $class) && is_current_card_url(get_permalink($post_id))) {
    $classes[] = 'current-item';
  }

  return $classes;
}, 10, 3);


// テンプレート（ナビカード）のパラメータを変更
add_filter('cocoon_part_args__tmp/widget-entry-card', function($args, $name) {
  if ($args['prefix'] === WIDGET_NAVI_ENTRY_CARD_PREFIX &&  is_current_card_url($args['url'] ?? '')) {
    $args['div_class'] = rtrim($args['div_class'], '"') . ' current-item"';
  }

  return $args;
}, 10, 2);

以下のコードをstyle.cssに追加します。

.a-wrap:has(.current-item) {
  background-color: #fff8e1;
  pointer-events: none;
}