古い記事にメッセージを出したい
たまに見かける「この記事は1年前に書かれました」とか「この記事は書かれてから1年たっています」というメッセージを自動で出せないものかと、いろいろ調べました。
どうやらjqueryというのを使えば何とかなるらしいので、さらに調べたところ、こちらの記事を見つけました。jQueryで古い記事に警告メッセージを自動表示する方法 - LIQUID BLOG
jQueryを使わないタイプはこちら
さっそく導入
HTMLを編集します。必ずバックアップを取ってから作業してください。
テンプレートVaster2の場合jqueryは<head>直下に
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
と、すでに記述されていました。jqueryがない場合は、新たに記述が必要になると思います。
jqueryに関しては、ここのサイトが分かりやすかったです。
追加したコード
メッセージを表示するコードに、ラベル単位で表示・非表示をコントロールするためのコードを追加しました。ラベル名A、ラベル名B、ラベル名Cは適宜書き換えてください。
<div class="asset-meta">
<!-- ここにメッセージが表示される --></div>
<b:if cond="data:post.labels any (l => l.name in {"ラベル名A","ラベル名B","ラベル名C"})">
<script type="text/javascript">
// <![CDATA[
$(function() {
xday = new Date(); //今日の日付
xday.setYear(xday.getFullYear()-1); //今日の日付から1年前の日付
yday = new Date($(".published").text()); //記事内の要素から日付を取得
if(xday > yday){
//日付を比較して1年より前ならメッセージを追加
$(".asset-meta").after('<div class="info">
この記事は1年以上前に作成されました。</div>
');
}
});
//]]>
</script>
</b:if>
貼り付ける場所
貼り付ける場所は、タイトルの下あたりを目安にしました。
Vaster2の場合
<h1 class='entry-title'>
<data:post.title/>
</h1>
の下か
<h1 class='entry-title'>
<data:post.title/>
</h1>
</div>
の下でいいと思います。
また、<div class="asset-meta"><!-- ここにメッセージが表示される --></div>だけ、この場所に貼り付けて、
<b:if cond="data:post.labels any以下のコードは別の場所に貼り付けてもいいかもしれません……
他のテンプレートでも<data:post.title/>を目安にすればいいとは思いますがどうでしょう。
変更したところなど
メッセージを表示させるタイミングと文章を変えました。
-
参考サイトのコードではメッセージ表示部分を
<span class="published"></span>で囲っていまいたが、これをとりました。（なんとなく） -
<script type="text/javascript">と// <![CDATA[ //]]>は雰囲気でつけました、<script>だけや// <![CDATA[ //]]>なしでも動くかもしれません。（未検証） -
メッセージ自体は
<div class='info'>で囲ってあったのでCSSに.infoを新たに追加して文字の大きさや背景の色など調整しました。
ラベル単位でのコントロールが不要ならば
<b:if cond="data:post.labels any (l => l.name in {"ラベル名A","ラベル名B","ラベル名C"})">
</b:if>
は必要ありません。
最後に
毎度のことですが、素人の作業ですので正確性は担保していません。とりあえず動けばいいという範囲のカスタマイズです。
できれば更新日基準にしたかったのですが、自分の力量では無理でした。
<data:post.lastUpdatedISO8601/>あたりでなんとかならないかなーなんて思っています。
コメントなし:
コメントを投稿