サイドメニューのツリー化プラグイン for WordPress
サイドメニューをツリー表示するプラグインを作成しました。
例えば、当サイトのテンプレートをデフォルトで利用している場合、各メニューリストは全て丸印のリストマークを表示するようにしていますが、カテゴリーリスト等のインデントされたリスト類はやや味気ないものになっています。
このプラグインを利用することでスクリーンショットのようなツリー表示に変更することができます。
ツリー化は他に色々なプラグインが出回っていると思いますが、当サイトで他のブログに適用しているカスタマイズを 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 をそれぞれ入れ替えてください。
≫ 遂に「小粋空間」が WordPress に対応！？ from TA.WA.GO.TO.
Movable Type を利用してのブログ運営では、あまりにも有名な「小粋空間」！以前、Moavble Type を利用していた私も本当に良く参考にさせ... [続きを読む]
≫ http://www.stealth2.net/?p=31 from affection.
以前からやってみたかったサイドメニューのツリー化なのですが、小粋空間様よりPluginが！「サイドメニューのツリー化プラグイン for WordPress... [続きを読む]
≫ Tree Maker Plugin from DAISUKI-JAM
サイドメニューのツリー化プラグインが小粋空間様から出ましたよー♪
サイドメニューのツリー化プラグイン for WordPress
早速導入させていただきま... [続きを読む]
≫ 小粋なテーマカスタマイズと修正その2 from LOVE!?
参考にさせていただいたエントリー
くろいおとなどっとこむブログ ? WordPress 2.1日本語化の覚え書き
2.1ではカテゴリーリストでリンクカ... [続きを読む]
≫ サイドメニューのツリー化 from PARADISE CLUB
小粋空間様 にて、配布されている 「WordPress」 ツリー化プラグインの紹... [続きを読む]
≫ 階層構造をツリー化：Tree Maker from Cha's Bar
Movable Type を利用されている方々には、本当に有名な「小粋空間」ですが、最近では WordPress に関しての plugin やテンプレート... [続きを読む]
≫ Wordpress + Tree Maker がさくっと動作しない件 from m_haseの日記
Wordpressをホームのサブディレクトリにインストールし、しかもブログのURLをホームになるようにカスタマイズしていると、Tree Makerが有効... [続きを読む]
≫ サイドバーのメニューをツリー化：tree-maker from Cha's Bar 2.0
Movable Type では、知らない人がいないのではないでしょうか・・・「小粋空間」というブログ。既にブログを解説されてから 3 年を経過しているそう... [続きを読む]
≫ WordPress備忘録 from 四月階段
素敵なテーマ、そしてカスタマイズ、プラグインをお借りいたしました。ありがとうございました。
... [続きを読む]
≫ サイドメニュー折りたたみ＆ツリー化 from SWEET WATER
先日ちらっと触れましたが、やっと2つのスクリプトが共存できるようになりましたヽ(´ー｀)ノ このカスタマイズに切っては切れないスクリプトを提供してくださっ... [続きを読む]
こんにちは。
いつも、ステキなカスタマイズ記事をありがとうゴザイマス。
とてもとても、参考にさせていただいております。
さっそく、サイドメニューのツリー化pluginを導入してみたのですが、上手く表示されないのです（泣
ソースを眺めて、とりあえずcssを以下のように修正してみました。
#sidebar .tree li,
#sidebar .tree li li,
#sidebar .tree li li li,
#sidebar li.end,
#sidebar li li.end,
#sidebar li li li.end,
#sidebar li li li.end,
#sidebar li li li li.end,
これでとりあえず表示するようにはなったのですが、どうも折りたたみとの相性が悪いのか、折りたたみを使用している箇所はツリー化されません。
折りたたみだとタグにidふっちゃうから、それで駄目なのかなぁ...？
自分でも調査はしているのですが、なにか良い解決策があれば、と思いコメントさせていただきました。
お手数をおかけしますが、よろしくお願いします。
yujiroさん、こんにちは。
今朝、こちらの記事を拝見してから そわそわしながら家の用事を終わらせて（笑）、やっと導入完了しましたｖ
問題なく導入できたようです。
ご報告とお礼まで。
こんにちは。
ツリー化プラグイン作ってくれないかなぁと思っていたら、なんとタイムリーな！
もちろんありがたく使わせていただいております。
うちも問題なく導入できてますよ^^
も...申し訳ありません！
cssは私の勘違いでゴザイマス。（うわ、むちゃくちゃハズカシイ...）
階層の数え方を間違っておりました（汗
あとはJavascriptとの関係が...うーん、yujiro様は両立されてますよね？
やはり私の設定がまずいのでしょうか...。
いつも参考にさせて頂いています。
週末にしようと思っていたツリー化、やってしまいました・・・何と 5 分で見事ツリー化に成功！！！感動です。今後とも素晴らしい投稿記事を期待しています（プレッシャーではありません・・・笑））
＞Tricksterさん
こんばんは。
コメントありがとうございます。
折りたたみとの両立はまた機会をみて確認させてください。
それではよろしくお願い致します。
＞ミッチさん
こんばんは。
ご利用＆トラックバックありがとうございます。
素早く頂いたコメントはカスタマイズ全盛期？の頃を彷彿とさせました（笑）。
＞さっちんさん
こんばんは。
ご利用ありがとうございます。
タイムリーということで大変良かったです。
うまく動作しているようでホッとしました。
＞Zero Cha Coolさん
こんばんは。
ご利用ありがとうございます。
それにしても5分とは、素晴らしいですね！
では次回の記事をどうぞお楽しみに。（笑）
どうもです。
昨日、思いがあって、他の plugin を使って表示しているサイドバーのリストをツリー表記に変更してみたのですが・・・な?んにもしないで（といっても本投稿記事の変更は実施しましたが）ツリー完成！
二重の感動を有難うございます！！！
＞Zero Cha Coolさん
こんにちは。
再びのご利用＆ご連絡ありがとうございます。
うまくできたようで良かったです。
結構、利用可能範囲が広いのかも知れませんね。
ではでは！
こんにちは。
WordPressの設定でも別になっているように、WordPressのURIとホームページのURIは異なる場合があります。
したがって、pluginディレクトリを取得するためには
get_settings('home');
ではなく
get_settings('siteurl');
を使っていただく方がよいかと思います。
＞masaaki_h1さん
お世話になります。
パスの件、ご指摘ありがとうございました。
プラグインは先程修正致しました。
はじめまして。お世話になっております。
tree-makerを使わせていただいております。
WordPress 3.0にバージョンアップしたのですが、
コメント、トラックバック共に表示されなくなりました。
何か対策はあるでしょうか。
お忙しいところ誠に申し訳ありません。
よろしくお願い致します。
お世話になります
tree-makerが働かない件の続報です。
「Commented entry list」プラグインが機能しなくなっていました。
No Response と表示されます。
そこで検索したところ修正のやり方がありました。
commented-entry-list.phpを開き
12.global $wpdb, $tablecomments, $tableposts;
↓
12.global $wpdb;
13.$tablecomments = $wpdb->comments;
14.$tableposts = $wpdb->posts;
70.global $wpdb, $tablecomments, $tableposts;
↓
70.global $wpdb;
71.$tablecomments = $wpdb->comments;
72.$tableposts = $wpdb->posts;
と修正すると表示されます。
ただし、tree-makerは機能していません。
よろしくお願い致します。
＞NIMITZさん
こんばんは。
ご指摘＆情報ありがとうございました。
「Commented entry list」プラグインのソースコード修正の件は当ブログのエントリーでも情報展開させて頂きます。感謝致します。
tree-makerについては少々お時間頂けますでしょうか。
それではよろしくお願い致します。
: June 27, 2010 1:05 AM＞NIMITZさん
こんばんは。
tree-makerをWordPress3.0に適用させたところ、正常に表示されることを確認致しました。
こちらで確認した環境ですが、当ブログの配布テーマを利用し、デフォルトプラグインと「Commented entry list」プラグインを有効にしました。
「正常に機能しない」とのことですので、まず、プラグインを適用した状態でHTMLソースに以下の内容が表示されることを確認願えますでしょうか。
</head>の直前
<link rel="stylesheet" href="http://user-domain/～/wp-content/plugins/tree-maker/tree-maker.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://user-domain/～//wp-content/plugins/tree-maker/maketree.js"></script>
<script type="text/javascript" src="http://user-domain/～//wp-content/plugins/tree-maker/treehandler.js" charset="shift_jis"></script></body>の直前
<script type="text/javascript">
treeMaker();
</script>表示されない場合、他のプラグイン（「Commented entry list」プラグインは有効のまま）を無効にして読み込まれるかどうかご確認願えますでしょうか。ちなみに、テーマファイルに以下の2行があれば、上記のコードは表示される認識です。
ヘッダー（header.php）
<?php wp_head(); ?>フッター（footer.php）
<?php wp_footer(); ?>WordPress 3.0の機能はすべて把握できていないので、認識誤りがありましたらご指摘ください。
それではよろしくお願い致します。
: June 27, 2010 2:24 AMお世話になっております。
お返事が遅れまして申し訳ありません。
結果ですが問題なくツリー化されました。
前回はサーバーのキャッシュを見ていたのかもしれません。
お騒がせいたしまして大変申し訳ありません。
ときどきこのキャッシュに騙されるのです。
結局Commented entry listプラグインが問題だったということですね。
問題はすべてクリアできました。
お忙しい中いろいろ教えていただきありがとうございました。
今後とも宜しくお願いいたします。
＞NIMITZさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは！
: June 30, 2010 2:25 AMあけましておめでとうございます。
今年もこっそりと（？）お世話になりますｗ
このプラグインなのですが、最新の3.0.4で有効にする際にエラーを吐きます。ただし、動作はします。
あと、折り畳み用JavaScriptのmenufolder.jsを使っていると、このプラグイン（maketree.js）が動作しなくなります。去年からこれに悩まされ続けています；；
ＭＴ時代にはどちらを使用していても動作していたので、WP上で動かない事はないと思うのですが・・・σ(゜∀゜にはさっぱり原因が分かりませんヽ(ー_ー )ノ
お暇な時にでも調べていただけると幸いですm(__)m
＞WINDさん
あけましておめでとうございます。
ご質問の件ですが、「エラーを吐きます」というのは具体的にどこにはきだされるのでしょうか。当方の環境で3.0.4で試してみましたがエラーらしきものが見当たりませんでした。
また、tree-makerとmenufolder.jsを併用する場合、次のように、フッタに記述されているwp_footer()のタグより後方に、折りたたみ用のスクリプトを設定してみてください。
…前略…
<?php wp_footer(); ?>
<script type="text/javascript">
<!--
FoldNavigation('category','on',false);
//-->
</script>
…後略…それではよろしくお願い致します。
: January 5, 2011 12:36 AMおはようございます。
どうもすみません。肝心な事を忘れていましたね。
「プラグインを有効化する際に、3文字分の予期しない出力が発生しました。“headers already sent” メッセージや、フィードやその他の問題に気づいた場合はプラグインを停止または削除してみてください。」
プラグインページから有効化をクリックし、有効になった直後にそのページ上部へ黄色背景で表示されます。
ちなみに、なぜか複数同時に有効にした場合はエラーが出ません。
フッターの件了解しました。のちほど試してみます。
ありがとうございましたー
早速試してみました。
…前略…
<script type="text/javascript">
treeMaker();
</script>
<script type="text/javascript">
<!--
FoldNavigation('category','on',false);
//-->
</script>
…後略…この状況だとカテゴリーしかツリーになりませんでした。
なので、フッターへの出力を解除し、
<script type="text/javascript">
<!--
treeMaker();
FoldNavigation('category','on',false);
//-->
</script>ツリー化したいメニューに直接treeMaker();を書く事で表示できるようになりました。
本体じゃなくtreehandler.jsが動いていないのでしょうか？＾＾；
＞WINDさん
回答に記載したのは一例なので、折りたたみを複数設定している場合は、同じようにwp_footer()のタグより後方に記述し、
…前略…
<?php wp_footer(); ?>
<script type="text/javascript">
<!--
FoldNavigation('aaa','on',false);
FoldNavigation('bbb','on',false);
FoldNavigation('ccc','on',false);
FoldNavigation('ddd','on',false);
FoldNavigation('eee','on',false);
FoldNavigation('fff','on',false);
//-->
</script>
…後略…という感じにしてください。
それではよろしくお願い致します。
: January 5, 2011 10:04 PMおはようございます。
すみません。あとでそれに気づきました＾＾；
無事表示されるようになりました！
それからエラーの件ですが、自己解決したぽいです。
どうやらプラグイン本体の文字コード保存形式を変更してたようです。
utf-8になってまして、shift-jisに直したらエラーが出なくなりました。
申し訳ありません。
ありがとうございました＾＾
こんにちは。初めましてです。
先日、WordPressを導入してこちらのテンプレートも使わせていただきましてツリー化も導入しようとやったんですが上手くいかず。
こちらのコメント欄にあることは大体やってみたんですが…。
それと最近の記事も日別でツリー化にしたいのですがそれは可能ですか？
ちょっと時間かかりそうなのでお時間あるときで結構です。よろしくお願いします。
＞sheerさん
こんばんは。
ツリー化プラグインについては改善版を作りましたのでそちらで再度ご確認願えますでしょうか（以下のURL）。
http://www.koikikukan.com/archives/2011/05/24-012345.php
また「最近の記事も日別でツリー化」は別途検討したいと思います。
それではよろしくお願い致します。
: May 25, 2011 2:31 AM返答ありがとうございます！
上記の記事より該当プラグインをインストール後、「設定」→「Tree Maker」のツリー化設定でCategory等入力後保存するんですが、保存後再度ツリー化設定の項目を確認してみると空白なんですが。
これはこれでいいんでしょうか。ちなみに見出し要素は更新されていました。
CSSファイルも同梱されていたんですが、テーマの中のCSSにツリー化に関連するクラスを新たに記載したほうがいいんでしょうか。
＞sheerさん
こんばんは。
ツリーは表示された、でよろしいでしょうか。
ご指摘の不具合を修正しましたので再度ダウンロードしてご確認ください。
CSSの追加について特に決まりはありませんので、sheerさんの管理しやすい方法を選択願います。
それではよろしくお願い致します。
: May 26, 2011 1:47 AMこんにちは。お返事が遅れて申し訳ありません。
結果から言うとまだ反映されていません。
私自信WordPressを細かいところまで理解出来ていない所もあるんですが。。
ちょっと聞きたいのですが、現在3カラム版で記事が左側に表示するテーマを使わせていただいてるんですが、最近のコメントやカテゴリの中身のタグをいじる場合、どこをいじったらいいんでしょう。
ウィジェットからみてもそれぞれのサイドバーにコンテンツは配置することは出来るけど各パーツの中身まで見れず、テーマの各ファイル（sidebar.phpやsidebar2.phpファイル等）の該当する箇所に直接記述すればいいんでしょうか。
初歩的な質問ですいません。
＞sheerさん
こんばんは。
ご質問の件ですが、「最近のコメント」や「カテゴリ」のマークアップを修正するには、WordPressの本体のプログラムを変更する必要があると思います（が、本来の解決にはならないように思われます）。
サイト拝見致しましたが、カテゴリリストのマークアップがプラグインで想定しているものと異なっている（ul-li-ul-liという階層になっておらずli要素にスタイルを定義してインデントしている）ようです。
原因不明なため思いつきの発言で恐縮ですが、サイドバーの「カテゴリ」に関するプラグインを何かご利用でしょうか。また、他のテーマに切り替えてもツリー化ができない事象に変化はないでしょうか。
「最近のコメント」は現状の表示では階層化されていないため、ツリー化の対象とならないように思われます。サイドバーに以下の設定を行えばツリー化されるかもしれません。
<li><h2>Recent Comments</h2>
<ul><?php get_recently_commented(); ?></ul>
</li>それではよろしくお願い致します。
: June 8, 2011 2:16 AMこんにちは。
カテゴリに関してのプラグインはCategory Order しか使ってないんですが。これを有効化してもしてなくても変化はないので使っていました。
ですが、再度これを無効化してから試したらCategoryに関してはツリー化されるようになりました・・！！以前の表記の仕方がおかしかったんでしょうか。。ありがとうございます。
それと上の「最近のコメント」に関して提示していただきました、表記の仕方とテーマの中のsidebar.phpのコメントの箇所は全く同じものでした。
最近の記事に関しては以下のようになっています。
お手数おかけしますがよろしくお願いします。
文字化けしてしまいましたね。すいません。
以下のようにすればちゃんと表示されますでしょうか。。
<li><h2>Recent Entries</h2>
<ul><?php get_archives('postbypost', '10','custom' ,'<li>' ,'</li>'); ?></ul>
</li>
＞sheerさん
こんばんは。
ご返事おそくなり申し訳ありません。
[30]で頂いた「最近の記事」のフォーマットでは残念ながらul -li -ul -li という2階層にならないようですので、ツリー化は行われません。
（プラグインの設計上、1階層のリストはツリー化を行わないようにさせて頂いてます）
それではよろしくお願い致します。
: June 22, 2011 2:28 AMこんばんはー。
対応ありがとうございます！お忙しい中申し訳ありません。
最近の記事は出来れば欲しいのですが優先順位的にはコメントのツリー化を対応させたいのです。コメント率が多いので見る側からしたら見にくそうなので＞＜；
現在、ツリー化スクリプトは『サイドメニューのツリー化プラグイン for WordPress』を使わせていただいておりましてCategoryはツリー化に成功しています。
説明されている記事では結構簡単に設置、修正出来るとしていますが、これはテーマのサイドバーのファイルを直接修正してもダメですよね。
でもウィジェットの『最近のコメント』の中身はいじれないのでどこを修正したらいいか分からないんですが。
基本的なことで申し訳ありませんがご教授いただけないでしょうか。すいません。お願いします。。
