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

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

News

各種ブログテンプレート

2007年2月27日

エントリー本文

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

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

サイドメニューのツリー化プラグイン for WordPress サイドメニューをツリー表示するプラグインを作成しました。

例えば、当サイトのテンプレートをデフォルトで利用している場合、各メニューリストは全て丸印のリストマークを表示するようにしていますが、カテゴリーリスト等のインデントされたリスト類はやや味気ないものになっています。
このプラグインを利用することでスクリーンショットのようなツリー表示に変更することができます。

ツリー化は他に色々なプラグインが出回っていると思いますが、当サイトで他のブログに適用しているカスタマイズを WordPress にも反映させていきたいと思います。

１．はじめに

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

プラグインは当サイトで配布しているテーマ（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 ReTweet This!

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

人気エントリー

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

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

さっそく、サイドメニューのツリー化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

コメントする

greeting

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

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