SWELL│投稿リストに新着NEWバッジを表示するカスタマイズ

2022.12.172024.03.14

SWELLの投稿リストでNEWバッジを表示したいとふと思いましたので、

JavaScriptで7日以内の記事に目印を付けて表示させてみました。

当サイトの更新が不定期なので、画像も残しておきます。

投稿記事リストの場合

SWELLで投稿記事リストと関連記事リストにNEWバッジを表示する方法

JavaScriptでクラスを追加してCSSで表示するといったシンプルなカスタマイズです。

functions.phpにコードを挿入する

コードを記述する場所は下記になります。

WordPressの管理画面＞外観＞テーマファイルエディター＞ functions.php

functions.phpに下記のコードを挿入してください。

※Code Snippetsのプラグインを使うと安全に記述できます。

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 <= 7){
		 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 <= 7){
		 datetime[i].classList.add("new");
	  };		
	}		
	}catch (e) {}	
});
</script>
<?php } );

これで7日以内の新着のブログカードにnewというクラスが付与されるので、

あとはこちらにCSSで装飾を足します。

CSSの挿入

WordPressの管理画面＞外観＞テーマファイルエディター＞ 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;
}