WordPressのカスタマイズ依頼で、「新着記事にNEWマークを表示したい」という要望を時々いただくのですが、それほど難しいカスタマイズでもないので、今回は、予算の限られる中小企業のWEB担当者や、個人事業主様のために、新着記事にNEWマークを付ける簡単な方法を紹介いたします。
NEWマークの効果
記事がどんどんWEB上に蓄積されていくブログ形式のサイトで、ある程度ファンユーザーが育ってくると、検索エンジンから直接個別の記事に訪問される流入だけでなく、TOPページから個別記事へ流れていく動きが増えてきます。
この流れが出てきたときにNEWマークは役立ってきます。週1、月1でサイトに訪れてくれるユーザーは、TOPページからサイトを閲覧していくことも多く、記事一覧上にNEWマークがあると、最新情報を視覚的に理解できるようになるため、彼らも迷うことなく最新記事にたどり着けます(どこまで読んだか忘れてしまっている場合に特に役立つ目印となります)。
また、NEWマークの表示条件にもよりますが、このマークがあることで、視覚的にきちんと更新され続けているサイトだという印象をユーザーに与えることもできます。投稿日の表示もこの役割を担っていますが、他の要素よりも目立つNEWマークは、投稿日の表示以上の効果があるのです。
WordPressでNEWマークを表示する簡単な方法
NEWマークを付けるためのコードは、下記になります。
<?php
$days = 1; // NEWマークを表示する日数
$now = date_i18n('U'); // 今の時間
$entry = get_the_time('U'); // 投稿日の時間
$term = date('U',($now - $entry)) / 86400;
if( $days > $term ){
echo '<span class="newMark">NEW</span>';
}
?>
2行目の「$days」部分の値を、「2」にすれば、2日間NEWマークが表示されるようになりますし、「7」にすれば、1週間 NEWマークが表示されるようになります。
また、あまりないケースではありますが、もしも1日に何十も記事をUPするようなサイトで、かつ、ユーザーも1日に何度も訪れるような場合、数時間だけNEWマークを表示したいということもあります。
その場合のコードは下記になります。
<?php
$time = 5; // NEWマークを表示する時間
$now = date_i18n('U'); // 今の時間
$entry = get_the_time('U'); // 投稿日の時間
$term = date('U',($now - $entry)) / 3600;
if( $time > $term ){
echo '<span class="newMark">NEW</span>';
}
?>
5行目の「$term」の数値が、86400から3600に変更されていることがわかるかと思います。これで、5時間だけNEWマークが表示されるようになります。ちなみにこの数値は、秒数のことで、1日は86400秒で、1時間は3600秒となっています。
これらのコードをお使いのテーマもしくは、子テーマの表示したい箇所に記載することで、NEWマークが表示されるようになります。
LION BLOGの記事一覧にNEWマークを表示する方法
最後にFITが提供するLION BLOGテーマの記事一覧部分にNEWマークを表示するコードを紹介いたします。
<ul class="dateList<?php if($a_lay == 'value2' && !is_sticky()){echo ' dateList-leftImg'; if ( $a_eye == 'value2' ) {echo 'No'; }} ?>">
<li class="dateList__item">
<?php
$days = 1; // NEWマークを表示する期間
$now = date_i18n('U'); // 今の時間
$entry = get_the_time('U'); // 投稿日の時間
$term = date('U',($now - $entry)) / 86400;
if( $days > $term ){
echo '<span class="newMark">NEW</span>';
}
?>
</li>
<li class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></li>
<?php if ( $a_eye == 'value2' || $a_lay == 'value2' && !is_sticky()) : ?>
<li class="dateList__item icon-folder"><?php the_category(' ');?></li>
<?php endif; ?>
<?php if(has_tag()==true) : ?>
<li class="dateList__item icon-tag"><?php the_tags(''); ?></li>
<?php endif; ?>
</ul>
LION BLOGの一覧表示部分を変更するには、loop.phpというテンプレートファイルを編集します。このファイル内の投稿日などを表示する箇所が「<ul class=”dateList」から始まる部分になります。このエリアを、上記のコードに置き換えることで、新着情報を表示することができるようになります。とても簡単にNEWマークが表示できるので、ぜひ試してみてください。
