新着エントリーのあるカテゴリーに「New」をつける

サイトに新しい記事を投稿した際、トップに新しい記事は表示されますが、それを少し判り易くするためのカスタマイズです。
見た目のちょっとしたアクセントにもなりますね。

□関連記事:
新着トラックバックに「New」をつける

テンプレート追記

カテゴリー を表示させている部分に、下記のように「New」の表示部を追記する
※<span>~</span>の間

<MTIfArchiveTypeEnabled archive_type="Category">
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>  [<$MTCategoryCount$>]
 <span class="new"><MTEntries lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntries></span>
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</MTIfArchiveTypeEnabled>

最近のエントリー の場合

<MTEntries lastn="10">
・<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a> <span class="new"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span><br />
</MTEntries>

表示判定用のスクリプトを追加する

<script type="text/javascript">
<!--
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date(); 
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' ||
       spans[i].getAttribute('className') == 'new') {
        time = spans[i].childNodes[0].nodeValue.split(":");
        var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
        var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
        now = Math.ceil(now);
        if(-now <= pass){
            spans[i].innerHTML = content;
            spans[i].style.display = 'inline';
        }
    }
}
//-->
</script>

※4行目で表示時間を設定する
※6行目で表示メッセージを設定する

CSS追記

下記コードをCSSに追記する

span.new {
    display: none;
    color: red;
    font-weight: bold;
}

以上。


参考記事:
小粋空間: 新着エントリーのあるカテゴリーに New マークをつける [小粋空間]


2006/10/18 06:00:31:記事書き直し

▲ to Top

トラックバック(0)

▲ to Top