TreeOrder

記事、ウェブページ、コンテンツデータのドラッグ&ドロップによるツリー順管理を提供する Movable Type プラグインです。

動作要件

• Movable Type 8 / Movable Type 9

インストール

1. TreeOrder ディレクトリの中身を Movable Type のインストールディレクトリに配置します。

   mt/
   ├── plugins/
   │   └── TreeOrder/          ← plugins/TreeOrder をコピー
   │       ├── config.yaml
   │       ├── lib/
   │       └── tmpl/
   └── mt-static/
       └── plugins/
           └── TreeOrder/      ← mt-static/plugins/TreeOrder をコピー
               ├── js/
               └── css/
   

2. Movable Type の管理画面にアクセスし、システムメニューの「プラグイン」で TreeOrder が表示されていることを確認してください。

ライセンス認証

TreeOrder プラグインを使用するには、ライセンスキーの認証が必要です。

1. MT管理画面の システムメニュー → プラグイン → TreeOrder → 設定 を開きます。
2. 「ライセンスキー」欄にライセンスキーを入力し、「認証」ボタンをクリックします。
3. 認証が完了したら「変更を保存」をクリックして設定を保存します。

ライセンスが未認証の場合、TreeOrder 管理画面にエラーメッセージが表示されます。

ライセンスキーは ライセンス管理 ページでご確認ください。

機能

管理画面でのツリー順管理

記事一覧、ウェブページ一覧、コンテンツデータ一覧の各画面に「TreeOrder 表示」リンクが追加されます。このリンクをクリックすると、ドラッグ&ドロップでツリー構造の並び替えを行える管理ページが表示されます。

ツリー順の初期化

「ツリー順を初期化」ボタンをクリックすると、モーダルダイアログが表示され、以下のいずれかを選択できます。

• IDの昇順（古い順）: 作成が古いものから順に並べます
• IDの降順（新しい順）: 作成が新しいものから順に並べます
• キャンセル: 初期化を中止します

初期化を実行すると、既存のツリー順データはすべてリセットされ、親子関係なしの1階層の並びで作り直されます。

ドラッグ&ドロップによる並び替え

• アイテムの左端のハンドル（≡）をドラッグして並び替え
• 他のアイテムの上にドロップすると子アイテムとして配置

インデント / アウトデントボタン

各アイテムに ← → ボタンが表示されます。

• ← （アウトデント）: アイテムを1階層上に移動
• → （インデント）: アイテムを1階層下に移動（直前のアイテムの子になる）

ドラッグ&ドロップでの階層変更が難しい場合に便利です。

データの読み込み

• さらに読み込む: 次のページ分のアイテムを追加読み込み
• すべて読み込む: 未読み込みのアイテムを一括読み込み（200件以上ある場合は確認ダイアログが表示されます）

プラグイン設定

サイトスコープのプラグイン設定で、以下の項目を変更できます。

最大階層数の設定

オブジェクト種別ごとに、ツリーの入れ子（ネスト）にできる最大階層数を制限できます。

• 0（デフォルト）: 無制限。何階層でも入れ子にできます。
• 1: フラットリスト。入れ子不可で、並び順の変更のみ可能です。
• 2以上: 指定した階層数まで入れ子を許可します。例えば 2 なら、親→子の1段階の入れ子まで許可されます。

最大階層数に達したアイテムをさらにインデントしようとすると、エラーメッセージが表示されます。ドラッグ&ドロップによる制限を超える階層への移動も自動的にブロックされます。

【ご利用上の注意】

最大階層数を現在より浅く変更する場合は、先にTreeOrder管理画面でツリー構造を手動で調整してから設定を変更してください。たとえば、現在3階層まで使用しているツリーの最大階層数を2に変更する場合、先に3階層目のアイテムをアウトデント（←ボタン）やドラッグ&ドロップで2階層以内に収めてから保存し、その後プラグイン設定で最大階層数を変更してください。設定変更後は、制限を超える階層へのインデントやドラッグ&ドロップが自動的にブロックされます。

自動追跡

