TopWordPress > カスタマイズ > ツリー化 > 2011年5月
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]
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