EasyTree プラグイン
概要
独自のメニューと固定ページ、カテゴリー、タグ、作成者が含まれた完璧なドロップダウン・ツリー・ナビゲーションを表示します。
特徴
- サイト内の固定ページ、カテゴリー、タグ、作成者のツリー・ナビジェーションを表示
- オプションで作成者も表示
- 専用のウイジェット
- サイトのどこでも配置可能
- ショートコード
[ easytree ]で投稿、固定ページに挿入 - メニューに EasyTree 専用テーマ
- 日本語表示ファイルが別途有り
- WordPress 公式プラグイン
- 超シンプルですがソースを少し修正するだけで高度な動作も可能
インストール
「ダッシュボード」->「プラグイン」->「新規追加」->「EasyTree 」で検索。EasyTree を見つけたら「今すぐインストール」->「プラグインを有効化」をします。
日本語化ファイル
設定は英語表示です。日本語表示に変更します。
以下をクリックして日本語表示のファイルをダウンロードします。
ダウンロード ： 
EasyTree 1.3 プラグイン 日本語化ファイル (4.9 KB, 作成 2016年5月6日)
ダウンロードファイルから以下のファイルを取り出し、
- easytree-ja.po
- easytree-ja.mo
それを以下のフォルダにFTPでアップロードします。
/wp-content/plugins/easytree/languages フォルダ
設定
「ダッシュボード」->「設定」->「EasyTree」を選択します。
ページを除外：
表示したくない固定ページのID番号をカンマで区切って入力します。
作成者を表示：
作成者専用のツリー・ナビゲーションを表示するかです。「はい」は表示、「いいえ」は非表示です。
作成者を除外：
作成者のツリー・ナビゲーションから『だけ』除外するユーザーのID番号をカンマで区切って入力します。但しダッシュボードのユーザー一覧を見てもユーザーIDらしき番号は判りません。ユーザーが登録されている上から１，２，３です（汗）。
ここで除外するのは作成者のツリー・ナビゲーションだけです。固定ベージ、カテゴリー、タグ下のツリー・ナビゲーションに該当するユーザーがあってもそこからは除外しません。
空の分類を表示：
これは「未分類」のカテゴリーと思われます。しかし英語のWordPressは「empty」では無いかと・・（想像）。それで動作しないのではないかと思っています。
スキン：
ツリー・ナビゲーションのアイコンや表示を変えるための４つのテーマが用意されています。それを選択できます。デモも有ります。
- Lion
- Windows 8
- Windows 7
- Windows XP
EasyTree にメニューを追加
ツルー・ナビゲーションに特定の記事や他サイトのリンク等をメニューとして追加出来ます。以下は他サイトのリンクへの例です。
ダッシュボードから新規メニューで新しく追加します。
途中の細かい作業は省略しますが、カスタムリンクから以下の「WordPress.org」と「EasyTreePlugin 英語」を追加します。
「WordPress.org」はフォルダ扱いにするのでURLは「#」にします。
「EasyTreePlugin 英語」は別サイトを表示するのでネットワークのURLを入力します。
最後にテーマの位置に追加されている「EasyTree」をチェックして「メニューを保存」ボタンをクリックします。
結果は以下のとおりです。
ぜひ、お試しください。
EasyTree用のウイジェット
EasyTree用のウイジェットが追加されています。
通常のウイジェット同様にサイドバーに追加できます。
ウイジェット内にサイトマップを表示する事ができます。
高度な操作
EasyTreeの設定の画面で出来ることは限られています。機能も限定されているように見えます。しかしEasyTreeはもっと高度な操作が出来るように設計されています。その情報も公開（英語）されています。以下のサンプル画像を御覧ください。
▼ ノードのアイコンを表示・非表示
var _settings = {
allowActivate: true,
data: null,
dataUrl: null,
dataUrlJson: null,
disableIcons: false,
enableDnd: false, // drag 'n' drop
ordering: null, // ordered || orderedFolder
slidingTime: 100,
minOpenLevels: 0,
// events
building: null,
built: null,
toggling: null,
toggled: null,
opening: null,
opened: null,
openLazyNode: null,
closing: null,
closed: null,
canDrop: null,
dropping: null,
dropped: null,
stateChanged: null
};
jquery.easytree.js ファイルの46行目を修正します。
- disableIcons: false, ：アイコンを表示（デフォルト）
- disableIcons: true, ：アイコンを非表示
でも、これでは動作しません。実際の修正は縮小版の jquery.easytree.min.js を文字列検索しながらの修正となります。jquery.easytree.js は修正する為のものでは無く、見た後に jquery.easytree.min.js を作るためのものです。
▼ 多彩な表現
該当するCSSを修正するだけです。ココを参考にしてください。
▼ ノードをドラッグ＆ドロップで移動
「ノードのアイコンを表示・非表示」と同じやり方です。
- enableDnd: false, ：出来ない（デフォルト）
- enableDnd: true, ：出来る
ココにデモが有ります。画面が移動すると元に戻るので使い方は限定されます。
▼ 動的にノードを操作
やり方はコチラを参照してください。
ノードの開閉速度の調整
下位のノードが展開される時、又は閉じる時の速度が変更できます。
「ノードのアイコンを表示・非表示」と同じやり方です。
「slidingTime: 100, 」の数値部分を大きくすると遅くなります。これに関しては説明はココ、動作デモはココです。
初期表示は全てのノードを開いた状態
「ノードのアイコンを表示・非表示」と同じやり方です。
「minOpenLevels: 0, 」の数値部分を変更します。
- minOpenLevels: 0, ：全て閉じる（デフォルト）
- minOpenLevels: 1, ：下位の１階層は開く。６なら下位の６階層まで開く。
上記以外のデフォルトの変更
ココに説明が有ります。少し勉強するか、ネット検索したら出来るような気がします。JavaScriptをほとんど知らない私が出来たのですから大丈夫です。
備考
- JavaScript と JQueryui は知らないも同じなので高度な操作は配布サイトに今後質問して確認する予定です。
- 少し勉強すればかなりのカスタマイズが可能になります。
- EasyTree オンラインマニュアルの情報を見れば独自のツリー・ナビゲーションの作成も可能です。
以上。