最新記事にNewマークをつける方法【SWELLならコピペOK】

<script>
// newマークの付与
document.addEventListener("DOMContentLoaded", function() {
  // 各記事の親要素を取得
  var postItems = document.querySelectorAll(".p-postList__item");

  postItems.forEach(function(postItem) {
    // 子要素からdatetime属性を取得
    var datetimeElement = postItem.querySelector("[datetime]");
    if (!datetimeElement) {
      return; // datetime属性が見つからない場合はスキップ
    }

    var postDate = datetimeElement.getAttribute("datetime"); // datetime属性から投稿日時を取得

    // 7日以内の条件をチェック
    var referenceDate = new Date();
    referenceDate.setDate(referenceDate.getDate() - 7);

    if (new Date(postDate) >= referenceDate) {
      // 条件が満たされた場合、新しいクラスを追加
      postItem.classList.add("new-mark");
    }
  });
});
</script>

/* newマーク */
.new-mark .p-postList__link::before {
	content: "";
	top: 0;
	left: 0;
	border-bottom: 3em solid transparent;
	border-left: 3em solid red; 
	position: absolute;
	z-index: 10;
}

.new-mark .p-postList__link::after {
	content: "New!";
	top: 7px;
	left: 0;
	transform: rotate(-45deg);
	color: #fff;
	position: absolute;
	z-index: 10;
	font-size: .8em;
	font-weight: 700;
	/* ホバー時のチラつき対策 */
	-webkit-font-smoothing: antialiased; 
}

/* newマーク */
.new-mark .p-postList__link::after {
	content: 'New!';
	background-color: red;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	width: 42px;
	height: 42px;
	line-height: 42px;
	border-radius: 50%;
	text-align: center;
	display: inline-block;
	position: absolute;
	top: -10px;
	left: -10px;
	z-index: 10;
}

/* newマーク */
.new-mark .p-postList__title::before {
	content: "New!";
	display: inline-block;
	background-color: red;
	color: #fff;
	line-height: 1;
	margin-right: .5em;
	padding: .3em .5em;
	font-size: .7em;
	vertical-align: text-bottom;
}

/* カード型 */
.-type-card
	
/* リスト型 */
.-type-list

/* リスト型（左右交互） */
.-type-list2

/* サムネイル型 */
.-type-thumb

/* テキスト型 */
.-type-simple

/* カード型の時のnewマーク */
.-type-card .new-mark .p-postList__link::after {
}

/* テキスト型の時のnewマーク */
.-type-simple .new-mark .p-postList__title::before {
}

<?php // 新着記事に New マークを表示
	$days = 3; // New を表示させたい期間の日数
	$today = date_i18n('U'); // 現在の日付を取得
	$entry = get_the_time('U'); // 現在の投稿の時刻を取得
	$total = date('U',($today - $entry)) / 86400 ; // 秒数指定 86400 は1日
	if(  $days > $total ) {
		echo '<span class="new-mark">NEW</span>'; // Newを表示
	}
?>

<a href="<?php the_permalink(); ?>" class="blog-item__link">
	<?php // 新着記事に New マークを表示
		$days = 3; // New を表示させたい期間の日数
		$today = date_i18n('U'); // 現在の日付を取得
		$entry = get_the_time('U'); // 現在の投稿の時刻を取得
		$total = date('U',($today - $entry)) / 86400 ; // 秒数指定 86400 は1日
		if(  $days > $total ) {
			echo '<span class="new-mark">NEW</span>'; // Newを表示
		}
	?>
	<div class="blog-item__picture">
		<figure class="blog-picture__figure">
		<?php
		if (has_post_thumbnail()) {
			// アイキャッチ画像が設定されてれば大サイズで表示
			the_post_thumbnail('large');
		} else {
			// なければnoimage画像をデフォルトで表示
			echo '<img src="' . esc_url( get_template_directory_uri() ) . '/img/blog.jpg" alt="noimage">';
		}
		?>
		</figure>
	</div>
	<div class="blog-item__body">
		<?php
		// カテゴリー１つ目の名前を表示
		$terms = get_the_terms( $post->ID, (get_post_type()=='post' ? 'category' : 'genre') );
		if ($terms[0]) {
			echo '<p class="blog-item__category">' . esc_html( $terms[0]->name ) . '</p>';
		}
		?>
		<p class="blog-item__title"><?php the_title(); ?></p>
		<time class="blog-time__date" datetime="<?php the_time('c');?>"><?php the_time('Y.m.d'); ?></time>
	</div>
</a>