小粋空間: サイドメニューのツリー化プラグイン for WordPress

Top ＞ WordPress ＞カスタマイズ＞ツリー化＞サイドメニューのツリー化プラグイン for WordPress

2007年2月27日

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

Posted at February 27,2007 12:27 AM
Category：[ツリー化]
Tag：[Customize, Tree, WordPress]

サイドメニューのツリー化プラグイン 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');
}

６．ツリー表示変更

サイドメニューのツリー化プラグイン（1階層目からツリー化）デフォルト状態では冒頭のスクリーンショットのように、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 をそれぞれ入れ替えてください。

Posted by yujiro このページの先頭に戻る

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ 遂に「小粋空間」が WordPress に対応！？ from TA.WA.GO.TO.
Movable Type を利用してのブログ運営では、あまりにも有名な「小粋空間」！以前、Moavble Type を利用していた私も本当に良く参考にさせ... [続きを読む]

Tracked on February 27, 2007 3:12 AM

≫ http://www.stealth2.net/?p=31 from affection.
以前からやってみたかったサイドメニューのツリー化なのですが、小粋空間様よりPluginが！「サイドメニューのツリー化プラグイン for WordPress... [続きを読む]

Tracked on February 27, 2007 1:40 PM

≫ Tree Maker Plugin from DAISUKI-JAM
サイドメニューのツリー化プラグインが小粋空間様から出ましたよー♪ サイドメニューのツリー化プラグイン for WordPress 早速導入させていただきま... [続きを読む]

Tracked on February 27, 2007 2:08 PM

≫ 小粋なテーマカスタマイズと修正その2 from LOVE!?
参考にさせていただいたエントリーくろいおとなどっとこむブログ ? WordPress 2.1日本語化の覚え書き 2.1ではカテゴリーリストでリンクカ... [続きを読む]

Tracked on February 28, 2007 9:28 AM

≫ サイドメニューのツリー化 from PARADISE CLUB
小粋空間様にて、配布されている「WordPress」ツリー化プラグインの紹... [続きを読む]

Tracked on March 17, 2007 12:07 AM

≫ 階層構造をツリー化：Tree Maker from Cha's Bar
Movable Type を利用されている方々には、本当に有名な「小粋空間」ですが、最近では WordPress に関しての plugin やテンプレート... [続きを読む]

Tracked on April 7, 2007 3:58 PM

≫ Wordpress + Tree Maker　がさくっと動作しない件 from m_haseの日記
Wordpressをホームのサブディレクトリにインストールし、しかもブログのURLをホームになるようにカスタマイズしていると、Tree Makerが有効... [続きを読む]

Tracked on May 11, 2007 9:00 AM

≫ サイドバーのメニューをツリー化：tree-maker from Cha's Bar 2.0
Movable Type では、知らない人がいないのではないでしょうか・・・「小粋空間」というブログ。既にブログを解説されてから 3 年を経過しているそう... [続きを読む]

Tracked on May 29, 2007 7:59 AM

≫ WordPress備忘録 from 四月階段
素敵なテーマ、そしてカスタマイズ、プラグインをお借りいたしました。ありがとうございました。 ... [続きを読む]

Tracked on February 17, 2008 1:34 PM

≫ サイドメニュー折りたたみ＆ツリー化 from SWEET WATER
先日ちらっと触れましたが、やっと2つのスクリプトが共存できるようになりましたヽ(´ー｀)ノこのカスタマイズに切っては切れないスクリプトを提供してくださっ... [続きを読む]

Tracked on January 8, 2011 1:32 PM

こんにちは。
いつも、ステキなカスタマイズ記事をありがとうゴザイマス。
とてもとても、参考にさせていただいております。

さっそく、サイドメニューのツリー化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ふっちゃうから、それで駄目なのかなぁ...？

自分でも調査はしているのですが、なにか良い解決策があれば、と思いコメントさせていただきました。
お手数をおかけしますが、よろしくお願いします。

