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

2020年09月14日
2020年09月28日

こんばんは。デジタル事業部の冨江です。

今日は、弊社スタートミーアップが運営する求人ポータルサイト「スタキャリ」の新着記事に “NEWマーク” を表示させたので、その備忘録です。

WordPress を導入している。
新着記事に自動で NEWマークを付与させたい。
NEWマークは数日間経過した時点で自動で消えるようにしたい。
NEWマークのカスタマイズ方法も知りたい。
プラグインには頼りたくない。

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

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

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

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

$days = 1; の数字の日数だけマークを表示されるようになります。
記事UPから一週間表示させたい場合は $days = 7; と変更して下さい。

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

目次へ

NEWマークをカスタマイズする

スタキャリでは、サイト内の記事を

キーワード検索や職種・業種で検索をかけた場合
全件検索した場合

で一覧表示のレイアウトが異なるので、それぞれのレイアウトに合わせてカスタマイズをしました。
以下、そのどちらも掲載しますので、お使いのテーマに合わせてお試し下さい。

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

記事タイトルの横に並べて NEWマークを表示します。
まずは完成イメージから。

【プラグイン不要】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>

タイトルの前（左側）に表示させたい場合は、コードを <h1> 直後に入力して下さい。

▼ style.css に追加。

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

実際のページを見るにはこちら

目次へ

アイキャッチの上に重ねて表示する

タイル状に並べたアイキャッチ画像の上に重ねて NEWマークを表示します。
こちらも完成イメージがどうぞ。

【プラグイン不要】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>';
                }
            ?>
            <div class="image">
                <?php if (has_post_thumbnail()) { the_post_thumbnail(); } ?>
            </div>
            <h1 class="title"><?php the_title(); ?></h1>
        </a>
    </li>
</ul>

▼ style.css に追加。

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

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

実際のページを見るにはこちら

目次へ

この記事は役に立ちましたか？