WordPress無料テーマColdboxの記事カードの新着にNewマークをつけるカスタマイズをしました。
参考サイトさまはこちらです
https://motoki-design.co.jp/wordpress/swell-show-new-badge/#google_vignette
JS
add_action( 'wp_head', function () { ?>
<script>
document.addEventListener('DOMContentLoaded', () => {
try {
// 現在の日付を取得
var date = new Date();
var yyyy = date.getFullYear();
var mm = ("00" + (date.getMonth()+1)).slice(-2);
var dd = ("00" + date.getDate()).slice(-2);
var today = new Date(yyyy + "-" + mm + "-" + dd);
// 投稿の日付を取得
var postDates = document.querySelectorAll(".post-date"); // <div class="post-date">
// 各投稿の日付をチェック
for (var i = 0; i < postDates.length; i++) {
var postDate = new Date(postDates[i].innerText.trim());
var difference = (today - postDate) / (1000 * 24 * 3600); // 差分を日数に換算
// 7日以内の場合に ".post-category" に "new" クラスを追加
if (difference >= 0 && difference <= 7) {
var categoryElement = postDates[i].closest(".post-inner").querySelector(".post-category");
if (categoryElement) {
categoryElement.classList.add("new");
}
}
}
} catch (e) {
console.error("エラーが発生しました: ", e);
}
});
</script>
<?php } );
CSS
.post-category.new::after {
content: "NEW!";
color: #666;
font-weight: normal;
margin-left: 10px;
font-size:.9em
}
CSSはお好みでお願いします。以上でNEWマーク表示ができました。