最新記事にnewマークをつける方法

以前、新着情報に使える便利なJavaScriptの記事をかきましたが、
最近、「トップページの新着情報にNEWをつけてほしい…..」という依頼をたて続けにいただき、
まとめの意味で再投稿です。

jQuery(document).ready(function(){
var currentDate = new Date();
jQuery(‘.newmarkList’).each(function(){
var pass       // passage time
= 240;
var content    // display content
= ‘<img src=”http://www.wp-plan/img/item/newmark.gif” alt=”10日以内の新着ブログ記事” width=”18″ height=”5″ title=”10日以内の新着ブログ記事” />’;
var newmarkAttr = jQuery(this).attr(‘title’);
newmarkAttr = newmarkAttr.replace(/年|月|日|時|分/g,’:’);
newmarkAttr = newmarkAttr.replace(/\s|秒.*/g,”);
var time = newmarkAttr.split(“:”);
var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
var now = (currentDate.getTime() – entryDate.getTime())/(60*60*1000);
now = Math.ceil(now);
if(now <= pass){
jQuery(this).after(content);
}
});
});

このようなソースコードを　newmark.js　などのファイル名にしてサーバーにアップします。
今回は画像を表示させるように設定していますが、テキストで表示させたい場合は、
６.７行目あたりを

var pass // passage time = 240;
var content // display content = ‘<span>New !!</span>‘;

のようにします。
<head></head>の要素内でファイルを読込みます。

<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>google.load(“jquery”, “1.2”);</script>
<script type=”text/javascript” src=”http://www.wp-plan/js/newmark.js” charset=”UTF-8″></script>

新着情報のNEWマークを表示させたいリンクに　class=”newmarkList”　を設定します。

<h2>新着情報</h2>
<?php query_posts(‘category_name=news&showposts=5’); ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a class=”newmarkList” href=”<?php the_permalink() ?>” title=”<?php the_modified_time(‘Y年m月d日 H時i分s秒 に更新’); ?>”><?php the_title(); ?></a></li>
<?php endwhile;?>
</ul>

これで10日以内の新着記事にリンクつきでNEWマークが表示されます。