WordPressの投稿記事にNEWマークをつける方法を解説

WordPressの投稿記事で新しい記事に「NEW!」というような、新しい記事であることを示すマークが欲しいという場面があります。

そこで今回は「一週間以内の記事にNEW！をつける方法」と「最新の〇〇件までは、NEW！をつける方法」の2つと、この2つを組み合わせた方法を解説します。

その➀：一週間以内の記事にNEW!をつける方法を解説

現在から遡って一週間以内に「NEW！」をつけたい場合は以下のようなコードをループ内に配置してみてください。

<?php
   $post_time = get_the_time('U'); //投稿時刻までの経過秒数
   $days = 7; //一週間の日数
   $last = time() - ($days * 24 * 60 * 60);//「time()」は現在の時刻までの経過秒数を取得。($days * 24 * 60 * 60)は一週間分の秒数。
      if ($post_time > $last) {
          echo '<span class="new_text">NEW!</span>';
          }
          ?>

「get_the_time(‘U’);」と「time()」は、UNIXタイムスタンプを使った経過秒数を取得できる記述です。

UNIXタイムスタンプとは「1970年1月1日00時00分00秒」から現在までの経過秒数を表すものです。「get_the_time(‘U’);」ならば、記事の投稿時刻までの経過秒数、「time()」ならば、現在の時刻までの経過秒数を取得できます。

「$last = time() – ($days * 24 * 60 * 60);」では、現在の時刻までの経過秒数から、一週間分の秒数を引いた値を変数「$last」に格納しています。

そしてifの条件分岐では記事投稿時刻までの経過秒数の値である「$post_time」が、現在の時刻までの経過秒数から一週間分の秒数を引いた値である「$last」よりも大きいかどうかを判定しています。

このようにして、「一週間以内かどうか？」の条件分岐で「NEW」をつけるか、つけないかの処理が実行できます。

というように上記のコードを配置すると、以下のように一週間以内の記事に「NEW！」を表示できました（下記の画像は2022年の7月26日に検証しました）。

CSSはお好みで調整してみてください。上記のCSSは「absolute」を使って表示させています。

▼CSSコード

.new_text {
                position: absolute;
                background-color: #FFFF66;
                padding: 5px;
               }

今回はテキストで入れ込みましたが、画像でNEW!マークを作って入れ込むのもいいですね。

その➁：最新の〇〇件まではNEWをつける方法

次は最新の〇〇件までは「NEW」をつけるという方法を解説します。こちらは以下のコードで簡単に実装できます。

<?php
   while ($the_query->have_posts()) : $the_query->the_post();
   if ($the_query->current_post < 3) {
   echo '<span class="new_text">NEW!</span>';
  }
 ?>

今回は3つまでNEWをつけたかったので、「current_post < 3)」としました。「current_post」はループのカウントをしてくれる記述です。

上記のコードを記述すると以下のように表示できます。

その➂：時間と件数を組み合わせた方法

これまで1週間まで、3件までに「NEW!」をつける方法を解説しました。ここからはこの2つを組み合わせた方法を解説します。

組み合わせることで、「3日以内、かつ3件以内の記事に「NEW！」」をつけるといったような設定ができます。

投稿するペースが早いブログなどの場合は、3日以内でも「NEW！」がたくさんついてしまうことがあります。そこで時間の設定をしつつ件数を絞ることで、「NEW！」がつく数を制限できますね。

以下は「3日以内、かつ3件以内の記事に「NEW！」をつける」ことを実装した記述です。

   <?php
       $days = 3;
       $post_time = get_the_time('U');
       $last = time() - ($post_time / 24 * 60 * 60);
       if ( $days > $last ):
       $limit = 3;
       $num = $wp_query->current_post;
          if ( $limit > $num ):
            echo '<span class="new_text">NEW!</span>';
            endif;  
            endif;
   ?>

上記のコードを記述すると以下のように3つの記事に「NEW！」をつけられました。4つ目の記事は3日以内の記事ですが、「NEW！」はついていない状態になっているので、意図した通りに実装できました。