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

Warning: Undefined variable $tag in /home/turicco/turicco.com/public_html/wp-content/themes/cocoon-child-master/functions.php on line 111

Warning: Undefined variable $tag in /home/turicco/turicco.com/public_html/wp-content/themes/cocoon-child-master/functions.php on line 111

Warning: Undefined variable $tag in /home/turicco/turicco.com/public_html/wp-content/themes/cocoon-child-master/functions.php on line 111

Warning: Undefined variable $tag in /home/turicco/turicco.com/public_html/wp-content/themes/cocoon-child-master/functions.php on line 88

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

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

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

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

カスタマイズの手順

新着記事の判別の仕方

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

時間で判別する

このうち今回は

1. 時間で判別 する方法

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

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ファイルのだいたいこのあたりにコードを入れましたが、行数などはアップデートで変わっているかもしれませんので参考程度にしてください。

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;

カスタマイズ後

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

アップデートに注意

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

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

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