Cocoon｜新着記事に期間限定で「NEW!」を表示する方法

Cocoon

2021年06月17日2025年02月12日

記事内に広告が含まれています

記事タイトルの前にNEW!をつけたいな。

この記事では、Cocoonテーマを使用しているサイトで、新着記事に「NEW!」ラベルを一定期間だけ表示する方法を解説します。PHPコードとCSSを使った手順をに説明しますのでぜひ参考にしてください。

INDEX

新着表示「NEW!」の表示条件
1. 表示場所
2. 表示条件
新着記事に「NEW!」を表示するカスタマイズの手順
まとめ｜Cocoonテーマで新着記事を目立たせるポイント

新着記事に「NEW!」を表示するカスタマイズの手順

カスタマイズ前にはバックアップをとりましょう

PHPコードの編集（functions.php）

まず、以下のPHPコードを WordPressのfunctions.phpファイルに追加します。これにより、投稿が新着（例：3日以内）であれば「NEW!」ラベルをタイトルの前に追加します。

PHPの記述について

管理画面の「外観」から「テーマファイルエディター」
- Cocoon Child: テーマのための関数 (functions.php)をクリックします
元から書いているコード（テーマ用関数）は消さずにPHPを記述します
- //以下に子テーマ用の関数を書く、から下の行に追加しましょう

子テーマ（Cocoon child）が選択されていることを確認します

//新着記事にNEW
add_filter('the_title', function($title, $id) {
	$days = 3;// 表示期間3日

  if (get_post_type($id) == 'post') {
	  $now = date_i18n('U');// 現在の時刻取得
	  $post_time = get_the_time('U',$id);// 投稿ページの投稿日時取得
	  $last = $now - ($days * 24 * 60 * 60);// 表示期間内であるかどうか判定
    if ($post_time > $last) {
      $title = '<span class="new-txt">NEW!</span>' . $title;
    }
  }
  return $title;
}, 20, 2);

コードの概要

$days = 3;
新着と判別する期間を設定（例：3日間）。変更可能。
新着判定
投稿日時が現在時刻から3日以内なら「NEW!」をタイトル前に表示。
投稿タイプの確認
通常の投稿（postタイプ）のみに適用されます。他のカスタム投稿タイプには影響を与えません。

CSSで「NEW!」ラベルのデザインを整える

続いて、表示する「NEW!」ラベルのデザインをCSSでカスタマイズします。

シンプルなデザイン

このCSSではNEW!（文字色：赤、背景色：なし）になります。

/* 新着記事のNEW! */
.new-txt {
    color: #ff0000; /* 文字色：赤 */
    margin-right: 5px; /* 右側の余白 */
}

背景色付きのデザイン

背景色を付ける場合はこちら。NEW!

/* 新着記事のNEW!（背景色付き） */
.new-txt {
    background-color: #ff0000; /* 背景色：赤 */
    color: #fff; /* 文字色：白 */
    font-size: .8em;
    padding: .1em .5em; /* 内側余白 */
    border-radius: 1px; /* 角の丸み */
    margin-right: 5px; /* 右側の余白 */
}

点滅するデザイン

点滅してより目立たせるときは以下のCSSを追加します。NEW!

/* 点滅効果 */
.new-txt {
    animation: blinking 1s ease-in-out infinite alternate;
}

@keyframes blinking {
    0% { opacity: 0; }
    100% { opacity: 1; }
}