ワードプレス Kota Naito / 2017.12.18

WordPressで新着記事にNEWマークをつける簡単な方法

Advertisement

WordPressのカスタマイズ依頼で、「新着記事にNEWマークを表示したい」という要望を時々いただくのですが、それほど難しいカスタマイズでもないので、今回は、予算の限られる中小企業のWEB担当者や、個人事業主様のために、新着記事にNEWマークを付ける簡単な方法を紹介いたします。

NEWマークの効果

記事がどんどんWEB上に蓄積されていくブログ形式のサイトで、ある程度ファンユーザーが育ってくると、検索エンジンから直接個別の記事に訪問される流入だけでなく、TOPページから個別記事へ流れていく動きが増えてきます。
この流れが出てきたときにNEWマークは役立ってきます。週1、月1でサイトに訪れてくれるユーザーは、TOPページからサイトを閲覧していくことも多く、記事一覧上にNEWマークがあると、最新情報を視覚的に理解できるようになるため、彼らも迷うことなく最新記事にたどり着けます(どこまで読んだか忘れてしまっている場合に特に役立つ目印となります)。
また、NEWマークの表示条件にもよりますが、このマークがあることで、視覚的にきちんと更新され続けているサイトだという印象をユーザーに与えることもできます。投稿日の表示もこの役割を担っていますが、他の要素よりも目立つNEWマークは、投稿日の表示以上の効果があるのです。

WordPressでNEWマークを表示する簡単な方法

NEWマークを付けるためのコードは、下記になります。

PHP
<?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
<?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マークを表示するコードを紹介いたします。

loop.php
<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マークが表示できるので、ぜひ試してみてください。

Advertisement

関連するおすすめ記事

kota naito

内藤 康太クリエイティブディレクター / フィット代表

2008年にWEBデザイナーとして独立し、フリーとして活動。その後、WEBディレクターとして一部上場企業とベンチャー企業で経験を積み、2016年から再びフリーのクリエイティブディレクターとして活動。 現在は、関東圏内で企業のWEBコンサルティング、WEB制作、コンテンツマーケティング支援、SEO対策を行っています。

WORKS

PRODUCTION RESULTS

CONTACT

ご相談・お見積り無料

お気軽にお問い合わせください。

消費者が求めているものを理解し、価値あるコンテンツを届けることが、今ホームページには求められています。他社に無い、御社ならではの強みを生かしたWEB戦略を提案いたします。

メールアイコン

個人事業主/中小企業にこそ必要な「選ばれる理由のある」ホームページを提案します。

“We propose a website that will be chosen by consumers for SMEs.”