サイドメニューのツリー化プラグイン for WordPress
サイドメニューをツリー表示するプラグインを作成しました。
例えば、当サイトのテンプレートをデフォルトで利用している場合、各メニューリストは全て丸印のリストマークを表示するようにしていますが、カテゴリーリスト等のインデントされたリスト類はやや味気ないものになっています。
このプラグインを利用することでスクリーンショットのようなツリー表示に変更することができます。
ツリー化は他に色々なプラグインが出回っていると思いますが、当サイトで他のブログに適用しているカスタマイズを WordPress にも反映させていきたいと思います。
2011.05.24:「WordPressのサイドバーリストをjQueryでツリー化する「wp_tree_maker」プラグイン」をリリースしましたので、そちらをご利用ください。
1.はじめに
1.1 当サイトのテンプレートをご利用の場合
プラグインは当サイトで配布しているテーマ(3カラム版)のデフォルト状態に適用可能な形で配布しています。インストールしてプラグインを有効にするだけで「Recent Comments」「Recent Trackbacks」「Categories」の各メニューリストがツリー化されます。
1.2 他のテンプレートをご利用の場合
「ツリー化プラグイン」を利用する場合、メニューリストのマークアップで下記のように青色のタグが利用されている必要があります。
<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>
また、このプラグインはメニューリストタイトルをキーにして、ツリー対象のメニューリストを検索するため、5項の内容にしたがって、スクリプトに埋め込むメニューリストタイトルを修正する必要があります。
CSS はプラグインに同梱されている tree-maker.css を適宜変更してください。
2.プラグインのダウンロード
下記のいずれかのリンクをクリックし、プラグインアーカイブをダウンロードしてください。
tree-maker.zip
/ tree-maker.lzh
2007.02.27 初版
2007.05.11 プラグインパス取得方法変更
3.プラグインのアップロード
ダウンロードしたアーカイブを解凍し、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
4.プラグインを有効にする
WordPress の管理画面より「Tree Maker」の有効化のリンクをクリックします。
5.カスタマイズ
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');
}
6.ツリー表示変更
デフォルト状態では冒頭のスクリーンショットのように、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);
}
を有効にして、上半分の設定をコメントアウトするか削除してください。
7.ツリー表示変更
ツリー画像を変更したい場合は、プラグインディレクトリにある、tree_lst.gif / tree_end.gif をそれぞれ入れ替えてください。