WordPress（ワードプレス）／新着記事に一定期間だけ「NEW!」を表示するカスタマイズ

ブログに来てもらったときにまず見てもらいたいのが新着記事ですね。

記事タイトルにの横に、一目で新着記事と分かるようなNEW!をつけたいな。

と思ったけど、ワープレスの設定画面ではつけることができないので自分でカスタマイズしたいと思います。

新着表示NEW!をつけたい場所

こちらの２ヶ所に新着表示「NEW!」を表示させたいと思います。

記事一覧ページ

１つ目は全記事一覧ページの記事タイトル後ろ。

記事本文ページ

２つめは記事本文ページの記事タイトル後ろ。

カスタマイズの手順

特にPHPファイルは余計なスペースが一文字入るだけでサイトが真っ白になることがあるので、慎重に行いましょう。

新着記事の判別の仕方

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

時間で判別する

このうち今回は

1. 時間で判別 する方法

でカスタマイズしてみることにします。

投稿してから一週間以内の記事にNEW！をつけたいな。

PHPはこちら

<?php
$post_time = get_the_time('U');
$days = 7; //New!を表示させる日数
$last = time() - ($days * 24 * 60 * 60);
if ($post_time > $last) {
echo '<span class="new-txt">NEW!</span>';
}
?>

PHPのポイント

• 2行目　「get_the_time(‘U’);」はその記事の投稿日時を取得する関数です。
• 3行目　「$days = 7」で「New」をつける期間を7日以内にします。
• CSSでデザインを編集するため、NEW!にクラス名をつけています（class=”new-txt”）

表示したい場所にコードをコピペする

テーマCocoonの場合PHPファイルのだいたいこのあたりにコードを入れましたが、行数などはアップデートで変わっているかもしれませんので参考程度にしてください。

記事一覧ページ

entry-card-php

40行目あたり、記事タイトル</h2>の前。

記事本文ページ

content-php

45行目あたり、記事タイトル</h1>の前。

NEW!のデザインを整える

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

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

/* 新着記事のNEW!---------------------------------------------- */
.new-txt{
color: #ff0000;/*文字色*/
display: inline-block;
font-size: .9em;
margin-bottom: 5px;
padding: 1px 5px;
text-align: center;
}

こちらのCSSを追加すると点滅します。

/*点滅*/
-webkit-animation: blink 1s ease-in-out infinite alternate;
	animation: blink 1s ease-in-out infinite alternate;

CSSでテキストを滑らかに点滅させるカスタマイズ（コピペＯＫ）

トップぺージの一番上に表示させている記事（新着記事）に新着記事と分かるように＼New Articles／の見出しを表示さらに点滅させたいと思いカスタマイズを行いました。CSSだけで点滅させてみる...

turicco.com

2021.01.25

カスタマイズ後

はい、完成です。投稿してから７日以内の記事タイトルにNEW！がつくようになりました～！＼(^-^)／

アップデートで上書きされます

ちなみにこのカスタマイズの性質上、親テーマのPHPを直接編集しているので、テーマのアップデートの際には（編集した部分が）すべて上書きされて消えてしまいますのでご注意ください。

参考にさせていただいたサイト

WordPressの新着記事にNEWマークを表示したいときの方法 | 福岡のホームページ制作会社　シンス株式会社

WordPressで投稿記事を並べるときに、最新の記事数件に【NEW!】といったマークなりテキストを付けたいときがあります。 こうして目立つようにしておくと、新着記事に注目が集まって便利ですよね。 今回はそんなときに役立つコードをご紹介します。

since-inc.jp

ありがとうございます^^