WordPress：新しく公開した記事に「New!」などの新着アイコンを表示
WordPressで運営しているサイトやブログで新しく公開した記事に、新着であることをお知らせする「New!」などのアイコン表示を、期間を指定して表示させる方法になります。
一度設定してしまえば、記事を新規公開した時に自動的に新着アイコンが表示されるようになり、指定した期間を過ぎると非表示になります。
新着アイコンを表示させる期間は、以下の2通りの方法で指定することができます。
New!の表示させる期間を日数で指定する場合
index.phpやsingle.phpのループ内に直接記述をすることも出来ますが、記述内容がごちゃついてしまうのを防ぐ為に、function.phpにメインの記述を行い、ループ内の表示したい箇所でその記述を呼び出すようにします。
function.php
function my_new_arrival(){
$days = 3; //Newを表示させる日数
$today = date_i18n('U');
$entry = get_the_time('U');
$diff = date('U',($today - $entry))/86400;
if( $days > $diff ){
echo '<span>New!</span>'; //表示させるテキスト
}
}
2行目：$daysの数値を変えることで、表示させる日数を変更出来ます。
New!の表示に画像を使用したい場合は、7行目を以下のように変更します。
例）画像をテーマの中のimagesフォルダに入れた場合
echo '<span><img src="' . get_bloginfo('template_directory') . '/images/画像の名前.png" alt="New" /></span>';
上記ではNew!を<span>タグで括っていますが、用途に合わせてHTMLタグの変更やクラスを追加して使用してください。
ループ内
ループ内で表示したい箇所に以下を追加してください。
<?php my_new_arrival(); ?>
指定した日数の間、HTMLはこのように出力されます。
<span>New!</span>
New!の表示させる期間を時間で指定する場合
New!を表示させる期間を日数指定ではなく、もっと短く時間で指定したい場合は下記をfunction.phpに追加します。
function.php
function my_new_arrival(){
$hours = 12; //Newを表示させる時間
$today = date_i18n('U');
$entry = get_the_time('U');
$diff = date('U',($today - $entry))/3600;
if( $hours > $diff ){
echo '<span>New!</span>'; //表示させるテキスト
}
}
2行目：$hoursの数値を変えることで、表示させる時間を変更出来ます。
ループ内
ループ内で表示したい箇所に以下を追加してください。
<?php my_new_arrival(); ?>
指定した時間の間、HTMLはこのように出力されます。
<span>New!</span>
以上、「WordPress：新しく公開した記事に「New!」などの新着アイコンを表示」でした。