TopWordPress > カスタマイズ > ツリー化 > 2007年2月
2007年2月27日

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

February 27,2007 12:27 AM
Tag:[, , ]
Permalink

サイドメニューのツリー化プラグイン 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.ツリー表示変更

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

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

7.ツリー表示変更

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

Comments [32] | Trackbacks [10]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3