はじめに
Cocoonには、投稿日から一定期間「NEW」を表示する機能が備わっていません。
そこで、投稿日から一定期間、タイトルの前に「NEW」を自動表示させるようにします。
この記事では、この方法について説明します。
完成イメージ

実装手順
以下の手順で実装します。
- ラベルPHPを追加
以下のコードをfunctions.phpに追加します。
このコードは投稿後3日間、CSSクラスmy-new-postを追加します。add_filter('post_class', function ($classes, $class, $post_id) { // NEWマークを表示する日数(例: 3日以内) $days = 3; // 現在のタイムスタンプを取得 $now = current_time('U'); // 投稿の作成日時のタイムスタンプを取得 $post_time = get_post_time('U', false, $post_id); // 期限内の投稿に独自のCSSクラスを追加 if (($now - $post_time) < ($days * DAY_IN_SECONDS)) { $classes[] = 'post--new'; } return $classes; }, 10, 3); - ラベルCSSを追加
以下のコードをstyle.cssに追加します。
このコードは一例ですので、好みに応じてデザインを調整してください。.post--new { .card-title, /* エントリーカードのタイトル */ .entry-title { /* 投稿のタイトル */ &::before { background-color: #ff0000; color: #fff; content: 'NEW'; font-size: 8px; font-weight: normal; margin-right: 5px; padding: 0 3px; vertical-align: middle; } } }
さいごに
今回紹介した方法を使えば、Cocoonで投稿日から一定期間、タイトルの前に「NEW」を表示することができます。
これにより、新しい投稿を目立たせることができ、読者にとっても便利な機能となります。


