【WordPress】投稿記事にNEWマークを付ける方法

RELEASE / 2022.7.16 UPDATE / 2023.11.17

NEWマーク

PHP

WordPress

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

WordPressの投稿記事でユーザーに「これは新しい記事だ」と認識してもらうためNEWマークを付けているサイトをよく見かけます。

今回の記事では投稿したばかりの記事にNEWマークを付ける方法を解説します。

この記事の目次を表示

1 投稿したばかりの記事にNEWマークを付けるサンプルソース
2 サンプルソースの解説
- 2.1 functions.phpの解説
- 2.2 テンプレートファイルの解説
3 日付を引数に設定する方法

投稿したばかりの記事にNEWマークを付けるサンプルソース

// functions.php
function function_new_icon(){
  $days = 7;
  $now = date_i18n('U');
  $entry = get_the_time('U');
  $term = date('U',($now - $entry)) / 86400;
  if( $days > $term ){
    $data = ' new';
    return $data;
  }
}

// テンプレートファイル
<?php
  if( have_posts() ):
    while( have_posts() ):
      the_post();
?>
<div class="title <?php echo function_new_icon(); ?>"><?php the_title(); ?></div>
<?php
    endwhile;
  endif;
  wp_reset_postdata();
?>

// style.css
.title.new::before{
  content: "NEW";
}

サンプルソースの解説

functions.phpの解説

投稿したばかりの記事にNEWマークを付ける方法はいくつかありますが今回はfunctions.phpに関数を記述してテンプレートファイルで呼び出し使用する方法を解説したいと思います。

function function_new_icon(){

}

functions.phpにユーザー定義関数function_new_iconを作成します。この{}の中に今回実装する処理を記述していきます。

まずはじめに投稿日からある一定の期間、NEWマークを表示するためには以下の値が必要になります。

NEWマークを表示する日数
現在日時
記事の投稿日時

上記の値が必要になってきます。まずはそれぞれの値を取得していきます。


// NEWマークを表示する日数
$days = 7;

NEWマークを表示する日数は取得するというよりも設定する値です。そのため変数$dayに数字を格納します。この数字がNEWマークが出る期間です。7とした場合、投稿日時から7日間の間、NEWマークが表示されることになります。

// 現在日時
$now = date_i18n('U');

関数date_i18nはWordPressで現在日時を取得するための関数です。現在日時を取得して変数$nowに格納しています。

// 記事の投稿日時
$entry = get_the_time('U');

関数get_the_timeもWordPressの関数です。こちらが投稿記事の投稿日時を取得することが出来ます。

これでNEWマークを表示するかどうか判断するために必要な「何日間表示するか」「現在日時」「投稿日時」が取得できました。

$term = date('U',($now - $entry)) / 86400;

関数date('U')はエポック秒という「1970年1月1日0時0分0秒からの秒数」を取得することが出来ます。そして86400とは86400秒のことです。86400秒とは1日の秒数になります。

上記のような計算式で投稿記事が現在から何日前なのかを計算することが出来ます。

if( $days > $term ){
  $data = ' new';
  return $data;
}

functions.phpの最後の記述で先ほど計算した投稿日から何日経過したかを格納した$termとNEWマークを表示する日数を格納した$daysを比較し$daysの方が大きい場合は文字列newを格納した変数$dataをreturnします。これにより指定した日数が経過していない記事の時は変数が返り値として戻ってきます。

テンプレートファイルの解説

<?php
  if( have_posts() ):
    while( have_posts() ):
      the_post();
?>
<?php
    endwhile;
  endif;
  wp_reset_postdata();
?>

まずは通常どおりメインクエリの記述をします。

<div class="title <?php echo function_new_icon(); ?>">

そのメインクエリの中でfunctions.phpに記述したユーザー定義関数のfunction_new_iconを使用します。この時$daysで指定した日数経過していない記事にはnewというclassが設定されるようになります。

あとはclass=”new”に対してNEWマークが表示されるように以下のようにCSSを設定してあげれば新しい記事の時、NEWマークを表示してあげることが出来ます。

.title.new::before{
  content: "NEW";
}

日付を引数に設定する方法

上のサンプルソースでは$days=7と固定されてします。もしかしたらトップページは7日間、一覧ページは3日間のように、ページごとにNEWマークを出す期間が異なることがあるかもしれません。そんな時$days=7と固定してしまっているとこのようにページごとに切り分けることが出来ません。

そこで関数に引数を設定して何日NEWマークを表示するか指定するサンプルソースを作ってみました。

// functions.php
function function_new_icon($day){
  $days = $day;
  $now = date_i18n('U');
  $entry = get_the_time('U');
  $term = date('U',($now - $entry)) / 86400;
  if( $days > $term ){
    $data = ' new';
    return $data;
  }

// テンプレートファイル
<?php
  if( have_posts() ):
    while( have_posts() ):
      the_post();
?>
<div class="title <?php echo function_new_icon(5); ?>"><?php the_title(); ?></div>
<?php
    endwhile;
  endif;
  wp_reset_postdata();
?>

この場合、テンプレートファイルで関数を使うたびに何日間表示するか指定する必要が出てきます。その代わり、使う場所ごとに日数を設定できるようになります。どちらがいいか構築しているサイトの仕様によって異なりますね。