Movable Type の記事やページの並び順、もっと自由に管理しませんか？「 TreeOrder 」プラグインのご紹介
目次
Movable Type でサイトを運営していると、「記事やページ、コンテンツデータの表示順をもう少し自由に変えたいな」と思う場面、ありませんか？
グローバルメニューの項目を並び替えたい、FAQ の質問順を整理したい、スタッフ紹介を役職順にしたい。でも Movable Type の標準機能では、記事の並び順は基本的に公開日やIDなどのソートに限られてしまいます。
そこで作ったのが TreeOrder プラグインです。
管理画面上でドラッグ&ドロップするだけで、記事・ウェブページ・コンテンツデータの並び順と階層構造を直感的に管理できます。
この記事では、TreeOrder の基本的な使い方から、具体的な活用シーン、テンプレートタグの書き方まで、まとめてご紹介します。
TreeOrder でできること
TreeOrder を導入すると、記事・ウェブページ・コンテンツデータ一覧画面にこのような「TreeOrder 表示」画面が追加されます。
この「TreeOrder 表示」というリンクをクリックすると、ツリー構造で記事等の階層と並び順が一目でわかるページが表示されます。ここでドラッグ&ドロップやインデント/アウトデントボタンを使って、自由に並び替えや階層変更ができます。
主な機能をまとめると、こんな感じです。
- ドラッグ&ドロップ で並び順を自由に変更
- インデント/アウトデント ボタンで親子関係を操作
- 記事・ウェブページ・コンテンツデータ のすべてに対応
- ツリー順の初期化 機能でワンクリックリセット
- 記事の新規作成や削除に 自動追従
- 豊富な テンプレートタグ でツリー順出力
初回セットアップはワンクリック
プラグインをインストールして最初に TreeOrder 表示画面を開くと、「ツリー順を初期化」ボタンが表示されます。
「IDの昇順（古い順）」か「IDの降順（新しい順）」を選ぶだけで、既存の記事が自動的にツリーに登録されます。あとはドラッグ&ドロップで好きな順番に並び替えていくだけです。
ウェブページもコンテンツデータもOK
TreeOrder は記事だけでなく、ウェブページやコンテンツデータにも対応しています。
コンテンツデータの場合は、コンテンツタイプごとに個別のツリーを管理できます。サイトの構造に合わせて柔軟に使い分けてみてください。
こんな場面で活躍します
ここからは、TreeOrder が特に便利に使える具体的なシーンをご紹介します。
1. サイトナビゲーション（グローバルメニュー）
ヘッダーやサイドバーのメニュー構成を管理するケースです。
たとえば「会社概要」の下に「代表挨拶」「アクセス」を配置したり、「サービス」の下に「コンサルティング」「開発」「サポート」をぶら下げたり。こうしたメニューの親子関係と並び順を、管理画面上で視覚的に操作できます。
メニュー構成の変更が多いサイトでは、テンプレートを書き換える手間が省けてかなり助かるはずです。
テンプレートはこんな風に書きます。
<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>
top_level_only="1" でトップレベルのページだけを取得し、<mt:TreeOrderHasChildren> で子ページがあるかチェック、<mt:TreeOrderChildren> で子ページをループ出力しています。ネストされたメニューがこれだけのテンプレートで実現できます。
2. FAQ ページの質問順序管理
FAQ は「よく聞かれる質問を上に、あまり聞かれないものは下に」と並べたいですよね。公開日順だと意図した順番になりません。
TreeOrder を使えば、問い合わせが多い質問をドラッグで上位に持ってきたり、カテゴリ的に関連する質問をまとめて配置したりできます。新しい質問を追加した際も、適切な位置にさっと挿入できるのがポイントです。
<div class="faq-list">
<mt:TreeOrder class="entry" blog_id="3">
<div class="faq-item">
<h3 class="faq-question"><mt:EntryTitle></h3>
<div class="faq-answer"><mt:EntryBody></div>
</div>
</mt:TreeOrder>
</div>
FAQ専用のブログ（サイト）を用意して blog_id で指定すれば、FAQ の並び順だけを独立して管理できます。
3. 製品・サービスカタログの表示順管理
商品紹介ページやサービス一覧で「おすすめ順」「人気順」など、マーケティング意図に合わせた並び順にしたいこと、よくありますよね。
季節のセール品を一時的に上位に持ってきたり、新商品を目立つ位置に配置したりといった運用が、管理画面から数秒で完了します。
<div class="product-catalog">
<mt:TreeOrder class="content_data" content_type="商品">
<div class="product-card">
<h3><mt:ContentLabel></h3>
<mt:ContentField content_field="商品画像">
<img src="<mt:AssetURL>" alt="<mt:ContentLabel>">
</mt:ContentField>
<mt:ContentField content_field="価格">
<p class="price"><mt:ContentFieldValue></p>
</mt:ContentField>
</div>
</mt:TreeOrder>
</div>
コンテンツデータを使えば、商品情報をフィールドで構造化しながら、表示順は TreeOrder で自在にコントロールできます。
4. マニュアル・ヘルプドキュメントの構造管理
「はじめに → インストール → 基本操作 → 応用操作 → トラブルシューティング」のようなドキュメントの章立てを管理するケースです。
TreeOrder の階層構造がそのままドキュメントの章・節・項の構造になるので、<mt:TreeOrderDepth> タグを使えば見出しレベルの制御も自動化できます。
<div class="manual">
<mt:TreeOrder class="page">
<mt:TreeOrderDepth setvar="depth">
<mt:if name="depth" eq="0">
<h2><mt:PageTitle></h2>
<mt:elseif name="depth" eq="1">
<h3><mt:PageTitle></h3>
<mt:else>
<h4><mt:PageTitle></h4>
</mt:if>
<div class="content" style="margin-left: <mt:TreeOrderDepth>em;">
<mt:PageBody>
</div>
</mt:TreeOrder>
</div>
章の入れ替えや新しいセクションの挿入も、ドラッグ操作だけで完結します。目次も TreeOrder の順序で自動生成できるので、ドキュメントの構成変更がとても楽になります。
5. ポートフォリオ・実績紹介の並び順管理
制作会社やフリーランスのポートフォリオサイトで、実績をアピール度の高い順に並べたい場合にも便利です。
新しい案件が入ったときに目立つ位置にさっと配置したり、ジャンルごとに階層を分けて整理したりできます。
<div class="portfolio">
<mt:TreeOrder class="entry" top_level_only="1">
<section class="portfolio-category">
<h2><mt:EntryTitle></h2>
<mt:TreeOrderHasChildren>
<div class="works">
<mt:TreeOrderChildren>
<div class="work-item">
<h3><mt:EntryTitle></h3>
<mt:EntryBody>
</div>
</mt:TreeOrderChildren>
</div>
</mt:TreeOrderHasChildren>
</section>
</mt:TreeOrder>
</div>
トップレベルをカテゴリ（「Web」「グラフィック」「動画」など）、その子要素を個別の実績として管理するイメージです。
6. スタッフ紹介ページ
役職順や部署別にスタッフを並べたいケースです。「社長 → 取締役 → 部長 → ...」という並び順は公開日とは関係ないので、まさに TreeOrder の出番ですね。
組織変更や人事異動があっても、管理画面でドラッグ&ドロップするだけで即座に反映できます。
<div class="staff-list">
<mt:TreeOrder class="content_data" content_type="スタッフ" top_level_only="1">
<section class="department">
<h2><mt:ContentLabel></h2>
<div class="members">
<mt:TreeOrderChildren>
<div class="staff-card">
<h3><mt:ContentLabel></h3>
<mt:ContentField content_field="役職">
<p class="position"><mt:ContentFieldValue></p>
</mt:ContentField>
<mt:ContentField content_field="プロフィール写真">
<img src="<mt:AssetURL>" alt="<mt:ContentLabel>">
</mt:ContentField>
</div>
</mt:TreeOrderChildren>
</div>
</section>
</mt:TreeOrder>
</div>
トップレベルを部署名、子要素をスタッフとして管理すれば、部署ごとの表示順もスタッフの順番もすべて TreeOrder で制御できます。
「ツリーなし」の並び替えモードも
ここまでツリー構造を活用した例をご紹介してきましたが、「order だけで、tree にしたくない」というケースもあると思います。FAQ の質問順やスタッフ紹介の表示順など、階層構造は不要で単純に並び替えだけしたい場面ですね。
そんな声にお応えして、最大階層数の設定を用意しました。
サイトスコープのプラグイン設定で、オブジェクト種別ごとに最大階層数を指定できます。
- 0（デフォルト）: 無制限。何階層でも入れ子にできます。
- 1: フラットリスト。入れ子不可で、並び順の変更のみ可能です。
- 2以上: 指定した階層数まで入れ子を許可します。例えば
2なら、親→子の1段階の入れ子まで許可されます。
【スクリーンショット: 最大階層数の設定画面】
最大階層数を 1 に設定すると、インデント/アウトデントボタンが無効化され、ドラッグ&ドロップで並び順だけを変更するシンプルなモードになります。誤って階層を作ってしまう心配もありません。
【スクリーンショット: フラットリストモード（最大階層数=1）の画面】
逆に 2 に設定すれば、「親カテゴリ → 子アイテム」のような1段階のグルーピングだけ許可する、といった使い方もできます。用途に合わせて柔軟に調整してみてください。
テンプレートタグの一覧
この記事で紹介したタグ以外にも、TreeOrder にはさまざまなテンプレートタグが用意されています。すべてのタグ・属性の詳細は製品ページをご覧ください。
おまけ：パンくずナビゲーション
TreeOrder のタグを組み合わせると、パンくずナビゲーションも簡単に作れます。
<mt:TreeOrder class="page">
<mt:TreeOrderHasParent>
<nav aria-label="パンくずナビゲーション">
<ol class="breadcrumb">
<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>
<mt:TreeOrderAncestors> がルートから現在のページまでの祖先を順番に出力してくれるので、パンくずの構造がそのままテンプレートに反映されます。
動作要件
- Movable Type 8 / Movable Type 9
まとめ
TreeOrder プラグインは、Movable Type の「並び順管理」に関する不満をまとめて解消してくれるプラグインです。
管理画面でドラッグ&ドロップするだけで並び順と階層構造を管理でき、テンプレートタグでそのままサイトに出力できる。ナビゲーションメニュー、FAQ、製品カタログ、マニュアル、ポートフォリオ、スタッフ紹介...表示順に意味があるコンテンツなら、どんな場面でも活用できます。
ぜひ試してみてください。
（宣伝）TreeOrder プラグインの詳細・ダウンロードは製品ページからどうぞ。
