記事一覧にNEWマークを表示してみた！

当サイトでは記事一覧に画像と文章をカード型で表示していいます。

 
このようなタイプの記事一覧に「最新記事」を目立たせるため、下記の様な「NEW」の画像を表示させたいと思います。

表示させる画像を用意する

表示させる画像は透過画像で作成します。

 
当サイトでは、目立つように真っ赤な画像（PNG）を作成してみました。
（当例では、NEW画像をテーマのimgフォルダにアップロードして利用します。）

公開して３日間だけ記事一覧にNEWマークを表示

前項で画像が用意できましたので、テーマに表示部分を追加します。

記事一覧に表示部分を追加する。

なるべく簡単なコードで表示させることにしました。

<?php if( time() - get_the_time('U') < 259200 ): ?>   
  <div class="new-mark"></div>   
<?php endif; ?>

 
time()は現在時刻を Unixエポックからの通算秒として返すので、get_the_time(‘U’)もUnixタイムスタンプを取得させています。
 
なお、「259200」は3日間の秒数（60x60x24x3）です。

CSSで表示させる

前述の表示用コードで、「new-mark」というクラスを指定しましたので。このクラスに「NEW画像」を表示させるCSSを追加します。

/* 記事のブロック表示（一部抜粋） */
.post-list article {
  position: relative;
  z-index: 10;
}

/* newマークの表示 */
.new-mark {
  position: absolute;
  left: 0; top: 0;
  width: 50px; height: 50px;
  background: url('img/new.png');
  z-index: 100;
}

 
CSSは自サイト用に書きかえて利用して下さい。

 
下図は当サイトの記事に表示させるようにした例です。