JIN:Rカスタマイズ・新着7日以内の記事カードにNewマークを付ける

JIN:Rのカスタマイズです。新着7日以内の記事にNewマークを付けます。

JSを書いて、CSSで整えます。

JS

document.addEventListener("DOMContentLoaded", function () {
    const articles = document.querySelectorAll(".o--postlist-item");

    articles.forEach(article => {
        const dateElement = article.querySelector(".a--post-date");
        if (!dateElement) return;

        const postDate = new Date(dateElement.textContent.trim().replace(/\./g, "-"));
        const today = new Date();
        const diffTime = today - postDate;
        const diffDays = diffTime / (1000 * 60 * 60 * 24);

        if (diffDays <= 7) {
            const newMark = document.createElement("span");
            newMark.textContent = "NEW";
            newMark.classList.add("new-badge");

            dateElement.appendChild(newMark); // 日付の横に追加
        }
    });
});

CSS

.new-badge {
    display: inline-block;
    background-color: red;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px; /* 日付との間に余白を作る */
}

内容です。.o--postlist-item をループで取得 .a--post-date から日付を取得し、Date オブジェクトに変換 今日の日付との差を計算し、7日以内なら「NEW」マークを追加

Hostinger

Latest

書籍・千葉雅也著「センスの哲学」
058 scaled

書籍・千葉雅也著「センスの哲学」

Book
プラグインなし!WordPressでショートコードを使用する簡単なふきだしを作ってみたメモ
Publicdomainq 0053327fwmvdx scaled

プラグインなし!WordPressでショートコードを使用する簡単なふきだしを作ってみたメモ

Internet
jQueryで1回だけ表示されるローディング画面実装のメモ
Publicdomainq 0049571henzno scaled

jQueryで1回だけ表示されるローディング画面実装のメモ

Internet
Androidタブレット8インチをお得に購入しました。
Publicdomainq 0050497marnrh scaled

Androidタブレット8インチをお得に購入しました。

Goods