はじめに
Cocoon設定→インデックス→フロントページタイプ「タブ一覧表示」を設定している際、通常、新着記事が表示されます。
しかし、カテゴリーごとの記事は隠れており、最新記事があるかタブを開くまで分かりません。
以下の記事では、エントリーカードに投稿日から一定期間「NEW」を表示させる方法を紹介しました。
そこで今回はさらに一歩進めて、エントリーカードだけでなく「タブ」自体にも投稿日から一定期間「NEW」を自動表示さます。
この記事では、この方法について説明します。
完成イメージ

実装手順
以下の手順で実装します。
- ラベルPHPを追加
以下のコードをfunctions.phpに追加します。
/** * 最新記事が指定期間内であればNEWバッジを追加 * * @param string $text 元のタブテキスト * @param int|null $cat_id カテゴリーID * @return string NEWバッジが付与されたタブテキスト */ if (!function_exists('append_new_badge_if_needed')): function append_new_badge_if_needed($text, $cat_id = null) { if (!is_front_page_type_tab_index()) { return $text; } // NEWマークを表示する日数(例: 3日以内) $days = 3; $args = [ 'post_type' => 'post', 'posts_per_page' => 1, 'no_found_rows' => true, ]; // カテゴリーIDが指定されている場合は検索条件に追加 if (!empty($cat_id)) { $args['cat'] = (int) $cat_id; } // 条件に一致する最新の投稿を1件取得 $latest_post_query = new WP_Query($args); if ($latest_post_query->have_posts()) { $latest_post_query->the_post(); $now = current_time('U'); $post_time = get_post_time('U', false); // 現在時刻が期限内の場合はNEWバッジを追加 if (($now - $post_time) < ($days * DAY_IN_SECONDS)) { $text .= ' <span class="tab__new-badge">NEW</span>'; } wp_reset_postdata(); } return $text; } endif; // 新着記事タブを変更 add_filter('new_entries_caption', function ($caption) { return append_new_badge_if_needed($caption); }); // カテゴリータブを変更 add_filter('get_category_name_by_id', function ($category_name, $id) { return append_new_badge_if_needed($category_name, $id); }, 10, 2); - ラベルCSSを追加
以下のコードをstyle.cssに追加します。
.tab__new-badge { background-color: #ff0000; color: #fff; content: 'NEW'; font-size: 8px; font-weight: normal; margin-right: 5px; padding: 0 3px; vertical-align: middle; }
さいごに
今回紹介した方法を使えば、トップページのタブを開かなくても新しい記事があるカテゴリーが一目で分かるようになります。
ユーザーが新しいコンテンツを見つけやすくなり、サイト内の回遊率やPV数の向上にも期待できます。

