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

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

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

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

Contents

新着表示NEW!を表示する条件
1. 新着表示NEW!を表示する場所
2. 新着記事の判別方法
新着記事に一定期間だけ「NEW!」を表示するカスタマイズの手順
新着記事に表示するNEW!のデザインを整える
1. 点滅させるには
完成／新着記事に一定期間だけ「NEW!」が表示されます

コードの意味

フィルターの登録
```
add_filter('the_title', function($title, $id) {
```
add_filter 関数を使って、the_title フィルターに新しいフィルター関数を登録しています。これにより、記事のタイトルが表示される前に特定の処理をおこなうことができます。

具体的には、投稿タイトルに「NEW!」を追加する処理です。
表示期間の設定
```
// 表示期間3日
$days = 3;
```
表示期間を3日に設定します。この期間内に投稿された記事に「NEW!」ラベルを付けます。
記事のタイプの確認
```
if (get_post_type($id) == 'post') {
```
get_post_type($id) は、指定された投稿IDの投稿タイプを取得します。この条件文は、投稿の種類が「post」（通常の投稿）であるかを確認しています。これにより、他のカスタム投稿タイプ（例えばページや商品など）には「NEW!」が表示されません。
現在の時刻と投稿時刻を取得
```
// 現在の時刻取得
$now = date_i18n('U');
// 投稿ページの投稿日時取得
$post_time = get_the_time('U',$id);
```
- $now で現在の時刻をタイムスタンプ形式で取得します。タイムスタンプは1970年1月1日からの経過秒数で表されます。
- $post_time では、その投稿が公開された時刻をタイムスタンプ形式で取得します。これにより、現在時刻と投稿された時刻を直接比較することができます。
新着記事の条件判定（表示期間内であるかどうか）
```
// NEW表示期間
$last = $now - ($days * 24 * 60 * 60);
if ($post_time > $last) {
  $title = '<span class="new-txt">NEW!</span>' . $title;
}
```
$last は3日前の時刻を計算しています。3日 × 24時間 × 60分 × 60秒 で3日前の秒数を求めています。この計算結果を使って投稿が3日以内かどうかを判断します。

もし条件が満たされれば、記事のタイトルに”<span class=”new-txt”>NEW!</span>”を追加します。
ラベル
変更されたタイトルの返却

変更されたタイトル（またはそのままのタイトル）を返します。これが実際に画面に表示されます。