WordPress無料テーマColdboxの記事カードの新着にNewマークをつけるカスタマイズ

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マーク表示ができました。

よかったらシェアしてね!

PROFILE

hirochanのアバター hirochan 主婦

小2を育児中の主婦。ブログカスタマイズが趣味。写真は娘ではなく本人です。

TOC