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

アイキャッチ/新着記事カスタマイズ
この記事はWordPressのテーマCocoon(コクーン)を対象としたカスタマイズになります。

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

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

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

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

すべての記事一覧の記事タイトル前に新着「NEW!」を表示させます。

  1. トップページ
  2. アーカイブページ
  3. 記事本文ページ

カスタマイズの手順

  • STEP1
    PHPコードの編集

    ここで新着表示の設定をする(投稿日取得、表示する日数)

  • STEP2
    CSSの編集

    NEW!のデザインを整える

  • STEP3
    完成

    プレビューで動作確認

カスタマイズ前にはPHP、CSSファイルのバックアップをとりましょう

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

新着記事の判別の仕方

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

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

時間で判別する

このうち今回は

  1. 時間で判別 する方法

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

投稿してから3日以内の記事にNEW!をつけるためには?

コードを記述する場所

張り付ける場所は「外観」→「テーマファイルエディター」→「テーマのための関数(functions.php)」

子テーマ(Cocoon child)が選択されていることを確認します

PHPコードはこちらです

//新着記事にNEW
 add_filter('the_title', function($title, $id) {
  // 表示期間3日
  $days = 3;

  if (get_post_type($id) == 'post') {
    // 現在の時刻取得
    $now = date_i18n('U');

    // 投稿ページの投稿日時取得
    $post_time = get_the_time('U',$id);

    // NEW表示期間
    $last = $now - ($days * 24 * 60 * 60);
    if ($post_time > $last) {
      $title = '<span class="new-txt">NEW!</span>' . $title;
    }
  }
  return $title;
}, 20, 2);

PHPのポイント

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

上の例では、3日間「New!」を表示させる形ですが、$days = 3; の数字を変えれば、日数を変えることができます。


NEW!のデザインを整える

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

このCSSではNEW!(文字色:赤、背景色:なし)になります。

/* 新着記事のNEW!---------------------------------------------- */
.new-txt{
color: #ff0000;/*文字色*/
margin-right:5px;/*NEW!右側の余白*/
}

点滅させるには

こちらのCSSを追加すると点滅してより目立たせることができます。

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

カスタマイズ後

はい、完成です。

投稿してから3日以内の記事タイトル前にNEW!がつくようになりました~!\(^-^)/

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

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

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

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

  • コードは半角英数字になっているか(全角は使えません)
  • 前後や余白に余計な全角スペース、文字等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSコードは{ }、メモ書きはきちんと/**/で囲んでいるか
  • 他に重複しているコードはないか(下に書いたコードが優先されます)


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

ブログがもっと楽しくなる

基礎、応用編と分かれていて分かりやすい内容。CSSの理解を深めたい人へオススメです!!

カスタマイズ
\Follow/
Turicco

Comment

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