WordPressの記事一覧で新着投稿に「New!」を付ける方法

WordPressの記事一覧の中で、新着投稿に対して「New!」という文字を付ける方法を紹介したいと思います。

記事公開からの経過日数や経過時間によって「New!」を出し分けます。また、記事の公開日時ではなく更新日時から判断して出し分ける方法も紹介しています。

WordPressの記事一覧で投稿に「New!」を付ける方法

新着投稿に「New!」を付けるには、記事一覧のループ内に下記のコードを追加してあげます。

日数で指定する場合

経過日数で「New!」を出し分ける場合は、以下のコードを追加します。

<?php
  $days = 7;
  $today = date_i18n('U');
  $entry = get_the_time('U');
  $news = date('U',($today - $entry)) / 86400 ;
  if( $days > $news ){ print '<span class="red">New!</span>'; }
?>

$daysで経過日数を指定します。上記の場合、記事を公開してから7日経過していない記事に「New!」が付きます。

また、「New!」を赤字にしたかったので、redというクラスを追加しています。

時間で指定する場合

経過時間で「New!」を出し分ける場合は、以下のコードを追加します。

<?php
  $hours = 10;
  $today = date_i18n('U');
  $entry = get_the_time('U');
  $news = date('U',($today - $entry)) / 3600 ;
  if( $hours > $news ){ print '<span class="red">New!</span>'; }
?>

上記の場合、10時間経過していない記事に「New!」が付くようになります。

公開日時ではなく更新日時で判断する場合

公開日時ではなく更新日時を基準として、経過日数や経過時間を指定したい場合は、以下のようになります。

<?php
  $days = 7;
  $today = date_i18n('U');
  $entry = get_the_modified_date('U');
  $news = date('U',($today - $entry)) / 86400 ;
  if( $days > $news ){ print '<span class="red">New!</span>'; }
?>

「$entry = get_the_modified_date(‘U’);」のところで、更新日を取得しています。公開日の場合は「$entry = get_the_time(‘U’);」で取得します。

「New!」を出力するコードを追加したループ全体

上述したコードをループに追加すると、以下のような感じになります。ループ内の表示させたい箇所に上述したコードを追加してあげればOKです。

<ul>
<?php
  $args = array(
  'post_type' => 'post',
  'posts_per_page' => 10,
  );
  $new_post = get_posts($args);
  if($new_post) : foreach($new_post as $post) : setup_postdata( $post );
?>
  <li class="newlist">
    <div class="newlist-date"><?php the_time('Y/m/d'); ?></span>
    <div class="newlist-title">
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      <?php
        $days = 7;
        $today = date_i18n('U');
        $entry = get_the_time('U');
        $news = date('U',($today - $entry)) / 86400 ;
        if( $days > $news ){ print '<span class="red">New!</span>'; }
      ?>
    </div>
  </li>
<?php endforeach; ?>
<?php else : ?>
  <p>表示する記事がありません。</p>
<?php endif; wp_reset_postdata(); ?>
</ul>

このように、ループ内の表示させたい箇所に上述したコードを追加してあげればOKです。

functions.phpを使って「New!」を出力させる方法

上述した内容は直接テンプレートファイルに記述する方法ですが、functions.phpにコードを追加するだけで良い方法が株式会社ベクトルさんのブログで紹介されていました。

具体的には、適用しているテーマのfunctions.phpに以下を追加します。

function my_add_new_before_post_title( $title ) {
  // 今日の日付
  $today = date_i18n( 'U' );
  // 投稿の日付
  $entry_date = get_the_time( 'U' );
  // 経過日数
  $past_day = date( 'U', ( $today - $entry_date ) ) / 86400;
  // Newを表示する日数
  $display_day = 7;
  
  if ( $display_day >= $past_day && get_post_type() == 'post' ) {
  // 記事タイトルの前に NEWを追加
  $title = '<span class="icon-new">New!</span>' . $title;
  // 出力側で esc_html( get_the_title() ) などのような書き方をされていると
  // 残念ながらHTMLは使えません。その場合は諦めて直接テンプレートを改変してください。
}
return $title;
}
add_filter( 'the_title', 'my_add_new_before_post_title' );

テンプレートファイルを弄らなくて良いので、こちらの方がスマートかもですね。

あとがき

新着投稿に「New!」を付けるのは、クライアントワークでも実装するケースが結構あります。つい最近も「新着記事が一目瞭然でわかるようにしてほしい」という要望を受けて実装しました。

そんなわけで、意外と使う頻度は高いかもしれないので、覚えておいて損はないかと思います。