小粋空間  -  a cheap joke and a play on words site

サイドメニューのツリー化プラグイン for WordPress

2011.05.24：「WordPressのサイドバーリストをjQueryでツリー化する「wp_tree_maker」プラグイン」をリリースしましたので、そちらをご利用ください。

１．はじめに

１．１ 当サイトのテンプレートをご利用の場合

プラグインは当サイトで配布しているテーマ（3カラム版）のデフォルト状態に適用可能な形で配布しています。インストールしてプラグインを有効にするだけで「Recent Comments」「Recent Trackbacks」「Categories」の各メニューリストがツリー化されます。

１．２ 他のテンプレートをご利用の場合

「ツリー化プラグイン」を利用する場合、メニューリストのマークアップで下記のように青色のタグが利用されている必要があります。

<ul>
  <li><h2>Recent Comments</h2>
     <ul><?php get_recently_commented(); ?></ul>
  </li>
  <li><h2>Recent Trackbacks</h2>
     <ul><?php get_recently_trackbacked(); ?></ul>
  </li>
 
    :
 
</ul>

また、このプラグインはメニューリストタイトルをキーにして、ツリー対象のメニューリストを検索するため、５項の内容にしたがって、スクリプトに埋め込むメニューリストタイトルを修正する必要があります。

CSS はプラグインに同梱されている tree-maker.css を適宜変更してください。

２．プラグインのダウンロード

下記のいずれかのリンクをクリックし、プラグインアーカイブをダウンロードしてください。

tree-maker.zip / tree-maker.lzh

2007.02.27 初版
2007.05.11 プラグインパス取得方法変更

３．プラグインのアップロード

ダウンロードしたアーカイブを解凍し、tree-maker フォルダごと、wp-content/plugins 配下にアップロードしてください。アップロード後、下記のようなディレクトリ・ファイル構成になっていればOKです。

wp-content/
　　　plugins/
　　　　　tree-maker/
　　　　　　　　maketree.js
　　　　　　　　tree_end.gif
　　　　　　　　tree_lst.gif
　　　　　　　　treehandler.js
　　　　　　　　tree-maker.css
　　　　　　　　tree-maker.php

４．プラグインを有効にする

WordPress の管理画面より「Tree Maker」の有効化のリンクをクリックします。

５．カスタマイズ

treehandler.js を任意のエディタで開き、ツリー化したいメニューを記述します。カッコ内にはメニューリストのタイトルをそのまま記述してください。
デフォルトでは下記の設定、つまりメニューリストタイトルが「Recent Comments」「Recent Trackbacks」「Categories」となっているものに対してツリー化するようになっています。

function treeMaker() {
  tree('Recent Comments');
  tree('Recent Trackbacks');
  tree('Categories');
}

またメニュータイトルを日本語にしている場合は、下記のように日本語のタイトルと英語の名称（適当でいいです）してください。

function treeMaker() {
  tree('最近のコメント', 'comment');
  tree('最近のトラックバック', 'trackback');
  tree('カテゴリー', 'category');
}

６．ツリー表示変更

デフォルト状態では冒頭のスクリーンショットのように、2階層目のリストからツリー表示する設定にしています。
これを左のように、1階層目からツリー表示にしたい場合は、tree-maker.css を任意のエディタで開き、コメントアウトしている下半分の

#sidebar .tree li,
#links-left .tree li,
#links-right .tree li {
    padding: 0 0 0 16px;
    background: url(tree_lst.gif) no-repeat 5px 0em;
}
 
#sidebar li li.end,
#links-left li li.end,
#links-right li li.end {
    background-image: url(tree_end.gif);
}

を有効にして、上半分の設定をコメントアウトするか削除してください。

７．ツリー表示変更

ツリー画像を変更したい場合は、プラグインディレクトリにある、tree_lst.gif / tree_end.gif をそれぞれ入れ替えてください。