【WordPress】新着記事に”NEW”マークを表示する方法｜タイムゾーン安全な判定とバッジCSS

2023.11.03

新しく公開した記事に「NEW」マーク（バッジ）を付けると、一覧で新着が一目で分かり、クリックを誘えます。WordPressでは公開日が◯日以内かを判定して表示します。この記事では、タイムゾーンでずれない正しい判定とバッジのCSSまで解説します。

この記事でわかること

  • 公開日が◯日以内かをタイムゾーン安全に判定する
  • NEWバッジのCSSで見た目を整える
  • 表示日数を変数で調整する／更新日を基準にする
スポンサーリンク

テンプレートでNEWマークを表示する

一覧テンプレート（index.php・archive.php・content.php など）のループ内、タイトルの近くに追加します。公開日時と現在時刻を「Unixタイムスタンプ」で比較するのがポイントです。

テンプレート：公開から7日以内ならNEWを表示
<?php
$days = 7; // NEWを表示する日数
if (get_the_time('U') > current_time('timestamp') - $days * DAY_IN_SECONDS) {
  echo '<span class="new-post">NEW</span>';
}
?>

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
strtotime(get_the_date()) は使わない
古い解説によくある if (strtotime(get_the_date()) > strtotime('-7 days')) は不正確です。get_the_date() は「2024年9月28日」のような表示用の文字列を返すため、strtotime() が正しくパースできないことがあり、strtotime('-7 days') もサーバー時刻（多くはUTC）基準でWordPressのタイムゾーン設定とずれます。数値の比較（get_the_time('U') と current_time('timestamp')）を使ってください。

NEWバッジのCSSを追加する

new-post クラスにスタイルを当てて、バッジらしく見せます。子テーマの style.css に追加してください。

style.css：NEWバッジのスタイル
.new-post {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  background-color: #e11d48; /* 目立つ赤系 */
  border-radius: 4px;
  vertical-align: middle;
}

応用：日数の変更・更新日を基準にする

表示する日数は、コードの $days を変えるだけで調整できます（例：$days = 3; で3日以内）。

「公開日」ではなく「更新日」を基準にしたい場合は、get_the_time('U') の代わりに get_the_modified_time('U') を使います。最近更新した記事に「更新」バッジを出す使い方です。公開日・更新日の表示方法そのものは記事の公開日と最終更新日を表示する方法を参照してください。

更新日を基準にする場合
if (get_the_modified_time('U') > current_time('timestamp') - $days * DAY_IN_SECONDS) {
  echo '<span class="new-post">更新</span>';
}
テーマファイルの編集は子テーマで
テンプレートやCSSの編集は、管理画面のテーマファイルエディターではなく子テーマのファイルをローカルで編集して行うのが安全です（親テーマは更新で上書きされます）。新着記事の一覧そのものを作る方法はタブ切り替えでカテゴリ別の新着記事を表示する方法も参考になります。

よくある質問（FAQ）

QNEWの表示日数を変えるには？
Aコードの $days の値を変更します（$days = 3; で3日以内）。管理画面から変えられるようにするには、add_option() / update_option() でオプションに保存し、get_option() で読み込む形にします（プラグイン化すると管理しやすいです）。
Q判定がうまく動かない・ずれる原因は？
Astrtotime(get_the_date()) のような表示用文字列のパースや、サーバー時刻基準の strtotime('-7 days') はタイムゾーンでずれます。get_the_time('U')（記事の公開時刻）と current_time('timestamp')（WPの現在時刻）を数値で比較してください。
Q公開日ではなく更新日でNEWを出したい。
Aget_the_time('U') を get_the_modified_time('U') に置き換えます。最近更新した記事に「更新」バッジを表示できます。古い記事の扱いを自動化したい場合は古い投稿を非公開にする自動処理の実装方法も参考になります。

まとめ

  • 判定：get_the_time('U') > current_time('timestamp') - $days * DAY_IN_SECONDS
  • NG：strtotime(get_the_date()) はタイムゾーンでずれる
  • 見た目：.new-post クラスにCSSでバッジ装飾
  • 応用：$days で日数調整／get_the_modified_time で更新日基準

タイムスタンプで正しく比較し、CSSでバッジを整えれば、どのタイムゾーン設定でも正確なNEWマークが表示できます。