WordPressの最新個別記事にNEWマークを付ける方法
記事一覧の最新記事に「NEW!」を付けて新しい記事であることをアピールしたりすることがありますが、今回は個別記事それぞれに「NEW!」マークを付けてみます。
記事を投稿した時刻と現在時刻を比較して「NEW!」マークを付けるかどうか判定する仕組みを取っています。アメブロとかでは標準装備の機能ですが、 WordPress でも「NEW!」マークを付けてみようというお話です。
NEW! マークを付けてみる
下の画像のように「NEW!」マークを付けてみます。
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; ?>記述する場所はタイトルの下でも、カテゴリーなどを出している場所の中でも構いません。ただしエントリーループ内で記述する必要があります。一週間以内に投稿された記事を「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 |
まとめ
頻繁に更新するブログやニュース系の記事のブログには、あっても良いかもぐらいのワンポイントです。うちみたいな何時みても変わらない記事のブログでは正直あまり意味がないです。
時刻関係の関数をいじりたいな、って思った結果こんな事しか思いつきませんでした。何かの参考になればうれしいです。
コメントフォーム