WordPressで新着記事に『NEW』マークをつける方法

2022年12月7日

新着情報の横に『NEW』マークをつける方法をご紹介。

WordPressプラグイン『what’s new generator』もコードなしで表示する事ができますが、このプラグインは5年間(2022年12月7日現在)アップデートされていないので、利用している場合はプラグイン削除の上、コードにて対応ください。

長く更新されていないプラグインはセキュリティホールの原因になりますのでご注意ください。

『NEW』マーク時間指定

<?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-entry">NEW</span>';
    }
?>

「NEW」マークを表示させたい箇所に上記コードを追加します。
NEW箇所は日本語でも何でも好きな表記をご指定ください。
index.phpや記事内であれば single.php など、使っているテーマphpファイル内に指定してください。

1行目「$days = 3」で「New」をつける期間を3日以内、3日以上3日未満の場合はこの数字を変更
4行目「86400」は1日の秒数です。(60秒×60分×24時間=86400)

『NEW』マーク記事数指定

$limit = 5;
$num = $wp_query->current_post;
if ( $limit > $num ):
    echo 'NEW';
endif;

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

CSSを把握していれば比較的簡単な表現方法となります。

.new-entry {
    color: #ffffff; // フォントカラー
    background: #f35b69; // バックグランドカラー
    position: relative;
    display: inline-block;
    
}

余白などは既存レイアウト、フォントサイズにあわせご指定ください。

WordPressは無駄にプラグインを入れずとも様々な事が実装できますので、できるだけプラグイン依存は避けてください。


Recent Entries

【よくある質問】担当者が退職し、PHPのバージョンやMySQLサポート切れの可能性があります。チェック可能ですか?
2025年3月末を期限として国、業界団体が進めている「EMV 3Dセキュア」の義務化
WordPress、Windowsデスクトップでサイトを構築する方法をリリース(名称注意)
Googleビジネスプロフィール(旧称: Google マイビジネス)のチャット機能が2024 年7 月31 日をもって終了
独立含む、Webサイト新規制作、Webサイトリニューアルをご検討している企業様、ご担当者様へ


CONTACT

Webサイトリニューアルから新規ホームページ制作・運営・保守まで、目的達成を実現いたします。
各種Webサイト・ECサイト制作、広告代行に関するご相談、ご質問などお気軽にお問合せ下さい。

Tel : 03-5324-2318 / Email : info@reinc.jp

各種お問合せはこちらから