• 記事・ウェブページ・コンテンツデータを新規作成すると、自動的にツリーの先頭に追加されます。
• 削除すると、ツリーからも自動削除されます（そのアイテムの子は、一番上の階層に移動します）。

テンプレートタグ（テンプレート編集・開発者向け）

ブログやサイトのテンプレート（MTML）に記述して、ツリー順で記事・ページ・コンテンツデータを表示するためのタグです。

ブロックタグ

mt:TreeOrder

ツリー順にオブジェクトをループ出力します（深さ優先順）。

<mt:TreeOrder class="entry" blog_id="1" limit="10">
  <div style="margin-left: <mt:TreeOrderDepth>em;">
    <mt:EntryTitle>
  </div>
</mt:TreeOrder>
<mt:TreeOrder class="page">
  <mt:PageTitle> (depth: <mt:TreeOrderDepth>)
</mt:TreeOrder>
<mt:TreeOrder class="content_data" content_type="ニュース">
  <mt:ContentLabel>
</mt:TreeOrder>

mt:TreeOrderAncestors

現在のアイテムの祖先をルートから順に出力します。mt:TreeOrder ブロック内で使用してください。

<mt:TreeOrder class="entry">
  <mt:EntryTitle>
  パンくず:
  <mt:TreeOrderAncestors glue=" &gt; ">
    <mt:EntryTitle>
  </mt:TreeOrderAncestors>
</mt:TreeOrder>

mt:TreeOrderDescendants

現在のアイテムの子孫を深さ優先順で出力します。

<mt:TreeOrder class="entry" top_level_only="1">
  <mt:EntryTitle> の子孫:
  <mt:TreeOrderDescendants max_depth="3" include_current="1">
    <div style="margin-left: <mt:TreeOrderDepth>em;">
      <mt:EntryTitle>
    </div>
  </mt:TreeOrderDescendants>
</mt:TreeOrder>

mt:TreeOrderChildren

現在のアイテムの直接の子アイテムのみを出力します。

<mt:TreeOrder class="page">
  <mt:PageTitle>
  <mt:TreeOrderChildren>
    - <mt:PageTitle>
  </mt:TreeOrderChildren>
</mt:TreeOrder>

mt:TreeOrderParent

現在のアイテムの親アイテムのコンテキストで1回だけ実行されます。

<mt:TreeOrder class="entry">
  <mt:EntryTitle>
  <mt:TreeOrderParent>
    (親: <mt:EntryTitle>)
  </mt:TreeOrderParent>
</mt:TreeOrder>

mt:TreeOrderSiblings

現在のアイテムの兄弟アイテム（同じ親を持つアイテム）を出力します。

<mt:TreeOrder class="entry">
  <mt:EntryTitle> の兄弟:
  <mt:TreeOrderSiblings include_current="0">
    <mt:EntryTitle>
  </mt:TreeOrderSiblings>
</mt:TreeOrder>

ファンクションタグ

コンディショナルタグ

使用例

ナビゲーションメニュー（ネスト対応）

<nav>
<mt:TreeOrder class="page" top_level_only="1">
  <mt:TreeOrderIsFirst><ul></mt:TreeOrderIsFirst>
  <li>
    <a href="<mt:PagePermalink>"><mt:PageTitle></a>
    <mt:TreeOrderHasChildren>
      <ul>
      <mt:TreeOrderChildren>
        <li><a href="<mt:PagePermalink>"><mt:PageTitle></a></li>
      </mt:TreeOrderChildren>
      </ul>
    </mt:TreeOrderHasChildren>
  </li>
  <mt:TreeOrderIsLast></ul></mt:TreeOrderIsLast>
</mt:TreeOrder>
</nav>

パンくずナビゲーション

<mt:TreeOrder class="page">
  <mt:TreeOrderHasParent>
    <nav aria-label="breadcrumb">
      <ol>
        <mt:TreeOrderAncestors>
          <li><a href="<mt:PagePermalink>"><mt:PageTitle></a></li>
        </mt:TreeOrderAncestors>
        <li aria-current="page"><mt:PageTitle></li>
      </ol>
    </nav>
  </mt:TreeOrderHasParent>
</mt:TreeOrder>