SWELLの投稿リストでNEWバッジを表示したいとふと思いましたので、
JavaScriptで7日以内の記事に目印を付けて表示させてみました。
当サイトの更新が不定期なので、画像も残しておきます。
投稿記事リストの場合
関連記事の場合
本記事ではその新着NEWバッジの表示方法を紹介します。
目次
SWELLで投稿記事リストと関連記事リストにNEWバッジを表示する方法
JavaScriptでクラスを追加してCSSで表示するといったシンプルなカスタマイズです。
functions.phpにコードを挿入する
コードを記述する場所は下記になります。
WordPressの管理画面 ＞ 外観 ＞ テーマファイルエディター ＞ functions.php
functions.phpに下記のコードを挿入してください。
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;
}まとめ
SWELLの投稿リストブロックで新着記事を表示すると思いますが、
更新頻度が多い場合は本記事のようなNEWバッジがあると、最近の更新が一目でわかると思います。
気になった方は是非試してみて下さい。