新着エントリーの New マークを親カテゴリーに表示する

新着エントリーの New マークを親カテゴリーに表示する

Posted at February 28,2006 2:22 AM
Tag:[Customize, Entry, MovableType, Sidebar, SubCategory]

新着エントリーの New マークを親カテゴリーに表示する先日エントリーした「新着エントリーに New マークをつける」で「サブカテゴリーリストを折りたたんだ状態で親カテゴリーにもNewマークを表示させたい」というご要望をいただきましたので、本エントリーにてご紹介します。
このカスタマイズを行うことで、スクリーンショットのように子カテゴリー [Linux] を新規エントリーした際、最上位の親カテゴリー [趣味] にも New マークを表示します(折りたたみマークは割愛)。

以下、カスタマイズ方法です。

1.サブカテゴリー構成が2階層の場合

サブカテゴリー構成が2階層の場合、親カテゴリーに子カテゴリーの新着エントリーの日付を反映させることで、New マークを表示させます。ただし New マークは全ての親カテゴリーに反映されるので、3階層以上のカテゴリー構成の場合は2項をご利用ください。

1.1 サブカテゴリーリストの修正

サブカテゴリーリストの折りたたみ用タグ(下記)に青色部分を追加します。

<!-- サブカテゴリー用 -->
<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <span class="new"><MTEntriesWithSubCategories lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntriesWithSubCategories></span><MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <span class="new"><MTEntriesWithSubCategories lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntriesWithSubCategories></span>
<MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
<!-- サブカテゴリー用 -->

1.2 スクリプトの設定・CSSの設定

スクリプトの設定・CSSの設定については新着エントリーに New マークをつけるを参照ください。

2.サブカテゴリー構成が3階層以上の場合

サブカテゴリー構成が3階層以上の場合は、途中の親カテゴリーに New マークを表示させないようにするため、1項とは設定内容が異なります。

2.1 サブカテゴリーリストの修正

サブカテゴリーリストの折りたたみ用タグ(下記)に青色部分を追加してください。

<!-- サブカテゴリー用 -->
<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <span class="new"><MTEntries lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$>:</MTEntries><MTTopLevelParent><$MTCategoryID$></MTTopLevelParent></span><MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <span class="new">00:00:00:00:00:00:<MTTopLevelParent><$MTCategoryID$></MTTopLevelParent></span><MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
<!-- サブカテゴリー用 -->

2.2 スクリプトの追加

下記のスクリプトを2.1項のタグの下に追加してください。

<script type="text/javascript">
<!--
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date();
var spans = document.getElementById('categories').getElementsByTagName('span');
var list = new Array();
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' ||
        spans[i].getAttribute('className') == 'new') {
        if (spans[i].childNodes[0]) {
            time = spans[i].childNodes[0].nodeValue.split(":");
            var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
            list.push(time[6]);
            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';
                for(j = 0; j < list.length; j++){
                    if(list[j] == time[6]){
                        spans[j].innerHTML = content;
                        spans[j].style.display = 'inline';
                        break;
                    }
                }
            }
        }
    }
}
//-->
</script>

このスクリプトの動作ですが、各カテゴリーの日付の最後に最上位の親カテゴリーIDを予め付与しておき、新着エントリーがあった場合にその親カテゴリーIDのカテゴリーを再検索して、New マークを与えています。

2.3 CSSの設定

CSSの設定については新着エントリーに New マークをつけるを参照ください。

2006.02.28 追記
2.2項、3項でエントリーが存在しない親カテゴリーの考慮がもれていましたのでタグを修正しました。

2006.08.19
記事を全面修正しました。

2009.01.06
スクリプトを修正しました。

関連記事
zenback
人気エントリー
トラックバックURL


コメント

早速の対応、ありがとうございます!

ですが・・・
なぜか親カテゴリーに表示されないのです(T△T)
記事のとおりにしているつもりなのですが・・・。