[1] Posted by Trickster : February 27, 2007 10:47 AM

yujiroさん、こんにちは。

今朝、こちらの記事を拝見してから　そわそわしながら家の用事を終わらせて（笑）、やっと導入完了しましたｖ

問題なく導入できたようです。
ご報告とお礼まで。

[2] Posted by ミッチ : February 27, 2007 2:13 PM

こんにちは。

ツリー化プラグイン作ってくれないかなぁと思っていたら、なんとタイムリーな！

もちろんありがたく使わせていただいております。

うちも問題なく導入できてますよ^^

[3] Posted by さっちん : February 27, 2007 3:54 PM

も...申し訳ありません！
cssは私の勘違いでゴザイマス。（うわ、むちゃくちゃハズカシイ...）
階層の数え方を間違っておりました（汗

あとはJavascriptとの関係が...うーん、yujiro様は両立されてますよね？
やはり私の設定がまずいのでしょうか...。

[4] Posted by Trickster : February 27, 2007 4:02 PM

いつも参考にさせて頂いています。
週末にしようと思っていたツリー化、やってしまいました・・・何と 5 分で見事ツリー化に成功！！！感動です。今後とも素晴らしい投稿記事を期待しています（プレッシャーではありません・・・笑））

[5] Posted by Zero Cha Cool : March 1, 2007 12:40 AM

＞Tricksterさん
こんばんは。
コメントありがとうございます。
折りたたみとの両立はまた機会をみて確認させてください。
それではよろしくお願い致します。

＞ミッチさん
こんばんは。
ご利用＆トラックバックありがとうございます。
素早く頂いたコメントはカスタマイズ全盛期？の頃を彷彿とさせました（笑）。

＞さっちんさん
こんばんは。
ご利用ありがとうございます。
タイムリーということで大変良かったです。
うまく動作しているようでホッとしました。

＞Zero Cha Coolさん
こんばんは。
ご利用ありがとうございます。
それにしても5分とは、素晴らしいですね！
では次回の記事をどうぞお楽しみに。（笑）

[6] Posted by yujiro : March 1, 2007 8:49 PM

どうもです。
昨日、思いがあって、他の plugin を使って表示しているサイドバーのリストをツリー表記に変更してみたのですが・・・な?んにもしないで（といっても本投稿記事の変更は実施しましたが）ツリー完成！

二重の感動を有難うございます！！！

[7] Posted by Zero Cha Cool : March 8, 2007 11:10 AM

＞Zero Cha Coolさん
こんにちは。
再びのご利用＆ご連絡ありがとうございます。
うまくできたようで良かったです。
結構、利用可能範囲が広いのかも知れませんね。
ではでは！

[8] Posted by yujiro : March 8, 2007 5:07 PM

こんにちは。
WordPressの設定でも別になっているように、WordPressのURIとホームページのURIは異なる場合があります。
したがって、pluginディレクトリを取得するためには
get_settings('home');
ではなく
get_settings('siteurl');
を使っていただく方がよいかと思います。

[9] Posted by masaaki_h1 : May 11, 2007 11:50 AM

＞masaaki_h1さん
お世話になります。
パスの件、ご指摘ありがとうございました。
プラグインは先程修正致しました。

[10] Posted by yujiro : May 11, 2007 9:40 PM

はじめまして。お世話になっております。
tree-makerを使わせていただいております。
WordPress 3.0にバージョンアップしたのですが、
コメント、トラックバック共に表示されなくなりました。
何か対策はあるでしょうか。
お忙しいところ誠に申し訳ありません。
よろしくお願い致します。

[11] Posted by NIMITZ : June 24, 2010 2:10 AM

お世話になります
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は機能していません。
よろしくお願い致します。

[12] Posted by NIMITZ : June 26, 2010 11:52 AM

＞NIMITZさん
こんばんは。
ご指摘＆情報ありがとうございました。
「Commented entry list」プラグインのソースコード修正の件は当ブログのエントリーでも情報展開させて頂きます。感謝致します。

