Top > WordPress > カスタマイズ > ツリー化 [全て開く]
2011年12月 3日

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

December 3,2011 10:10 AM
Tag:[, ]
Permalink

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

1.変更点

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

wp_tree_maker管理画面
wp_tree_maker管理画面

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

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

2.プラグインのダウンロード

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

WordPressのサイドバーリストをjQueryでツリー化する「wp_tree_maker」プラグイン
Comments [0] | Trackbacks [0]
2011年5月24日

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

May 24,2011 1:23 AM
Tag:[, , ]
Permalink

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

プラグイン適用前

プラグイン適用後

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

1.機能

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

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

2.プラグインのダウンロード・インストール

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

変更履歴

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」の有効化をクリックします。

管理画面

3.プラグインの設定

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

管理画面

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

管理画面

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

4.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>
Comments [2] | Trackbacks [0]
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...
Introduction
List of "ツリー化"
Recent Entries
Recent Comments
Recent Trackbacks
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site
loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.12