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を追加すると点滅します。

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

CSSでテキストをなめらかに点滅させる方法（コピペＯＫ）

今回やりたいことトップぺージの最初に表示させている新着記事に、新着記事と分かるように＼New／の見出しを表示さらに点滅させたいと思いカスタマイズを行いました。HTMLの<blink>タグは廃...

turicco.com

2021年01月25日

カスタマイズ後

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

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

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

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

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

WordPressで投稿記事を並べるときに、最新の記事数件に【NEW!】といったマークなりテキストを付けたいときがあります。

since-inc.jp

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