Right Bower

前もって宣言していたとおり、JUGEMカスタマイズ講座さんの
「ツリー化スクリプトver2」をWDPに導入するための解説です。
これを導入すると、⇒のナビゲーションのようにコメントやエントリーが
日付ごとや記事ごとにまとめられます。

ちょっとした前置きがあります。
ご了承のうえでスクリプトの追記を行ってください。

●JUGEMと同じ記述式にするため、「年」「時間・分」を
　ナビゲーションからばっさり切り捨てます。
　それが嫌だという方までは独自フォローできません。
●ナビゲーションに「new!」の表記がでるようにしている場合、
　それもばっさり切り捨てます……。
　保持する良い方法が見つかりませんでした。すいません。
●<dl><dt>を<ul><li>に書き換えます。
　CSSでリストマークを変えたり画像を使うデザインにしている場合、
　デザインが変わってしまいますので各自調節をお願いします。
●ツリー化を行うのは「最新エントリー」「最新コメント」
　「最新トラックバック」の３つです。リンクやカテゴリは
　元々WDPはツリーになっているので必要ありません。

それでは解説です。自分流ですので他にもやり方はあるかもしれません。

■ツリー化スクリプトver2を導入する■

１．「最新エントリー」部分（<!--SKIN_LIST_HEAD_START-->～<!--SKIN_LIST_FOOT_END-->）を以下のように書き換える

<!--SKIN_LIST_HEAD_START-->
<h2>最新エントリー</h2>
<div class="block" id="newentrylist">
<ul>
<!--SKIN_LIST_HEAD_END-->
<!--SKIN_LIST_START-->
<li><a href="${ARTICLE_URL}">${ARTICLE_SUBJ}</a> (${ARTICLE_MONTH}/${ARTICLE_DAY})</li>
<!--SKIN_LIST_END-->
<!--SKIN_LIST_FOOT_START-->
</ul>
</div>
<!--SKIN_LIST_FOOT_END-->

２．「最新コメント」部分（<!--SKIN_CMTLIST_HEAD_START-->～<!--SKIN_CMTLIST_FOOT_END-->）を以下のように書き換える

<!--SKIN_CMTLIST_HEAD_START-->
<h2>最新コメント</h2>
<div class="block" id="commentlist">
<ul>
<!--SKIN_CMTLIST_HEAD_END-->
<!--SKIN_CMTLIST_START-->
<li>${ARTICLE_SUBJ}<br />
<a href="${INFO_PATH}?mode=comment&amp;no=${ARTICLE_PNO}#comment">${ARTICLE_NAME} (${ARTICLE_MONTH}/${ARTICLE_DAY})</a></li>
<!--SKIN_CMTLIST_END-->
<!--SKIN_CMTLIST_FOOT_START-->
</ul>
</div>
<!--SKIN_CMTLIST_FOOT_END-->

３．「最新トラックバック」部分（<!--SKIN_TBLIST_HEAD_START-->～<!--SKIN_TBLIST_FOOT_END-->）を以下のように書き換える

<!--SKIN_TBLIST_HEAD_START-->
<h2>最新トラックバック</h2>
<div class="block" id="tblist">
<ul>
<!--SKIN_TBLIST_HEAD_END-->
<!--SKIN_TBLIST_START-->
<li>${TRACKBACK_TITLE}<br />
<a href="${INFO_PATH}?mode=trackback&amp;no=${TRACKBACK_PNO}#trackback">${TRACKBACK_BLOG} (${TRACKBACK_MONTH}/${TRACKBACK_DAY})</a></li>
<!--SKIN_TBLIST_END-->
<!--SKIN_TBLIST_FOOT_START-->
</ul>
</div>
<!--SKIN_TBLIST_FOOT_END-->

※改造のポイント
　・<div id="○○"> <ul><li>～</li><ul> </div>のように、idをふったdivで
　　リストタグを囲む。
　・リスト内容のリンクタグ<a>～</a>の範囲を変えないこと。
　・時間表記は日付のみにすること。
　・スキンによっては違いがあるかもしれませんが、
　　上の３つを最低限守っていればスクリプトが働くようです。
　・<h2>～<h2>の間は自由に書き換えてもＯＫ。

