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

WordPressのサイドバーリストをjQueryでツリー化する「wp_tree_makerプラグイン」を2.2にバージョンアップしました。

１．変更点

リストの第1階層にもツリーを表示するためのチェックボックスを追加しました。

wp_tree_maker管理画面

これまでのツリー表示（リストの第2階層以降に適用）

バージョンアップ後のツリー表示（リストの第1階層にも適用可能）

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

バージョンアップしたプラグインは以下のリンク先からダウンロードできます。

WordPressのサイドバーリストをjQueryでツリー化する「wp_tree_maker」プラグイン

WordPressのサイドバーリストをjQueryでツリー化する「wp_tree_maker」プラグインを紹介します。

プラグイン適用前

プラグイン適用後

このプラグインは、以前公開した「サイドメニューのツリー化プラグイン for WordPress」をjQueryで新たに作り直したものです。これにより、ツリー化の設定が格段に簡単になりました。

１．機能

本プラグインの主な機能は次の通りです。

• 階層構造のリストをツリー化します
• サブカテゴリーの多段階層にも対応しています
• ツリー化の設定は管理画面から行えます

２．プラグインのダウンロード・インストール

以下のリンクからプラグインをダウンロードしてください。

変更履歴

2011.05.24 v2.0 jQuery版
2011.05.26 v2.1 保存後に入力項目が表示されない不具合を修正
2011.12.03 v2.2 第1階層にもツリーを適用できるオプションを追加

wp_tree_maker_2_2.zip

アーカイブを展開し、中にあるwp_tree_makerフォルダをpluginsディレクトリにアップロードしてください。

アップロード後、管理画面で「Tree Maker」の有効化をクリックします。

３．プラグインの設定

「設定」→「Tree Maker」をクリック。

サイドバーのリストタイトルに用いている見出し要素名（h1～h6）とツリー化したいサイドバーのリストタイトルを設定します。ツリー化したいリストが複数ある場合はリストタイトルをカンマで区切ってください。

第1階層にもツリーを表示したい場合は、「第1階層もツリー化する」をチェックしてください。

４．CSS

すべてのデザインに対応しているわけではないので、ツリー化後のスタイルは適宜設定してください。このプラグインでは次のようなclass属性値を追加しています。

<h3>Categories</h3>
<ul class="tree">
  <li><a href="http://.../">ブログ</a>
    <ul>
      <li><a href="http://.../">カスタマイズ</a></li>
      <li class="tree_end"><a href="http://.../">テンプレート</a></li>
    </ul>
  </li>
  <li><a href="http://.../">日記</a>
    <ul>
      <li><a href="http://.../">お知らせ</a></li>
      <li class="tree_end"><a href="http://.../">趣味</a></li>
    </ul>
  </li>
</ul>

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 をそれぞれ入れ替えてください。