月別アーカイブの年別ツリー化＋折りたたみ。

現在、HTMLで構築しているあるサイトを、MTへ移行する作業を
行っているのですが、その際にデザイン上、月別アーカイブを
折りたたむ必要があって調べたものを、下記サイトを参考に、
本BLOGにも摘要してみました。

≫小粋空間 – JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ
 

 
本BLOGは、カテゴリ・アーカイブを既にツリー化していたため、
参考にしたサイトに記載されている手順と若干異なる部分があります。

１．Pluginのダウンロード＆インスコ

下記リンクより、それぞれのPluginをダウンロード。
≫ArchiveDateHeader Plugin
≫ArchiveDateFooter Plugin
 
ダウンロードした各Pluginを解凍すると、「ArchiveDateHeader Plugin」は
「ArchiveDateHeader.pl」というファイルが、「ArchiveDateFooter Plugin」は
「ArchiveDateFooter」というディレクトリができるので、それぞれを
MTフォルダの下にある「Plugins」フォルダにアップロードします。
 
MT管理画面の「メイン・メニュー」→「システム・メニュー」→「プラグイン」で
「ArchiveDateFooter Plugin」及び「ArchiveDateHeader.pl」が表示されて
いればオッケーです。

 
 
２．JavaScriptのダウンロード

menufolder.js をダウンロードし、ソースを若干修正した後に
「index.html」があるフォルダにアップロードするのですが、
これはアーカイブ・ツリー化ですでに対応済みだったため、
今回はまったくイジリませんでした。

 
 
３．テンプレート修正

「menufolder.js」を取り込むタグの埋め込みや、ツリー画像のアップロードは、
アーカイブ・ツリー化時に既に埋め込んであったため省略し、月別アーカイブ
部分のみ、下記のように修正しました。

<!– 月別アーカイブリスト開始 –>
<div class=”sidetitle” id=”monthlyname”>
Monthly Archives
</div>
 
<div class=”side”>
<MTArchiveList archive_type=”Monthly” id=”monthlylist”>
<MTArchiveDateHeader><div id=”archive<$MTArchiveDate format=”%Y”$>name”><span><$MTArchiveDate format=”%Y年”$></span></div><ul id=”archive<$MTArchiveDate format=”%Y”$>list” class=”tree”></MTArchiveDateHeader>
<li class=”tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>”><a href=”<$MTArchiveLink$>“><$MTArchiveDate format=”%B月”$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
 
<script type=”text/javascript”>
//<![CDATA[
<MTArchiveList archive_type=”Monthly”><MTArchiveDateHeader>FoldNavigation(‘archive<$MTArchiveDate format="%Y"$>‘,’off’,false);</MTArchiveDateHeader>
</MTArchiveList>
FoldNavigation(‘monthly’,’off’,false);
//]]>
</script>
<!– 月別アーカイブリスト終了 –>

 
 
４．スタイルシートの修正

スタイルシートも、カテゴリ・アーカイブリストのツリー化時に
修正を行っていたため、今回わ差分のみ追加しました。

ul.tree li.tree_end {
background-image: url(tree_end_dotted.gif);
list-style: none;
}

 
参考にしたサイトでは、ツリー画像を「tree_lst.gif」及び「tree_end.gif」に
リネームすると書かれていたのですが、カテゴリ・アーカイブのツリー化時に
「tree_lst_dotted.gif」「tree_end_dotted.gif」で対応してしまったので、
今回は後者のファイル名のまま組み込みました。
（項番4のスタイルシート修正箇所の赤字部分が、オリジナルとわ変えた部分です。）