【Simplicityカスタマイズ】記事一覧の新着記事にNEWをつけてみました

先日、記事一覧の新着記事に「NEW！」という表示があるサイトを見つけました。更新頻度の少ない私の場合はあまり意味のない表示なのですが、勉強のために調べてみました。

対象記事の選び方に対する要望の違い

「NEW！」を付けたいと一口に言っても、どのような記事を選ぶのかという違いによって、コードの書き方も違ってきます。単純に時間軸だけで「NEw！」マークを付けようと考えていた私にとってその指摘は新鮮でした。教えてくれたのは、次の記事記事です。

http://wp3.jp/2011/12/25/wordpress-new/

その「New!」の付け方も、
（１）時間を基準で付けたいのか、
（２）各カテゴリーリストの最新件数で付けたいのか、
（３）サイト全体の最新件数で付けたいのか、
（４）それらを組み合わせたいのか、
など、「New!」を付けたい要望も様々です。

当サイトでのNEW表示方法

プラグインを使うのは簡単で便利なのですが、プラグインの整理についても考えていこうと思っていたところだったので、今回はコードの追加で表示してみることにしました。

まず、いろいろなサイトで得た情報をもとに、次のコードを子テーマのentry-card.phpに追加しました。記事更新の頻度が少ないので、とりあえず１週間分にNEWマークをつけるように設定しました。

$days = 7;
$today = date_i18n('U');
$entry = get_the_time('U');
$news = date('U',($today - $entry)) / 86400 ;
if( $days > $news ){print 'NEW!'; }

このままだと赤い文字で「NEW！」と表示されます。このままでも良かったのですが、今回はさらに工夫してみました。

if( $days > $news ){print 'NEW!'; }

のところを次のように書き換えて、CSSで文字装飾を調整することにしました。

if( $days > $news ){print 'NEW!'; }

ここでのクラス名に合わせてtyle.cssに装飾内容を指定すると「NEW！」の表示の仕方を変更することができます。今回は、次のように指定してみました。なお、ここではクラス名をnewとしていますが、他のクラス名と重複しなければ別の名称でも問題ないはずです。

/*記事一覧の「NEW」装飾*/
.new {
 color:#FFF;
 font-size:12px;
 font-weight:600;
 background-color:#ff0000;
 padding:2px 5px 2px 5px;
 text-decoration:none;
 }

まとめ

なんとか記事一覧にNEWマークを表示することができました。コードも紹介していますが、何か問題があった場合は削除するつもりです。

今後、表示位置の変更も考えてみたいと思っています。また、できれば記事一覧のアイキャッチ画像にNEWリボンをつけてみたいと考えています。難しいかな？

対象記事の選び方に対する要望の違い

新着記事にNEWを付ける方法

当サイトでのNEW表示方法

まとめ