前もって宣言していたとおり、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&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&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カスタマイズ講座さんにあるそのままでＯＫ。
最後の部分だけ書き換えます。
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化…といっても必要のない「リンク」と「エントリー」を削るだけなのですが。
改造や設定などは元の記事そのままでできます。
「ツリー化カスタマイズ応用編」もあわせて使用できますので、もしよろしければお試しくださいませ。
■fana [H] ... 2006/06/24（土） edit・delete
どもー、こんばんわ。
ありがとうございました。
おかげさまで導入成功です♪