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

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

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,
);
$domestic_post = get_posts($args);
if($domestic_post) : foreach($domestic_post as $post) : setup_postdata( $post ); ?>
<li class="newlist">
<span class="newlist-date"><?php the_time('Y/m/d'); ?></span>
<span 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>'; }
?>
</span>
</li>
<?php endforeach; ?>
<?php else : ?><p>表示する記事がありません。</p>
<?php endif;
wp_reset_postdata(); ?>
</ul>

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

あとがき

記事の更新頻度がそんなに高くないサイトなどでは、「New!」を表示してあげるとわかりやすいですね。

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

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

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。