【プラグイン不要】WordPress の新着記事に自動で数日間だけ NEW マークを付与する方法とカスタマイズ事例

先日、WordPress を導入したウェブサイトの新着記事に “NEWマーク” を表示させたので、その備忘録です。

  • WordPress を導入している
  • 新着記事 UP のタイミングで自動で NEW マークを表示させたい
  • 数日間だけ表示させたあとは自動で消えるようにしたい
  • カスタマイズ方法も知りたい
  • プラグインには頼りたくない

そんな方向けの記事になっているので、ぜひ参考にしてみて下さい。

目次

NEW マークを表示するためのコード

NEW マークを表示させたい箇所に下記のコードを追加します。
記事一覧であれば index.php や archive.php、記事内であれば single.php といった感じになりますが、使っているテーマにより異なりますので phpファイルをご確認下さい。

<?php
    $days = 3;
    $now = date_i18n('U');
    $entry = get_the_time('U');
    $term = date('U',($now - $entry)) / 86400;
    if( $days > $term ) {
        echo '<span class="new">NEW</span>';
    }
?>

基本はこれだけで OK!
$days = 3;の数字が表示される日数になるので、上記のコードでは「記事公開から 3日間マークが表示される」ようになります。
一週間表示させたい場合は$days = 7;として下さい。

上記のコードを追加した phpファイルをアップロードして「NEW」と表示されれば完成です。

目次へ

NEW マークのカスタマイズ方法

前述のコードを追加するだけで NEW マークは表示されるようになりますが、ここからはカスタマイズ方法と併せて紹介します。
お使いのテーマに合わせてお試し下さい。

記事のタイトル横に並べて表示する

マークの表示位置:記事タイトル右側
マークの表示期間:7日間

▼ 完成イメージ

【プラグイン不要】WordPress の新着記事に自動で数日間だけ NEW マークを付与する方法とカスタマイズ事例

▼ index.php や archive.php などに追加

<h1><?php the_title(); ?><?php
    $days = 7;  // マークを表示する日数
    $now = date_i18n('U');
    $entry = get_the_time('U');
    $term = date('U',($now - $entry)) / 86400;
    if( $days > $term ) {
        echo '<span class="newMark">NEW</span>';
    }
?></h1>

<?php the_title(); ?>がタイトルのテンプレートタグになるので、この後ろにコードを追加します。

▼ style.css に追加

span.newMark {
    color: #ffffff; // フォント色
    font-size: 10px; // フォントサイズ
    background: #f35b69; // 背景色
    position: relative;
    top: -2px;
    display: inline-block;
    margin-left: 8px;
    padding: 2px 5px;
}

目次へ

アイキャッチ画像に重ねて表示する

マークの表示位置:アイキャッチ画像の右上に重ねて表示
マークの表示期間:7日間

▼ 完成イメージ

【プラグイン不要】WordPress の新着記事に自動で数日間だけ NEW マークを付与する方法とカスタマイズ事例

▼ index.php や 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="newMark">NEW</span>';
                }
            ?>
            <figure>
                <?php if (has_post_thumbnail()) { the_post_thumbnail(); } ?>
            </figure>
            <h1 class="title"><?php the_title(); ?></h1>
        </a>
    </li>
</ul>

▼ style.css に追加

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

左上に表示したいときはright: 0;を削除して、left: 0;を追加して下さい。

目次へ