折りたたみ・ツリー化・親カテゴリーに合計数表示を全部使っているのですが
これがいけないのかと思い、
記事内の「2.2階層のみのサブカテゴリー構成の場合」を全部コピー&ペーストしてみても
親カテゴリーにnewがつかないのです( ノД`)シクシク…

もしよろしければ、考えられる原因を教えていただけないでしょうか?
お手数をおかけしてしまって、申し訳ありません・・・

[1] Posted by ちゅん : February 28, 2006 5:00 PM

ありがとうございました!
修正版のタグで無事に表示されました!

いろいろお手数をかけてしまってすいませんでした。

[2] Posted by ちゅん : February 28, 2006 9:26 PM

>ちゅんさん
こんばんは。
いえいえ、確認不足ですいませんでした。
無事にできてよかったです。
ではでは!

[3] Posted by yujiro : February 28, 2006 11:08 PM

こんにちは^^

何故かこのスプリクトだと 表示されません

トラックバック用のだと 子カテゴリーにだけ 表示されました

色々入れ替えて試してみましたが

原因不明なので お時間ありましたら

教えて頂けると うれしいです

[4] Posted by MELL : August 15, 2006 4:33 PM

>MELLさん
こんばんは。
ご返事遅くなってすいません。
このエントリーの記事を見直しましたので再度設定してみて頂けますでしょうか。
それではよろしくお願い致します。

[5] Posted by yujiro : August 20, 2006 1:26 AM

初めまして、七海と申します。

New表示をさせたくこのスプリクトを使用させていただいたのですが、
MT4.23-ja でウィジットとして使用した場合、カテゴリ月間アーカイブの再構築時に、
Can't call method "id" on unblessed reference
と言ったErrorを吐き出して再構築されません。
Errorを吐き出すのはカテゴリ月間アーカイブのみで、ほかの所ではErrorを吐くことはありません。


なにぶんかなり前の記事ですので申し訳ないのですが、回避する方法があれば教えていただきたいのです。

よろしくお願いします。

[6] Posted by 七海 : December 26, 2008 10:30 PM

>七海さん
こんばんは。
ご返事遅くなってすいません。
MTTopLevelCategories タグの中で MTEntriesWithSubCategories タグを使用するとNGになるようなので、次の部分を変更してください。

変更前

<span><MTEntriesWithSubCategories lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntriesWithSubCategories></span>

変更後

<span><MTCategoryLabel setvar="cat"><MTEntries category="$cat" include_subcategories="1" lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntries></span>

それではよろしくお願い致します。

[7] Posted by yujiro logo : January 5, 2009 1:16 AM

お忙しい中、回答いただきありがとうございました。

エラーはでなくなったのですが、今度はNewが表示されなくなりました。

クラス指定を外すと更新時間の表示はされるのですが、とすると表示が無くなります。

どうしたらよいでしょう?

よろしくお願いします。

[8] Posted by 七海 : January 5, 2009 11:23 PM

>七海さん
こんばんは。
ブログ記事のないカテゴリーがあると、JavaScript が正常に動作していないようでした。
2.2項のスクリプトを修正しましたのでお試しください。
それではよろしくお願い致します。

[9] Posted by yujiro logo : January 6, 2009 12:35 AM

何度もすみません。

今度はちゃんと表示できるようになりました。

本当にありがとうございました。

[10] Posted by 七海 : January 6, 2009 3:16 AM

たびたびすみません。

Javaスプリクトの修正を行ったのですが、親カテゴリの方に付くNewマークが、子カテゴリとは無関係の親カテゴリに付いてしまいます。

別の親カテゴリを持つ子カテゴリの記事を同じ日に編集した場合、一番上の親カテゴリのみNewマークが表示され、ほかの親カテゴリには表示されません。

折りたたみを行っているので、その影響でしょうか?

お忙しいところ、何度もすみません。

教えていただけると助かります。

[11] Posted by 七海 : January 13, 2009 4:47 AM

>七海さん
こんにちは。
ご質問の件ですが、事象が発生しているページのURLをお知らせください。
それではよろしくお願い致します。

[12] Posted by yujiro logo : January 14, 2009 3:01 PM

こんばんは。

http://nf-nanami.com/arekore/
このページです。

よろしくお願いします。

[13] Posted by 七海 : January 14, 2009 10:02 PM

>七海さん
こんにちは。
ページのソースコードだけでは原因が分からないため、ご利用中のテンプレート(該当部分)をメールにてご送付ください。
それではよろしくお願い致します。

[14] Posted by yujiro logo : January 15, 2009 11:19 AM

役立つ情報・ツールの公開をありがとうございます。
WordPressにおいて、サイドバーなどにカテゴリー・リスト(カテゴリー名だけのリスト)を表示することもあると思います。そんなとき、新着記事を含んでいるカテゴリー名の横に「new」マークを表示したいのですが、MovableType用の本投稿内容を改編したものはないでしょうか?

[15] Posted by pyon-yon : January 5, 2012 9:58 PM

>pyon-yonさん
こんばんは。
ご返事遅くなり大変申し訳ありません。
WordPress用のプラグインを作成しましたのでご利用ください。

http://www.koikikukan.com/archives/2012/01/25-012345.php

それではよろしくお願い致します。

[16] Posted by yujiro logo : January 25, 2012 1:31 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)