
今回は、WordPressの新着記事に自動でアイキャッチ画像の左上に3日間「NEW」マークを表示する方法と投稿数で表示する2つの方法をご紹介していきます。
完成イメージはこちら

さっそく解説していきます!
3日間「NEW」マークを表示する方法
3日間以内に更新された記事に自動で「NEW」マークを表示する方法です。
「NEW」マークを表示させるコードを追加
下記コードをご希望のファイルにコピペしてください。
今回はアーカイブページに表示させたいのでarchive.phpに下記コードを追加していきます。
<ul class="archive">
<li>
<a href="<?php the_permalink() ?>"
<?php
$days = 7; // マークを表示する日数
$now = date_i18n('U'); // 今の時間
$entry = get_the_time('U'); // 投稿日の時間
$term = date('U',($now - $entry)) / 86400;
if( $days > $term ){
echo '<span class="new_label">NEW</span>';
}
?>
<figure>
<?php if (has_post_thumbnail()) { the_post_thumbnail(); } ?>
</figure>
<h1 class="title"><?php the_title(); ?></h1>
</a>
</li>
</ul>
表示させる日数を変更したい場合は下記の数値を変更すればOK!
$days = 3; // マークを表示する日数
style.css に下記コードを追加
ul.archive li {
position: relative;
}
span.new_label{
color: #ffffff; // フォント色
font-size: 12px; // フォントサイズ
background: #f35b69; // 背景色
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 5px 8px;
z-index: 1;
}
投稿数で「NEW」マークを表示させる方法
最新記事3件の投稿に自動で「NEW」マークを表示する方法です。
「NEW」マークを表示させるコードを追加
下記コードをご希望のファイルにコピペしてください。
$the_query = new WP_Query(array(
// 何かループに条件をつけたければ書く
'cat' => 1,
'posts_per_page' => 10
));
while($the_query->have_posts()) : $the_query->the_post();
if ($the_query->current_post < 4) {
echo '<span class="new_label">NEW!</span>';
}
endwhile;
?>
style.css に下記コードを追加
ul.archive li {
position: relative;
}
span.new_label{
color: #ffffff; // フォント色
font-size: 12px; // フォントサイズ
background: #f35b69; // 背景色
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 5px 8px;
z-index: 1;
}
まとめ
今回は、WordPressの新着記事に自動でアイキャッチ画像の左上に3日間「NEW」マークを表示する方法と投稿数で表示する2つの方法をご紹介していきました!
記事一覧にNEWマークがあるだけで、最新情報を視覚的に理解できるようになるので、ユーザーは迷うことなく最新記事にたどり着くことができます。
また、視覚的に「更新されているサイトだな」という印象をユーザーに与えることもできるので、ユーザービリティの向上に繋がります!
コピペで簡単に実装できるのでぜひ活用してみてください!
以上、「コピペでOK!WordPressの新着記事に自動でNEWマークを表示する方法」でした。
ありがとうございました!