WordPressの最新記事に一定期間「NEW」アイコンを表示する方法

MARKLEAPS

2021.09.02

最新記事に一定期間「NEW」アイコンを表示する方法をご紹介します。

サンプルコード

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<dl>
    <dt>
        <a href="<?php the_permalink() ?>"><img src="<?php echo catch_that_image_thumb(); ?>" alt="<?php the_title(); ?>" /></a>
<?php 
$days = 5;
$today = date_i18n('U');
$entry_day = get_the_time('U');
$keika = date('U',($today - $entry_day)) / 86400;
if ( $days > $keika ):
    echo '<span class="bs_new">NEW</span>';
endif;
 ?> 
    </dt>
    <dd>
    </dd>
<dl>
<?php endwhile; else : ?>
<?php endif; ?>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<dl>

<dt>

<a href="<?php the_permalink() ?>"><img src="<?php echo catch_that_image_thumb(); ?>" alt="<?php the_title(); ?>" /></a>

<?php

$days = 5;

$today = date_i18n('U');

$entry_day = get_the_time('U');

$keika = date('U',($today - $entry_day)) / 86400;

if ( $days > $keika ):

echo '<span class="bs_new">NEW</span>';

endif;

?>

</dt>

<dd>

</dd>

<dl>

<?php endwhile; else : ?>

<?php endif; ?>

NEWアイコンを表示させる期間は、6行目の
$days = 5;
の箇所で調整出来ます。
$days = 5;　とした場合、記事の公開日から5日間、NEWアイコンが表示されます。

上記のサンプルコードでは、dtの画像部分にspanで囲んだNEWアイコンが重なるよう、
cssのpositionで配置しています。

WordPress

よく読まれている関連記事

[WordPress] Contact Form 7のフォーム送信履歴を管理画面にデータ保存&CSV保存プラグイン比較

関連最新記事