このエントリーをはてなブックマークに追加

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

ブログをやっていて、昔書いた記事の情報が古くてどうにかしたいけど、更新するのはめんどくさい。。。
そんなときに、jQueryで自動的に警告(言い訳)メッセージを表示する方法を紹介します。
今回はページファイル自体の更新日情報ではなく、記事ページ内に記載されている日付から情報を取得します。 この方法なら、WordPressMovable TypeなどのCMSでも使えます。

HTML

こういうHTMLの場合 <div class="asset-meta"> <span class="published">2015/01/01</span> </div>

jQuery

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

サンプル

当ブログの古い記事に表示しています。(日付の下です)
http://blog.lqd.jp/webdesign/000173.html

WordPressテーマ配布しています

レスポンシブWordPressテーマ LIQUID PRESS

BLOGを購読する

Twitter