投稿一覧に一定期間のみ「NEW」アイコンをつける
2022.03.17WordPressで記事一覧を表示する際に最新の記事のみ「NEW」アイコンを付けたいといった要望がたまにありますので今回は投稿一覧に一定期間アイコンを表示する方法を解説します。
- この記事を書いた人
-
メッツ（Webデザイナー/ディレクター）
2009年～大手旅行代理店の系列会社でECサイトの管理運用
2012年～Web制作会社に転職し制作現場へ。現在は制作チーフとしてディレクションなども担当。 顧客の問題や要望を適切なサイト設計を通して解決。WordPressのテーマ開発が得意
その他Webコンサルやアクセス解析/サイト改善の提案を行う
例えば、記事を投稿してから30日経過したらにアイコンを消したいといった場合、投稿された日と現在の日を比べて何日経過したかを算出し、経過日数が30日以内ならアイコンを表示、30日を超えているならアイコンを表示しないといった処理をを行います。
全体のコード
日数を比較して規定した日数を超えていなければ<li>に「newPost」のクラスが追加され、追加された記事に「NEW」のアイコンが表示されます。
日数を算出して新しい記事にクラスを追加
//「NEW」クラスのセット
$new_class = '';
//アイコンを消す日数
$days = 30;
//現在の時刻
$today = date_i18n('U');
//投稿時刻
$entry_day = get_the_time('U');
//投稿時刻から何日経過したか
$keika = date('U',($today - $entry_day)) / 86400;
if ( $days > $keika ) {
$new_class = ' class="newPost"';
}
?>
<li<?php echo $new_class; ?>><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></li>
追加したクラスに「NEW」アイコンが表示されるようCSSでスタイルをあてる
li.newPost a::before {
content: "NEW";
background-color: #bf0000;
color: #FFF;
display: inline-block;
line-height: 1em;
padding: 4px 7px;
font-size: 1.4rem;
margin-right: 10px;
}
<li>タグにnewPointのクラスが追加された中のaタグに疑似要素（before）でNEWのアイコンが当たるようにスタイルをあててます。
※スタイルはサンプルですので独自にあてていただいて構いません。
記事一覧をループ表示する方法は省いてますが、WP_Queryで記事を表示する方法など下記の記事で説明してますので参考にしていただければと思います。
コード解説
//「NEW」クラスのセット
$new_class = '';
まずはクラス（class）セット用に$new_classで変数の初期化を行います。
記事の日数が規定日数以下であればこの変数にアイコン用のクラスを入れて<li>にクラスをセットします。規定に数を超えている場合は空になりますのでクラスはセットされません。
//アイコンを消す日数
$days = 30;
アイコンを消す日数をセットします。今回は30日ですので$daysに30をセット
//現在の時刻
$today = date_i18n('U');
//投稿時刻
$entry_day = get_the_time('U');
比較用に現在の時刻（秒数）と投稿された時刻（秒数）を取得して変数にセットします。
今回は比較する為にUNIX時間を使って比較します。UNIX時間は1970年１月１日から経過している秒数を取得できますので経過日数を比較するのに適しています。
//投稿時刻から何日経過したか
$keika = date('U',($today - $entry_day)) / 86400;
現在のUNIX時間から投稿されたUNIX時間を引いて86400で割って日数を算出します。
※86400は一日の秒数です。
if ( $days > $keika ) {
$new_class = ' class="newPost"';
}
規定の日数と実際に経過した日数を比較し、規定日数以下であれば$new_classにクラスがセットされます。
最後に
投稿された時間と現在の時間の比較の方法が分かれば上記で説明したコードを応用して様々なやり方に応用できるかと思います。
UNIX時間の概念も慣れればいろんなことで使えるかと思いますので是非活用していただければと思います。
