ツリービューをリストから直感的に作成できるWordPressプラグイン「TreeView On Contents」

階層とアイテムの構造を視覚的に表現するツリービュー。

テキストのみではどうしても分かりにくかったり、冗長になってしまうのでツリー表示をよく使うんですが、ウェブサイトに掲載するとなると割と面倒です。

ツリービューの表示は画像を使ったりCSSを工夫したりしているのをよく見て真似てみたんですが、あとから一部を変更したいときに手間がかかります。┗ ̄∟⊥といった記号でAAは型崩れしやすいし、変更もややこしい。

画像として掲載する場合は画像を編集するまではいいんですが、アップロードして差し替える手間が加わります。ものぐさな性分なのもで、この差し替え作業が煩わしいんです。

CSSとアイコンで表現する場合は、こことここを入れ替えて、これをあっちに持っていきたいというときにややこしくなる。また、時間が経つとやり方を忘れたりもします。

そんな理由でいい方法はないかといろいろ試していた時に出会ったのが、ol,ulのリストをツリービュー形式にしてくれる「TreeView On Contents」でした。「jsTree」というjQueryプラグインを用いているとのこと。このプラグインの存在を知らなかったことは横に置いておいて、TreeVeiw On Contentsのことに戻ると、

めちゃくちゃ便利です。

階層化させるときの移動のコツさえつかめば、項目のドラッグ・アンド・ドロップであっという間に入れ替えられます。

ツリービュー・オン・コンテンツでアイテムをドラッグしているところ
ツリービュー・オン・コンテンツでアイテムをドラッグしているところ。この状態でドロップすれば果菜類の子リストになる。

なにがいいかって、リスト項目をドラッグアンドドロップで階層化できるわ入れ替えられるわ、操作画面から項目を追加できるわと、やりたいことが全部できることです。おまけにアイコンも変更できて至れり尽くせり。

HTMLもclassが付加されるだけなので、手作業での編集もしやすい。いまではツリー表示が必要でないときでも、リストの編集のために使っています。

TreeView On Contentsの使い方

TreeView On Contentsの導入はこちらよりダウンロードするか、新規プラグインから「TreeView On Contents」で検索してインストールするだけ。設定項目はありません。

WordPress用プラグイン、ツリービューコンテンツ
WordPressプラグイン、ツリービューコンテンツ

すると投稿エディタのツール一覧の右上に「Insert TreeView」のボタンができるので、ツリービューにしたいリストを全て選択したうえでそのボタンをクリック。

ワードプレス用プラグインツリービュー・オン・コンテンツ
TreeView On Contents

開いた画面で移動したい項目をドラッグして、目的の場所でドロップするだけ。操作対象となっている項目の下には赤線が表示されるので迷うこともありません。

同じ階層の項目同士なら順番を入れ替えられますし、階層化させたいときは、親となる項目に重ねてドロップ。一番上の階層に移動させたければ、一番上の項目にドロップするだけ。

右で表示されるコンテキストメニューからはアイコンの種類を変更したり、項目を追加することができます。

ツリービューが簡単に作れるツリー・オン・ビューのコンテキストメニュー
ツリー・オン・ビューのコンテキストメニュー。アイコンの種類を選べるだけでなく、項目の追加といった操作もできる。

上のボタンから表示形式も選択できるので、ファイルとフォルダを付加しない普通のツリー構造も表現できます。あとは「挿入」ボタンを押せば、リストが作成されます。ソースにはTreeViewのタグのほかにはclassが付加されているだけなので、編集もしやすいです。

下のリストはWikipediaの野菜の一覧よりコピーして抜粋したものですが、

  • 果菜類
  • ナス – 小茄子・茄子・長なす・大長茄子
  • ペピーノ
  • トマト – ミニトマト・フルーツトマト
  • タマリロ – ツリートマト、こだちトマト
  • タカノツメ
  • トウガラシ
  • シシトウガラシ
  • 穀物類
  • トウモロコシ
  • マメ類
  • アズキ
  • インゲンマメ
  • エンドウ
  • 枝豆(エダマメ)
  • 発芽野菜
  • スプラウト
  • モヤシ
  • かいわれ大根
  • 果実的野菜
  • イチゴ
  • スイカ
  • メロン

上のリストもちょいちょいといじれば

      • 果菜類
        • シシトウガラシ
        • トウガラシ
        • トマト – ミニトマト・フルーツトマト
        • タカノツメ
        • ペピーノ
        • タマリロ – ツリートマト、こだちトマト
        • ナス – 小茄子・茄子・長なす・大長茄子
      • 穀物類
        • 枝豆(エダマメ)
        • エンドウ
        • インゲンマメ
        • マメ類
        • アズキ
        • トウモロコシ
      • 発芽野菜
        • スプラウト
          • かいわれ大根
          • モヤシ
      • 果実的野菜
        • メロン
        • スイカ
        • イチゴ

きれいなツリーになります。

バカの一つ覚えみたいに繰り返していますが、これ、分かりやすくて使いやすいです。

スポンサーリンク

WordPress