Blogブログ

リッキー | 2022.12.23

コピペでOK！WordPressの新着記事に自動でNEWマークを表示する方法

wordpress

今回は、WordPressの新着記事に自動でアイキャッチ画像の左上に3日間「NEW」マークを表示する方法と投稿数で表示する２つの方法をご紹介していきます。

完成イメージはこちら

さっそく解説していきます！

3日間「NEW」マークを表示する方法

3日間以内に更新された記事に自動で「NEW」マークを表示する方法です。

「NEW」マークを表示させるコードを追加

下記コードをご希望のファイルにコピペしてください。

今回はアーカイブページに表示させたいのでarchive.phpに下記コードを追加していきます。

<ul class="archive">
    <li>
        <a href="<?php the_permalink() ?>"
            <?php
                $days = 7;  // マークを表示する日数
                $now = date_i18n('U');  // 今の時間
                $entry = get_the_time('U');  // 投稿日の時間
                $term = date('U',($now - $entry)) / 86400;
                if( $days > $term ){
                    echo '<span class="new_label">NEW</span>';
                }
            ?>
            <figure>
                <?php if (has_post_thumbnail()) { the_post_thumbnail(); } ?>
            </figure>
            <h1 class="title"><?php the_title(); ?></h1>
        </a>
    </li>
</ul>

表示させる日数を変更したい場合は下記の数値を変更すればOK！

$days = 3;  // マークを表示する日数

style.css に下記コードを追加

ul.archive li {
        position: relative;
}
span.new_label{
    color: #ffffff; // フォント色
    font-size: 12px; // フォントサイズ
    background: #f35b69; // 背景色
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 5px 8px;
    z-index: 1;
}

投稿数で「NEW」マークを表示させる方法

最新記事3件の投稿に自動で「NEW」マークを表示する方法です。

「NEW」マークを表示させるコードを追加

下記コードをご希望のファイルにコピペしてください。

	$the_query = new WP_Query(array(
	  // 何かループに条件をつけたければ書く
	  'cat' => 1,
	  'posts_per_page' => 10
	));
	while($the_query->have_posts()) : $the_query->the_post();
	  if ($the_query->current_post < 4) {
	    echo '<span class="new_label">NEW!</span>';
	  }
	endwhile;
	?>

style.css に下記コードを追加

ul.archive li {
        position: relative;
}
span.new_label{
    color: #ffffff; // フォント色
    font-size: 12px; // フォントサイズ
    background: #f35b69; // 背景色
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 5px 8px;
    z-index: 1;
}