４．「skin＞footer.html」の</body>直前にツリー化スクリプトを記入する。
　　これはJUGEMカスタマイズ講座さんにあるそのままでＯＫ。

※2008/12/26 追記
　JUGEMカスタマイズ講座さんが行方不明のため、暫定的にスクリプトを
　こちらにも記述しておきます。著作元はJUGEMカスタマイズ講座さんに
　あり、ご指摘等があった場合削除いたします。

<script type="text/javascript">
<!--
function makeTreeElements (idName,objList) {
  if (!objList.innerHTML) return;
  var objLink = objList.getElementsByTagName('a')[0];
  var linkUrl = objLink.getAttribute('href');
  if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
    var tmpText = objList.innerHTML.split("⇒");
    tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
    this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join('');
    this.elem = objLink.innerHTML;
  } else if (idName.indexOf('entry') > -1) {
    var tmpText = objList.innerHTML;
    tmpText.match(/\((\d\d\/\d\d)\)/);
    this.base = Array('<strong>[',RegExp.$1,']</strong>').join('');
    this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
  } else if (idName.indexOf('link') > -1) {
    var tmpText = objList.innerHTML;
    if ( tmpText.match(/\[(.+)\](.+)/) ) {
      this.base = Array('<strong>[',RegExp.$1,']</strong>').join('');
      this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join('');
    }
  }
  return this;
}
function createTreeList(idName,option) { // version 2.2
  var objFocus = this.document.getElementById(idName);
  if (!objFocus) return;
  if (!objFocus.innerHTML) return;
  var objLists = objFocus.getElementsByTagName('li');
  var linkList = new Array();
  var outText = new Array();
  if (objLists.length > 0) {
    for (i=0;i<objLists.length;i++) {
      var chckFlag = true;
      var elemText = new makeTreeElements(idName,objLists[i]);
      if (!elemText.base || !elemText.elem) return;
      for (j=0;j<linkList.length;j++) {
        if ( linkList[j].base.indexOf(elemText.base) > -1 ) {
          chckFlag = false;
          linkList[j][linkList[j].length] = elemText.elem;
        }
      }
      if (chckFlag) {
        var tmpNum = linkList.length;
        linkList[tmpNum] = new Array();
        linkList[tmpNum][0] = elemText.elem;
        linkList[tmpNum].base = elemText.base;
      }
    }
    if (linkList.length > 0) {
      outText[outText.length] = '<ul>\n';
      for (i=0;i<linkList.length;i++) {
        outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
        if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
        for (j=0;j<linkList[i].length;j++) {
          outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list;
          outText[outText.length] = Array(linkList[i][j],option.leef).join('');
        }
        outText[outText.length] = Array(option.btm,'</li>').join('');
      }
      outText[outText.length] = '</ul>\n';
      objFocus.innerHTML = outText.join('');
    }
  }
}
var gTreeOption = new Array;
gTreeOption['sort'] = false;      /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '⇒ ';      /* ツリー用マーク(通常) */
gTreeOption['end']  = '⇒ ';      /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<br />\n'; /* 各枝の末尾 */
gTreeOption['top']  = '<br />\n'; /* ツリー本体の最初 */
gTreeOption['btm']  = '';         /* ツリー本体の最後 */
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption);    // エントリリストのツリー化
createTreeList('commentlist',gTreeOption);  // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption);       // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption);     // リンクリストのツリー化
// -->
</script>

　　最後の部分だけ書き換えます。

createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('commentlist',gTreeOption);  // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption);       // 最新トラックバックリストのツリー化

…といっても必要のない「リンク」と「エントリー」を削るだけなのですが。

改造や設定などは元の記事そのままでできます。
「ツリー化カスタマイズ応用編」もあわせて使用できますので、もしよろしければお試しくださいませ。