記事公開から指定した期間”New”のテキストを表示する方法【WordPress】

WordPressの投稿一覧を表示するとき、「記事公開から○日間は”New”をつけて欲しい」といった要望をいただくことがあります。

イメージとしては、以下の画像のような感じです。

“New”のタグをつけることで、その記事が新しく投稿されたというのが一目でわかりますね。

そこで今回の記事では、記事公開から指定した期間”New”のテキストを表示する方法を紹介していきます。

【コピペ用】記事公開から指定期間中”New”を表示するコード

以下のコードを、WordPressの記事ループ内に記述してください。

<?php 
$days = 7; // テキストを表示する日数
$published_time = get_post_time();
$today = wp_date('U');
$show_threshold = $today - $days * 86400;

if($published_time > $show_threshold) {
  echo '<span class="new">New</span>';
}
?>

$daysには、表示したい期間の日数を記入してください。

ここではNewというテキストを入れたspanタグを出力していますが、HTMLの中身は自由に変更してください。

次でコードの解説をしていきますので、詳しく知りたい方はぜひ読み進めてください。

【解説】記事公開から指定期間中”New”を表示するコードの解説

ここからは、行ごとにコードの解説をしていきます。

<?php 
$days = 7; // テキストを表示する日数
$published_time = get_post_time();
$today = wp_date('U');
$show_threshold = $today - $days * 86400;

if($published_time > $show_threshold) {
  echo '<span class="new">New</span>';
}
?>

①表示したい日数を指定する

まずは、Newのテキストを表示したい日数を指定します。

$days = 7;

ここでは1週間表示するのを想定して7を指定しましたが、表示したい日数分の数値を入力してください。

②記事投稿の日時をget_post_time()で取得する

記事を投稿した日時を取得するには、get_post_time()関数を使用します。

$published_time = get_post_time();

この関数では、記事投稿日時のUNIXタイムスタンプ（1970年1月1日午前0時0分0秒からの経過秒数）を取得します。

UNIXタイムスタンプについては、以下のサイトで説明されていましたので、そちらをご確認してみてください。

IT用語辞典 e-Words

UNIX時間とは – IT用語辞典 UNIX時間【エポック秒 / POSIX時間】とは、コンピュータにおける日時の表現規則の一つで、主にUNIX系OSで標準的に用いられている形式。時刻を協定世界時(UTC)1970年1月1日…

③現在日時をwp_date()で取得する

続いては、現在日時をwp_date()関数で取得します。

$today = wp_date('U');

第一引数には$formatを渡すことができるのですが、ここではUを渡します。

こうすることで、UNIXタイムスタンプ形式でデータを取得することができます。

④”New”を表示する時間を計算する

①で設定した表示日数$daysと、③で取得した現在日時のデータ$todayを使って、”New”を表示する時間を計算します。

$show_threshold = $today - $days * 86400;

$todayには現在日時のUNIXタイムスタンプ、つまり秒単位のデータが入っていますね。

1日は86400秒なので、$daysと86400を掛けて表示日数を秒単位に変換します。

これらを計算した値を利用して、”New”を表示する / しないのロジックを次で作成していきます。

“New”を表示 / 非表示するif文を組む

投稿日時のUNIX時間（秒数）が、今日の日時 – 表示日数よりも多い場合は”New”を表示、少ない場合は非表示にします。

if($published_time > $show_threshold) {
  echo '<span class="new">New</span>';
}

echoで出力する内容は自由ですので、HTMLはカスタマイズしてください。

以上で解説は終わりです。

【まとめ】記事公開から指定した期間”New”のテキストを表示する方法【WordPress】

記事公開から指定した期間中”New”のテキストを表示する方法を紹介しました。

WordPressで記事一覧を実装する際に使えるテクニックですので、ぜひ参考にしてみてください。