新着記事に一定期間NEWアイコンを表示する方法[WP小ネタ]

システム開発 / 2014.03.24

新着記事に一定期間NEWアイコンを表示する方法[WP小ネタ]

#WordPress

アーカイブページなどの記事一覧リストで、一定期間だけ新着記事にNEWアイコンをつけたい！というケースは多いのではないでしょうか？
NEWアイコンを付ける方法はJavaScriptやPHPなどいくつかの方法がありますが、PHPを使ってWordPressの記事一覧リストにNEWアイコンを付ける方法をご紹介したいと思います。

WordPressの記事一覧リストでNEWアイコンを付ける場合、以下のコードをアーカイブテンプレートに埋め込むことで一定期間NEWアイコンを表示させることができます。

<?php
$days  = 7 ; // ← NEWを表示させる期間の日数を入力
$today = date_i18n('U');
$entry = get_the_time('U');
$total = date('U',($today - $entry)) / 86400 ;

   if( $days > $total ){
       echo 'NEW';
   }
?>

<?php

$days = 7 ; // ← NEWを表示させる期間の日数を入力

$today = date_i18n('U');

$entry = get_the_time('U');

$total = date('U',($today - $entry)) / 86400 ;

if( $days > $total ){

echo 'NEW';

}

NEWアイコンを表示させておきたい期間は、２行目の数字を変えることで調整ができます。
３と数字を変えれば、記事を投稿した日付から３日間NEWアイコンが表示されることになります。
上のサンプルコードでは、記事を投稿した日付から７日間NEWアイコンが表示されるように設定がされています。

上記コードだけでは、アーカイブテンプレートのどの箇所に埋め込んだらいいかわかりにくいと思いますので、アーカイブテンプレート（ archive.php ）を参考にしながら、コードを埋め込む箇所の確認をしてみたいと思います。

下のコードはWordPress 3.8.1のデフォルトテーマになっているTwentyFourteenで使われているarchive.phpの一部です。

<section id="primary" class="content-area">
　　<div id="content" class="site-content" role="main">

　　～　省略　～

　　<?php
　　// ↓ ループと呼ばれる箇所で、ここで記事を１件ずつ表示する処理を行っています。
　　while ( have_posts() ) : the_post();　

          // ↓　ループ内では、更に別のテンプレートを読み込んで記事の内容を出力しています。
	　　　　get_template_part( 'content', get_post_format() );

　　endwhile;
　　?>

　　</div><!-- #content -->
</section><!-- #primary -->

　　～　省略　～

　　<?php

　　// ↓ ループと呼ばれる箇所で、ここで記事を１件ずつ表示する処理を行っています。

　　while ( have_posts() ) : the_post();　

// ↓　ループ内では、更に別のテンプレートを読み込んで記事の内容を出力しています。

　　　　get_template_part( 'content', get_post_format() );

　　endwhile;

</div>

</section>

NEWアイコンの説明から少し外れますが、
上のコードの８行目から１３行目で行われている処理について少しご説明をしておくと、この箇所はWordPressのループ構文と言われていて投稿した記事を１件ずつ表示させる際によく使われています。

ループ構文の中にある１１行目では、別のテンプレートの読み込みが行われていており、テーマフォルダ内のcontent.phpが記事を形成しているファイルになります。

content.phpが投稿記事の本体となっておりますので、NEWアイコンを表示させるには、このファイルの中に冒頭でご紹介したNEWアイコン表示用のコードを埋め込むことになります。

下のコードは、content.phpにNEWアイコン表示用のコードを追記した例です。
記事のタイトルの前にNEWアイコンを付ける場合は、下のように、タイトルエリアの前にNEWアイコン表示用のコードを挿入します。

<header class="entry-header">

～　省略　～

<?php
// ▼ NEWアイコン表示用のコード ここから
$days  = 7 
$today = date_i18n('U');
$entry = get_the_time('U');
$total = date('U',($today - $entry)) / 86400 ;
　　if( $days > $total ){
　　　　　echo 'New!';
　　}
// ▲ NEWアイコン表示用のコード　ここまで

// ▼ 記事のタイトル
if ( is_single() ) :
　　　the_title( '<h1 class="entry-title">', '</h1>' );
else :
　　　the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' );
endif;
?>

～　省略　～

</header><!-- .entry-header -->