記事内に商品プロモーションを含む場合があります

WordPress

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

2023年5月6日

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

投稿した記事にNEWマークを付けて新着記事がわかりやすいようにしたい...できれば日数とか記事数で指定できて自動でNEWマークが付くようにしたい…

こういった新着記事にNEWマークを付けたい方向けに書いています。

この記事を書いている私は、完全未経験(前職は美容師)からWebデザイナーに転職した僕が実際に現場でよくある要望事例をわかりやすく説明していきます。

ご参考になれば幸いです。

完成イメージ

さっそくですが、完成イメージはこんな感じです。

アイキャッチ画像の左上に「NEW」マークを表示する完成イメージ

今回は、WordPressの新着記事に自動でアイキャッチ画像の左上に「NEW」マークを表示する方法を下記の2パターンご紹介していきます。

・3日間など、日数を指定して表示する方法
・最新3記事など、投稿数を指定して表示する方法

あなたのブログにあった方を選んでいただければと思います。

日数を指定して表示する方法

3日間以内に更新された記事に自動で「NEW」マークを表示する方法をご紹介していきます。

コピペするソースコード

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

<ul class="archive">
    <li>
        <a href="<?php the_permalink() ?>"
            <?php
                $days = 7;  // 「NEW」マークを表示する日数
                $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>
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;
}

表示する日数を変更する場合

上記でご紹介したソースコードでは、3日間「NEW」マークが表示されますが、表示する日数を変更したい場合は下記の数字部分を変更することで日数を調整できます。

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

投稿数を指定して表示する方法

最新記事3件の投稿記事に自動で「NEW」マークを表示する方法をご紹介していきます。

コピペするソースコード

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

<?php
   while ($the_query->have_posts()) : $the_query->the_post();
   if ($the_query->current_post < 3) {
   echo '<span class="new_text">NEW!</span>';
  }
 ?>
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;
}

表示する投稿数を変更する場合

上記でご紹介したソースコードでは、最新記事3つに「NEW」マークが表示されますが、表示する記事数を変更したい場合は下記の数字部分を変更することで記事数を調整できます。

current_post < 3 // 「NEW」マークを表示させたい投稿数

まとめ

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

記事一覧にNEWマークがあるだけで、最新情報を視覚的に理解できるようになるので、ユーザーは迷うことなく最新記事にたどり着くことができます。

また、視覚的に「更新されているサイトだな」という印象をユーザーに与えることもできるので、ユーザービリティの向上に繋がります。

コピペで簡単に実装できるのでご参考になれば幸いです。

現場でもサイト制作のほとんどがWordPressをカスタマイズして制作されているのでHTML・CSSの知識がある程度ついてきたらWordPressの勉強はオススメです。

仕事の現場でサッと使える!デザイン教科書

\【30日間無料】200万冊以上が読み放題 /

Kindle Unlimitedを試す

\【30日間無料】12万以上の作品が聴き放題 /

Audibleを試す

これからWebデザイナー・エンジニアになりたい方はこちらの記事もご参考にしていただければと思います。

以上、「コピペでOK!WordPressの新着記事に自動でNEWマークを表示する方法」でした。

  • この記事を書いた人
rdotblog_profile

dot

関西出身の29歳 R.BLOG(アールドットブログ)では、完全未経験から独学でWebデザイナーへ転職し、現役Webデザイナーとして日々学んだ(Webデザイン・プログラミング・Webマーケティング・SEOなど)タメになる情報を発信していきます。

-WordPress