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

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!をつけたい場所

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

記事一覧ページ

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

新着表示

記事本文ページ

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

新着表示

カスタマイズの手順

  • STEP01
    PHPの編集
    ここに新着表示の設定(日数)
  • STEP02
    PHPコードを貼り付ける
    NEW!を表示させたい場所にコードをコピペする
  • STEP03
    CSSの編集
    デザインを整える

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

特に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のメモ書きはきちんと/* */で囲んでいるか

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

カスタマイズの多くは他のサイトを参考にしながらも、自分で調べて試行錯誤しながら手間隙をかけてコードを書いています。


このデザインにするにはどう書けばよい?CSSが効かなかったり、コードの不備でデザインが崩れてしまったり修復したり、あーでもない、こーでもない!

コピペされた際にはコメント欄に一言(カスタマイズできた、不具合ありなど何でも)、足跡を残していただくと大変励みになります^^

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

コメント

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