折りたためるツリービュープラグイン「TreeView On Contents」の使い方【WordPress】

折りたたみ出来るツリービュープラグイン「TreeView On Contents」の紹介です。(作者さんページ

具体的には、以下↓のような事が出来ます。

■ネットで稼ぐ方法!!

    • ネットビジネス
      •  アフィリエイト
        • 成果報酬型
        • クリック報酬型
          • adclick
          • adsense
        • PV報酬型
          • NAVER
      • ドロップシッピング
      • オークション
      • FX
      • youtube
      • クラウドワークス

■ネットで稼ぐ方法!!

    • ネットビジネス
      •  アフィリエイト
        • 成果報酬型
        • クリック報酬型
          • adclick
          • adsense
        • PV報酬型
          • NAVER
      • ドロップシッピング
      • オークション
      • FX
      • youtube
      • クラウドワークス

■ネットで稼ぐ方法!!

    • ネットビジネス
      •  アフィリエイト
        • 成果報酬型
        • クリック報酬型
          • adclick
          • adsense
        • PV報酬型
          • NAVER
      • ドロップシッピング
      • オークション
      • FX
      • youtube
      • クラウドワークス

■ネットで稼ぐ方法!!

    • ネットビジネス
      •  アフィリエイト
        • 成果報酬型
        • クリック報酬型
          • adclick
          • adsense
        • PV報酬型
          • NAVER
      • ドロップシッピング
      • オークション
      • FX
      • youtube
      • クラウドワークス

ちなみにこれは、「jQuery Treeview」というライブラリを使って実装されています。(作者は「Jorn Zaefferer氏」)

このライブラリは「JQuery.js」と「jquery.treeview.js」と「jquery.treeview.css」という3つのファイルを取り込めば割りと簡単に扱う事が出来ます。ただ、このプラグインの利便性の高さには敵いません。

導入方法

WordPressの「プラグイン」→「新規追加」の画面で、検索欄に「Treeview On Contents Plugin」と打ってインストールするだけです。

treeview

使い方

list(ol、ulどっちでも良い)を作る

list


list部分をドラッグで選択して、ツールバーの「Insert TreeVire」を押してショートコードを導入する

icon


「Insert TreeVire」を押すと、右記画像のようなGUI画面が出現し、ツリーをグラフィカルに操作する事が出来ます。また右クリックを押せばメニューも出す事が出来ます。

menu

GUI画面説明

ツリーのデザインをいじる方法

CSSをいじる際は必ずバックアップを取ってから行いましょう!!

css

ツリーのデザインは「jquery.treeview.css」というCSSで定められてます。

以下の場所に入ってます。

wp-content/plugins/treeview-on-contents/css/jquery.treeview.css

デフォルトだと、行間が微妙に狭い気がしますので広げる事をオススメします\(^o^)/

あと「フォルダ」とか「ファイル」のアイコン画像などは以下の場所に入っています。

wp-content/plugins/treeview-on-contents/css/images

アイコンを変える事で何か使い道があるかもしれません!(・∀・)

html

ツリーのデザインはhtmlで直接編集する事でも変える事が出来ます。

具体的には、以下の様な事が出来ます。

  • ツリーを閉じた状態で表示させる
  • ツリーを開くのをゆっくりにする(ぬる~って開く)
  • クッキーを保持して、離脱時の状態を次回訪問時に反映させる

詳しくは以下のページとか参考にしてみてください!\(^o^)/
グラフィックデザイナーのためのCSSレイアウトメモ : Ajaxライブラリ使用サンプル集「手軽なツリービュー」

おわり

スポンサーリンク