SWELL│投稿リストに新着NEWバッジを表示するカスタマイズ

2022.12.172026.10.13

SWELL標準の投稿リストと関連記事リストで、公開日の横にNEWバッジを付ける方法です。

JavaScriptで公開日のtime要素を判定し、対象にクラスを付けてCSSで表示します。

上の投稿リストは現在の記事を表示するため、日時の条件によってNEWの有無が変わります。

次の2枚は旧版の配置例で、後半に2026年10月2日の隔離環境の確認画像を掲載しています。

投稿記事リストの場合

SWELLで投稿記事リストと関連記事リストにNEWバッジを表示する方法

JavaScriptでクラスを追加してCSSで表示するといったシンプルなカスタマイズです。

functions.phpにコードを挿入する

変更前のPHPとCSSを保存し、元に戻せる状態で試してください。

貼り付け先は子テーマのfunctions.phpまたはPHPスニペット管理プラグインです。

親テーマのファイルへ直接追加しないでください。

子テーマのfunctions.phpの既存PHP内、またはPHPスニペット管理プラグインのどちらか一方へ追加します。

旧コードは外してから置き換えてください。

コード欄の言語表示はJavaScriptですが、一式はPHPからscriptを出力するコードです。

途中の?>と末尾の<?phpはPHPとHTMLを切り替えるために残し、先頭へPHP開始タグを重ねて追加しないでください。

Code Snippetsを使う場合も、構文エラーや重複登録を避け、復旧手段を確認してから保存します。

add_action( 'wp_head', function () { ?>
<script>
document.addEventListener('DOMContentLoaded', function () {
    var now = Date.now();
    var week = 7 * 24 * 60 * 60 * 1000;
    document.querySelectorAll('ul.p-postList time.c-postTimes__posted, ul.c-postList time.c-postTimes__posted').forEach(function (time) {
        var value = time.getAttribute('datetime') || '';
        var published = Date.parse(/^\d{4}-\d{2}-\d{2}$/.test(value) ? value + 'T00:00:00' : value);
        var age = now - published;
        time.classList.toggle('new', Number.isFinite(published) && age >= 0 && age <= week);
    });
});
</script>
<?php } );

ページを開いた時点で、time要素の日時から168時間以内ならnewクラスを付けます。

SWELLの出力が年月日だけの場合は閲覧端末の現地時刻0時として計算します。

実際の投稿時刻から正確に168時間を測るものではありません。

未来の日付と不正な日時は対象外です。

更新日時には付けません。

閲覧端末の時計を基準にし、後からAjaxで追加されたカードは対象外です。

あとはこちらにCSSで装飾を足します。

CSSの挿入

追加CSSまたは子テーマのstyle.cssへ、次のCSSを追加します。

.c-postTimes__posted.new:after {
    content: "NEW";
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    height: 16px;
    line-height: 13px;
    padding: 1px 10px 0px 10px;
    font-size: 8px;
    background-color: var(--color_main);
    color: #ffffff;
    position: relative;
    bottom: 2px;
}

まとめ

対象は、通常のページ読み込み時に公開日のtime要素がある標準リストです。

更新日時ではなく公開日を判定するため、古い記事を更新してもNEWの対象にはなりません。

全リスト設定・全キャッシュ構成や、他テーマとの組み合わせを検証したものではありません。

旧版のコードはGitHubのMOTOKI-LLC/WAZA-codeにもまとめています。

CSSは子テーマのstyle.cssまたは追加CSS欄へ記載します。

元へ戻すには追加したPHPとCSSを外してください。

公開日時が非表示でtime要素が出力されないリストにはバッジも出ません。

旧版のループ条件の誤りを修正し、投稿一覧と関連記事を1回の走査にまとめました。

よくある質問：SWELLの投稿リストに新着NEWバッジを表示するとき

NEWバッジは、どうやって表示しますか？

記事では、JavaScriptで公開日のtime要素を判定し、対象にクラスを付けてCSSで表示します。SWELL標準の投稿リストと関連記事リストで、公開日の横にNEWバッジを付ける方法です。

何日以内の記事に、NEWが付きますか？

記事では、ページを開いた時点で、time要素の日時から168時間以内ならnewクラスを付けます。記事の関連記事の例では、10月1日の2件にNEWが付き、9月24日の記事には付いていません。

記事を更新すると、NEWが付きますか？

付きません。記事では、更新日時ではなく公開日を判定するため、古い記事を更新してもNEWの対象にはなりません。

コードは、どこに追加しますか？

記事では、変更前のPHPとCSSを保存し、子テーマのfunctions.phpの既存PHP内、またはPHPスニペット管理プラグインのどちらか一方へ追加します。親テーマのファイルへ直接追加しません。旧コードは外してから置き換えます。コード欄の言語表示はJavaScriptですが、一式はPHPからscriptを出力するコードで、途中のPHPの開始・終了タグは残します。CSSは子テーマのstyle.cssまたは追加CSS欄へ記載します。