ゆるい海釣りの記録と、ブログのカスタマイズを綴る趣味ブログです。新着記事はこちら >>

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

アイキャッチカスタマイズ

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

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

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

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

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

記事一覧ページ

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

新着表示

記事本文ページ

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

新着表示

カスタマイズの手順

  • STEP1
    PHPの編集

    ここで新着表示の設定(日数)

  • STEP2
    PHPコードを貼り付ける

    NEW!を表示させたい場所にコードをコピペする

  • STEP3
    CSSの編集

    デザインを整える

このカスタマイズはコピペで簡単に行うことができますが、親テーマのPHPを編集するのでカスタマイズ前にバックアップをとることを強くオススメします。

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

新着記事の判別の仕方

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

  1. 時間で判別(投稿してから何日か)
  2. 件数で判別(投稿記事の数)
  3. 時間+件数(上記の組み合わせ)

時間で判別する

このうち今回は

  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”)

上の例では、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を追加すると点滅します。

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

カスタマイズ後

はい、完成です。投稿してから7日以内の記事タイトルにNEW!がつくようになりました~!\(^-^)/

新着表示

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

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

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

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


カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、まずは下記の点を確認してみてください。

  • コードは半角英数字になっているか
  • 余計なスペース等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSのメモ書きはきちんと/* */で囲んでいるか

事前にバックアップをとり、カスタマイズは慎重に行いましょう。

カスタマイズは自己責任となります。レイアウトが崩れた場合の調整や復旧など、 HTMLやCSSの知識が多少あった方がより楽しいカスタマイズライフになるかと思います。

コードの変更はサポート対象外となりますので、テーマ作成者への問い合わせなどはやめましょう。

ブログ関連カスタマイズ
\この記事をシェアする/
\はっちゃんをフォローする/
のんびり釣りっこ

タイトルとURLをコピーしました