WordPressの新着記事に自動でNEWマークを表示する方法【SWELLはコピペOK】

2026年1月16日2026年1月18日

ハシビィくん

新着記事をもっとアピールしたいっす！よくある「NEW」マークって自動で付与することってできますか？

カピーさん

もちろんできるぞ！今回は2パターンを紹介していくぞ！

今回はWordPressで新着記事に自動でアイキャッチ（サムネイル）画像の上に「NEW」マークを表示させるカスタマイズを紹介していきます。

5日間「NEW」マークを記事一覧に表示する方法①

5日間以内に更新された記事に自動で「NEW」マークを表示する方法です。

このカスタマイズをすることで、新着記事の中からより1番新しい記事をアピールすることができます。

日付の横に「NEW」マークがあるのが確認できると思います。（投稿日と更新日があるので、その間にあります）

「NEW」マークを表示させるコードを追加

<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属性から投稿日時を取得

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

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

サンプルコードでは「5日間」で想定としていますが、「NEW」のマークを表示させる日数を変更させたい場合は、下記の数値を変更することでOKです。

referenceDate.setDate(referenceDate.getDate() - 5);

style.css に下記コードを追加

/* 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; 
}

5日間「NEW」マークを記事一覧に表示する方法②

最新記事5件の投稿に自動で「NEW」マークを表示する方法です。

アイキャッチの左上に「NEW」マークが確認できます。こちらは①の方法よりも視認性は高いですが、アイキャッチの色によっては視認性が確保されないのが難しいところです。

NEW」マークを表示させるコードを追加

add_action( 'wp_head', function () { ?>
<script>
	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 );
	
document.addEventListener('DOMContentLoaded', () => {
	try {
    //投稿リスト
	var datetime = document.querySelectorAll( "ul.p-postList time" ) ;		
	for (var i = 0; datetime.length; i++) {
	　var postime = new Date(datetime[i].getAttribute("datetime"));
	  var dif = (today - postime) / (1000 * 24 * 3600);		  
	  if(-1 <= dif && dif <= 5){
		 datetime[i].classList.add("new");
	  };		
	}
    //関連記事
	var datetime = document.querySelectorAll( "ul.c-postList time" ) ;		
	for (var i = 0; datetime.length; i++) {
	　var postime = new Date(datetime[i].getAttribute("datetime"));
	  var dif = (today - postime) / (1000 * 24 * 3600);		  
	  if(-1 <= dif && dif <= 5){
		 datetime[i].classList.add("new");
	  };		
	}		
	}catch (e) {}	
});
</script>
<?php } );

style.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;
}