Top

WordPressの最新個別記事にNEWマークを付ける方法

記事一覧の最新記事に「NEW!」を付けて新しい記事であることをアピールしたりすることがありますが、今回は個別記事それぞれに「NEW!」マークを付けてみます。

記事を投稿した時刻と現在時刻を比較して「NEW!」マークを付けるかどうか判定する仕組みを取っています。例えば、「1週間以内に投稿された記事を全て最新記事と判定して NEW! マークを付ける」といった判定です。アメブロとかでは標準装備の機能ですが、 WordPress でも「NEW!」マークを付けてみようというお話です。

NEW!

NEW! マークを付けてみる

下の画像のように「NEW!」マークを付けてみます。

new-mark

個別記事を直接変更する形をとります。テーマによりますが single.php などに以下のコードを追加します。

single.php

<!-- 記事ループ内に -->
<?php 
if (have_posts()) :
while (have_posts()) : the_post();
?>

・・・

<!-- 以下のコードを記述 -->

<?php if( time() - get_the_time('G') < 604800 ): ?>
    <div class="new-entry">NEW!</div>
<?php endif; ?>

<!-- 記述ここまで -->

・・・

<?php endwhile;?>
<?php endif; ?>

記述する場所はタイトルの下でも、カテゴリーなどを出している場所の中でも構いません。表示したい箇所に上の3行を追加してください。ただしエントリーループ内で記述する必要があります。一週間以内に投稿された記事を「NEW!」マークを付ける記事と判定しています。

コード内の NEW! の部分は変更可能で「最新記事」でも「新しい記事!」でも大丈夫です。コード内では div 要素にしていますが、span 要素にしてもかまいません。NEW! の部分を img タグにすれば画像で表示することも出来ます。

CSS については何でも構いません。class 名を「new-entry」にしてますので、セレクタを「.new-entry」にすればデザインの変更が可能です。

CSS 設定例

.new-entry {
    color: red;
    font-size: 17px;
    text-align: center;
}

以下に PHP コードの詳細。

スポンサーリンク

time() 関数

エポック(標準時 1970年 1月 1日 午前0時)からの経過秒数、つまり現在時刻を秒で取得しています。こちらは PHP 標準の関数です。

get_the_time() 関数

こちらは WordPress 製の関数で、記事を投稿した時刻を取得します。引数を「G」とすることで上記の time() 関数で取得した時刻と形式をそろえます。UNIX タイムスタンプ形式にしています。

現在時刻である time() 関数も、投稿時刻である get_the_time() 関数も秒での取得ですので、その差が1週間以内の秒数であるとき「NEW!」マークを付ける仕組みです。1週間なので 60秒 × 60分 × 24時間 × 7日間 = 604800秒 です。もし、「1日以内」や「1か月以内」にしたい場合は各々変更してください。

秒数例

時間差
1時間3600
1日間86400
3日間259200
1週間604800
1か月間(31日間)2678400

まとめ

頻繁に更新するブログやニュース系の記事のブログには、あっても良いかもぐらいのワンポイントです。うちみたいな何時みても変わらない記事のブログでは正直あまり意味がないです。

時刻関係の関数をいじりたいな、って思った結果こんな事しか思いつきませんでした。何かの参考になればうれしいです。