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

記事タイトルにの横に、一目で新着記事と分かるようなNEW!をつけたいな。
と思ったけど、ワープレスの設定画面ではつけることができないので自分でカスタマイズしたいと思います。
新着表示NEW!をつけたい場所
こちらの2ヶ所に新着表示「NEW!」を表示させたいと思います。
記事一覧ページ
1つ目は全記事一覧ページの記事タイトル後ろ。

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

カスタマイズの手順
- STEP1PHPの編集
ここで新着表示の設定をする(日数)
- STEP2PHPコードを貼り付ける
NEW!を表示させたい場所にコードをコピペする
- STEP3CSSの編集
デザインを整える

特にPHPファイルは余計なスペースが一文字入るだけでサイトが真っ白になることがあるので、慎重に行いましょう。
新着記事の判別の仕方
一言に新着記事といっても投稿をしてからいつまでの記事にNEWをつけたいのか?などを判別するためにいくつかの方法があります。
- 時間で判別(投稿してから何日か)
- 件数で判別(投稿記事の数)
- 時間+件数(上記の組み合わせ)
時間で判別する
このうち今回は
- 時間で判別 する方法
でカスタマイズしてみることにします。

投稿してから一週間以内の記事に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”)
上の例では、7日間「New!」を表示させる形ですが、$days = 7; の数字を変えれば、日数を変えることができます。
表示したい場所にコードをコピペする
テーマ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;}
}
カスタマイズ後
はい、完成です。投稿してから7日以内の記事タイトルにNEW!がつくようになりました~!\(^-^)/

アップデートで上書きされます
ちなみにこのカスタマイズの性質上、親テーマのPHPを直接編集しているので、テーマのアップデートの際には(編集した部分が)すべて上書きされて消えてしまいますのでご注意ください。
参考にさせていただいたサイト
ありがとうございます^^
Comment