tree-makerについては少々お時間頂けますでしょうか。
それではよろしくお願い致します。

[13] Posted by yujiro

: 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の機能はすべて把握できていないので、認識誤りがありましたらご指摘ください。

それではよろしくお願い致します。

[14] Posted by yujiro

: June 27, 2010 2:24 AM

お世話になっております。
お返事が遅れまして申し訳ありません。

結果ですが問題なくツリー化されました。
前回はサーバーのキャッシュを見ていたのかもしれません。
お騒がせいたしまして大変申し訳ありません。
ときどきこのキャッシュに騙されるのです。
結局Commented entry listプラグインが問題だったということですね。
問題はすべてクリアできました。
お忙しい中いろいろ教えていただきありがとうございました。
今後とも宜しくお願いいたします。

[15] Posted by NIMITZ : June 29, 2010 4:06 PM

＞NIMITZさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは！

[16] Posted by yujiro

: June 30, 2010 2:25 AM

あけましておめでとうございます。
今年もこっそりと（？）お世話になりますｗ

このプラグインなのですが、最新の3.0.4で有効にする際にエラーを吐きます。ただし、動作はします。

あと、折り畳み用JavaScriptのmenufolder.jsを使っていると、このプラグイン（maketree.js）が動作しなくなります。去年からこれに悩まされ続けています；；
ＭＴ時代にはどちらを使用していても動作していたので、WP上で動かない事はないと思うのですが・・・σ(゜∀゜にはさっぱり原因が分かりませんヽ(ー_ー )ノ

お暇な時にでも調べていただけると幸いですm(__)m

[17] Posted by WIND : January 3, 2011 3:07 PM

＞WINDさん
あけましておめでとうございます。
ご質問の件ですが、「エラーを吐きます」というのは具体的にどこにはきだされるのでしょうか。当方の環境で3.0.4で試してみましたがエラーらしきものが見当たりませんでした。

また、tree-makerとmenufolder.jsを併用する場合、次のように、フッタに記述されているwp_footer()のタグより後方に、折りたたみ用のスクリプトを設定してみてください。

…前略…
<?php wp_footer(); ?>
<script type="text/javascript">
<!--
FoldNavigation('category','on',false);
//-->
</script>
…後略…

それではよろしくお願い致します。

[18] Posted by yujiro

: January 5, 2011 12:36 AM

おはようございます。

どうもすみません。肝心な事を忘れていましたね。

「プラグインを有効化する際に、3文字分の予期しない出力が発生しました。“headers already sent” メッセージや、フィードやその他の問題に気づいた場合はプラグインを停止または削除してみてください。」

プラグインページから有効化をクリックし、有効になった直後にそのページ上部へ黄色背景で表示されます。
ちなみに、なぜか複数同時に有効にした場合はエラーが出ません。

フッターの件了解しました。のちほど試してみます。

ありがとうございましたー

[19] Posted by WIND : January 5, 2011 9:58 AM

早速試してみました。

…前略…
<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が動いていないのでしょうか？＾＾；

[20] Posted by WIND : January 5, 2011 10:27 AM

＞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>
…後略…

という感じにしてください。
それではよろしくお願い致します。

[21] Posted by yujiro

: January 5, 2011 10:04 PM

おはようございます。

すみません。あとでそれに気づきました＾＾；
無事表示されるようになりました！

それからエラーの件ですが、自己解決したぽいです。
どうやらプラグイン本体の文字コード保存形式を変更してたようです。
utf-8になってまして、shift-jisに直したらエラーが出なくなりました。
申し訳ありません。

ありがとうございました＾＾

[22] Posted by WIND : January 6, 2011 11:21 AM

こんにちは。初めましてです。
先日、WordPressを導入してこちらのテンプレートも使わせていただきましてツリー化も導入しようとやったんですが上手くいかず。
こちらのコメント欄にあることは大体やってみたんですが…。
それと最近の記事も日別でツリー化にしたいのですがそれは可能ですか？
ちょっと時間かかりそうなのでお時間あるときで結構です。よろしくお願いします。

[23] Posted by sheer : May 22, 2011 12:08 PM

＞sheerさん
こんばんは。
ツリー化プラグインについては改善版を作りましたのでそちらで再度ご確認願えますでしょうか（以下のURL）。
http://www.koikikukan.com/archives/2011/05/24-012345.php
また「最近の記事も日別でツリー化」は別途検討したいと思います。
それではよろしくお願い致します。

[24] Posted by yujiro

: May 25, 2011 2:31 AM

返答ありがとうございます！
上記の記事より該当プラグインをインストール後、「設定」→「Tree Maker」のツリー化設定でCategory等入力後保存するんですが、保存後再度ツリー化設定の項目を確認してみると空白なんですが。
これはこれでいいんでしょうか。ちなみに見出し要素は更新されていました。
CSSファイルも同梱されていたんですが、テーマの中のCSSにツリー化に関連するクラスを新たに記載したほうがいいんでしょうか。

[25] Posted by sheer : May 25, 2011 10:05 PM

＞sheerさん
こんばんは。
ツリーは表示された、でよろしいでしょうか。
ご指摘の不具合を修正しましたので再度ダウンロードしてご確認ください。
CSSの追加について特に決まりはありませんので、sheerさんの管理しやすい方法を選択願います。
それではよろしくお願い致します。

[26] Posted by yujiro

: May 26, 2011 1:47 AM

こんにちは。お返事が遅れて申し訳ありません。
結果から言うとまだ反映されていません。
私自信WordPressを細かいところまで理解出来ていない所もあるんですが。。

ちょっと聞きたいのですが、現在3カラム版で記事が左側に表示するテーマを使わせていただいてるんですが、最近のコメントやカテゴリの中身のタグをいじる場合、どこをいじったらいいんでしょう。
ウィジェットからみてもそれぞれのサイドバーにコンテンツは配置することは出来るけど各パーツの中身まで見れず、テーマの各ファイル（sidebar.phpやsidebar2.phpファイル等）の該当する箇所に直接記述すればいいんでしょうか。
初歩的な質問ですいません。

[27] Posted by sheer : June 5, 2011 6:17 PM

＞sheerさん
こんばんは。
ご質問の件ですが、「最近のコメント」や「カテゴリ」のマークアップを修正するには、WordPressの本体のプログラムを変更する必要があると思います（が、本来の解決にはならないように思われます）。

サイト拝見致しましたが、カテゴリリストのマークアップがプラグインで想定しているものと異なっている（ul-li-ul-liという階層になっておらずli要素にスタイルを定義してインデントしている）ようです。

原因不明なため思いつきの発言で恐縮ですが、サイドバーの「カテゴリ」に関するプラグインを何かご利用でしょうか。また、他のテーマに切り替えてもツリー化ができない事象に変化はないでしょうか。

「最近のコメント」は現状の表示では階層化されていないため、ツリー化の対象とならないように思われます。サイドバーに以下の設定を行えばツリー化されるかもしれません。

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

それではよろしくお願い致します。

[28] Posted by yujiro

: June 8, 2011 2:16 AM

こんにちは。
カテゴリに関してのプラグインはCategory Order しか使ってないんですが。これを有効化してもしてなくても変化はないので使っていました。

ですが、再度これを無効化してから試したらCategoryに関してはツリー化されるようになりました・・！！以前の表記の仕方がおかしかったんでしょうか。。ありがとうございます。

それと上の「最近のコメント」に関して提示していただきました、表記の仕方とテーマの中のsidebar.phpのコメントの箇所は全く同じものでした。

最近の記事に関しては以下のようになっています。

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

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

１．はじめに

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

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

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

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

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

５．カスタマイズ

６．ツリー表示変更

７．ツリー表示変更

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

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