LIQUID DESIGN Tech Blog

jQueryで古い記事に警告メッセージを自動表示する方法

ブログをやっていて、昔書いた記事の情報が古くてどうにかしたいけど、更新するのはめんどくさい。。。

そんなときに、jQueryで自動的に警告(言い訳)メッセージを表示する方法を紹介します。

今回はページファイル自体の更新日情報ではなく、記事ページ内に記載されている日付から情報を取得します。
この方法なら、WordPressMovable TypeなどのCMSでも使えます。

HTML

こういうHTMLの場合

</p> <div class="asset-meta"> <span class="published">2015/01/01</span> </div> <p>

jQuery

jQueryで日付を比較して自動表示します

$(function() {<br /> xday = new Date(); //今日の日付<br /> xday.setYear(xday.getFullYear()-3); //今日の日付から3年前の日付<br /> yday = new Date($(&#8220;.published&#8221;).text()); //記事内の要素から日付を取得<br /> if(xday > yday){<br /> //日付を比較して3年より前ならメッセージを追加<br /> $(&#8220;.asset-meta&#8221;).after(&#8216;</p> <div class="info">この記事は3年以上前に書かれたものです。</div> <p>&#8216;);<br /> }<br /> });

サンプル

当ブログの古い記事に表示しています。(日付の下です)

https://blog.lqd.jp/webdesign/000173.html

この記事を書いた人
LIQUID DESIGN のサービスに関するデザインや技術情報を発信します。
SNSでフォローする