新着記事に一定期間だけ「NEW!」を表示するには／Cocoon

アクセスがあったときにまず見てもらいたいのが新着記事ですね。ワードプレスの設定ではこの機能はついていないので自分でカスタマイズしていきます。

使用するテーマは「Cocoon」です。

新着表示NEW!を表示する条件

新着表示NEW!を表示する場所

すべての記事一覧の記事タイトル前に新着「NEW!」を表示させます。（ショートコードで表示する新着記事にも対応）

1. トップページ
2. アーカイブページ
3. 記事本文ページ

新着記事の判別方法

一言に新着記事といっても、投稿をしてからいつまでの記事にNEWをつけたいのか？などを判別するためにいくつかの方法があります。

このうち今回は

1. 時間で判別 する方法

でおこないます。

新着記事に一定期間だけ「NEW!」を表示するカスタマイズの手順

新着記事に一定期間だけ「NEW!」を表示するPHP

貼り付ける場所は「外観」→「テーマファイルエディター」→「テーマのための関数(functions.php)」

次のコードは、Cocoonで使われる the_title フィルターを利用して新着記事に”NEW!”の表示を追加するものです。

//新着記事に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);

コードの意味

これにより、新着記事が条件を満たす場合には”NEW!”の表示が付加され、訪問者に新着記事であることが分かりやすく示されます。

新着記事に表示するNEW!のデザインを整える

CSSでデザインを整えます。

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

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

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

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

点滅させるには

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

/* 点滅 */
.new-txt {
	animation: blinking 1s ease-in-out infinite alternate;
}
 
@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

完成／新着記事に一定期間だけ「NEW!」が表示されます

はい、完成です。

投稿してから3日以内の記事タイトル前にNEW！がついていますね。