WordPressで新着記事にNewマークをつける方法!

WordPressで記事一覧を表示した際、新着投稿に「New」マークをつけたい時があると思います。だいたい3日間、5日間、一週間くらいがよくあるパターンかなと思いますので、その設定方法も合わせて、書いてみたいと思います。

スポンサーリンク

Newマークをつける命令

Newマークを付ける命令は、下記になります。

<?php
    $days = 1;  // NEWマークを表示する期間(日もしくは時間)
    $now = date_i18n('U');  // 今の時間
    $entry = get_the_time('U');  // 投稿日の時間
    $term = date('U',($now - $entry)) / 86400;  // 経過日数の判定(時間なら3600)
    if( $days > $term ){
     echo '<span class="newicon">NEW!</span>';
    } ?>

下記で日にちの設定をします。この場合1日です。

$days = 1;  // NEWマークを表示する期間(日もしくは時間)

3日間Newマークを表示したい場合

<?php
    $days = 3;  // NEWマークを表示する期間(日もしくは時間)
    $now = date_i18n('U');  // 今の時間
    $entry = get_the_time('U');  // 投稿日の時間
    $term = date('U',($now - $entry)) / 86400;  // 経過日数の判定(時間なら3600)
    if( $days > $term ){
     echo '<span class="newicon">NEW!</span>';
    } ?>

5日間Newマークを表示したい場合

<?php
    $days = 5;  // NEWマークを表示する期間(日もしくは時間)
    $now = date_i18n('U');  // 今の時間
    $entry = get_the_time('U');  // 投稿日の時間
    $term = date('U',($now - $entry)) / 86400;  // 経過日数の判定(時間なら3600)
    if( $days > $term ){
     echo '<span class="newicon">NEW!</span>';
    } ?>

一週間Newマークを表示したい場合

<?php
    $days = 7;  // NEWマークを表示する期間(日もしくは時間)
    $now = date_i18n('U');  // 今の時間
    $entry = get_the_time('U');  // 投稿日の時間
    $term = date('U',($now - $entry)) / 86400;  // 経過日数の判定(時間なら3600)
    if( $days > $term ){
     echo '<span class="newicon">NEW!</span>';
    } ?>

5時間くらいだけNewマークをつけたい場合

あまりないとは思いますが、ほんのちょっとだけNewマークをつけたい場合の話で、5時間だけの時

<?php
    $days = 5;  // NEWマークを表示する期間(日もしくは時間)
    $now = date_i18n('U');  // 今の時間
    $entry = get_the_time('U');  // 投稿日の時間
    $term = date('U',($now - $entry)) / 3600;  // 経過日数の判定(時間なら3600)
    if( $days > $term ){
     echo '<span class="newicon">NEW!</span>';
    } ?>

この部分を86400→3600にします。

$term = date('U',($now - $entry)) / 3600;  // 経過日数の判定(時間なら3600)

ちなみに86400というのは、秒数のことです。
1時間は3600秒で、1日は86400秒です。

3600秒設定にすれば、下記は1時間単位となります。なので、1なら1時間。5なら5時間です。

$days = 1;  // NEWマークを表示する期間(日もしくは時間)

【STINGER8】にNewマークをつけたい

【STINGER8】の場合、itiran.phpにループがあるので、入れてみます。
29行目あたりに

<?php the_time( 'Y/m/d' ); ?>

がありますので、日付の後ろに入れてみます。
日にちは5日間。

<div class="blog_info">
					<p><i class="fa fa-clock-o"></i>
						<?php the_time( 'Y/m/d' ); ?>
<?php
    $days = 5;  // NEWマークを表示する期間(日もしくは時間)
    $now = date_i18n('U');  // 今の時間
    $entry = get_the_time('U');  // 投稿日の時間
    $term = date('U',($now - $entry)) / 86400;  // 経過日数の判定(時間なら3600)
    if( $days > $term ){
     echo '<span class="newicon">NEW!</span>';
    } ?>
						&nbsp;<span class="pcone">
							<i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ', ' ) ?><br/>
							<?php the_tags( '<i class="fa fa-tags"></i>&nbsp;', ', ' ); ?>
          </span></p>

CSSは、newiconにしています。

<span class="newicon">NEW!</span>

こちらは赤字にしてみます。

.newicon{color:#ff0000;}

これを【STINGER8】のstyle.CSSに入れます。子テーマを設定しているなら、そちらにいれてアップしておきます。

【STINGER8】を確認してみます。下記のように表示されていればOKです。

ちなみにitiran.phpの一番上に「トップやアーカイブ一覧」と書いてあります。

<?php
/**
 * トップやアーカイブ一覧
 */
?>

なので、アーカイブを確認してみますと、こちらにもNewマークがついていると思います。

【OnePress】にNewマークをつけたい

過去の記事で【最新ニュースの修正】をしている記事があります。

WordPressテーマ【OnePress】の使い方!パララックス効果の設定方法やカスタマイズ【最新ニュースの修正】

要領は【STINGER8】と同じです。
上記の記事で日付を入れる仕方を書いていますので、/template-parts/content-list.phpを開いて、

<?php the_time('Y年n月j日'); ?>

の後ろに入れれば同じように行けると思います。

<div class="list-article-content">
<?php the_time('Y年n月j日'); ?>
<?php
    $days = 5;  // NEWマークを表示する期間(日もしくは時間)
    $now = date_i18n('U');  // 今の時間
    $entry = get_the_time('U');  // 投稿日の時間
    $term = date('U',($now - $entry)) / 86400;  // 経過日数の判定(時間なら3600)
    if( $days > $term ){
     echo '<span class="newicon">NEW!</span>';
    } ?>
	<div class="list-article-meta">
			<?php the_category(' / '); ?>
		</div>

サイトを確認してみます。下記のようになっていればOKです。

コメントをどうぞ