MODXテンプレートについて

最終更新日
2017.10.08

移行作業中のため一部のページが正しく表示されていない場合があります(o-ω-))

MODX のテンプレートの使い方や仕組みの説明です。

テンプレートとは

テンプレートとはページのデザインを使いまわせるようにする為のひな形です。

新規インストールの時にサンプルサイトを追加していない場合はものすごくシンプルな Minimal Template しかないので、実際にサイトを運用するにはテンプレートを新しく作る必要があります。ヘッダーからフッターまでほぼ全ての HTML を自分で作る事になります。

MODXのテンプレート

全部作らないといけないって大変なんじゃ?と思うかもしれませんが、Evo のテンプレート構造は静的 HTML に近くてすごくシンプルなのでテキストエディタや Dreamwever などで静的サイトを作る作業と殆ど変わりません。

その反面、Evo の機能はアドオンで構成される事が多く、どんなアドオンを選択するかによっててプレートに記述する MODXタグ が変わってくるため汎用向けに配布されているテンプレートは少ないです。

もし Evo のテンプレートを探しているなら純粋な HTML テンプレートとして配布・販売されているものを利用するのがおすすめです。

見出しや本文が入る場所に リソース変数、スニペット、チャンクなどの、MODX タグを記述することでページによって動的に出力出来ます。MODX での変数は見出しなら[*pagetitle*]本文なら [*content*]と書きます。Evo のテンプレートは HTML の好きな場所に MODXタグ を埋め込んで作っていきます。

リンクの貼り方

実際の Web サイトというのはメニューがあったり、最新記事が表示されたり、リンクを貼ったりしてそれぞれのページを繋げている必要があります。

ゼロから作る場合 Evo のページは最初は独立していて他のページに飛ぶ事はできないのでまずはリンクを貼ったりメニュー用の MODXタグ を記述する作業が必要です。

リンクは以下のように書くことで自動的に URL に変換されます。

<a href="10.html">ID10のページへ</a>

この方法で URL を作成することで後からツリー構造やエイリアス(ファイル名部分)を変えてもリンク切れを起こす事がなく、リンクを記述しているページを修正する必要がありません。

「BaseURL」をつける

唯一のルールで Evo のテンプレートには基本的にヘッダーに base href タグを入れます。

<base href="[(site_url)]">

これは、Evo で作成される URL がルートからの相対パスになっているためです。フレンドリーURL を使って擬似フォルダ構成になっている場合、下の階層から上の階層へ飛ぶ時に baseURL が無いとそのページからのパスという風になってしまうのです。

テンプレートの構成とブロック

MODX のテンプレートは1枚のベタな HTML なので本来ブロックという概念はないのですが、HTML を分離できるチャンクという機能を使ってテンプレートの一部をブロックとして分ける事も出来ます。他のテンプレートと使い回したかったり、編集する時に探すのが楽になるので適当に分離させておくといいかもです。

私のサイトは大分シンプルに作っているのですが大雑把に分けるとこんなかんじになります。

ブロックの中にもブロック(らしきもの)が入ってるのが分かると思いますがネストも自由に出来るので細かいレイアウト調整ができます。

テンプレートのネスト

テンプレートは親のテンプレートを指定することでネストする事ができます。

ネストされたテンプレートは、親のテンプレートの[*content*]部分にネストされた状態で出力されます。ネストすることでサイドバーだけを変えたテンプレートが2種類欲しい場合などでもヘッダー・フッターの外枠を使いまわす事が出来ます。

以下の様なベースのテンプレートAを用意しておきます。

テンプレート「ベース」

<!DOCTYPE html>
<html>
<head>
<base href="[(site_url)]" />
<meta charset="UTF-8" />
<title>[*pagetitle*] | [(site_name)]</title>
</head>
<body>
<div id="wrapper">
 <header id="header">{{ヘッダー用チャンク}}</header>
 [*content*]
 <footer id="footer">{{フッター用チャンク}}</footer>
</div>
</body>
</html>

これは親になるテンプレートなので親テンプレートの項目は「None」のままにしておきます。

次にこの`[*content*]`の部分に入れたい子テンプレートをいくつか作成します。

テンプレート「サイドバー有り」

<main>
  <h2>[*pagetitle*]</h2>
  <div class="content">[*content*]</div>
</main>
<nav class="sidebar">
  {{サイドバー用チャンク}}
</nav>

これは子テンプレートなので親テンプレートは上で作った「ベース」を選択します。

テンプレート「サイドバー無し」

<main>
  <h2>[*pagetitle*]</h2>
  <div class="content">[*content*]</div>
</main>

これも同じように親テンプレートで「ベース」を選択しておきます。この通りものすごく記述の量を減らせて見通しがよくなるし外枠部分を編集する時に1つのテンプレートしか編集しなくていいのでとても楽になります。

リソースからテンプレートを選択するときは「サイドバー有り」か「サイドバー無し」を選択すると親のヘッダー・フッターもついた状態で表示されます。

子になっているテンプレートを編集する時はネストしている親テンプレートの HTML が表示されます。(親部分は編集できません)

MODXのテンプレート上での分岐処理など

テンプレート内での分岐処理は @IF文、モディファイア、スニペットなどで行います。詳しくはこちらの記事をご覧ください。

テンプレートで使用したい汎用的なスニペット

とりあえず Ditto と Wayfinder の2つを使えば一般的なサイトを作る事ができます。

Ditto

特定のドキュメント以下を取得するスニペットです。記事の一覧を表示したい時に使用します。

http://modx.jp/docs/extras/snippets/ditto.html

Wayfinder

ナビゲーションメニューの作成に特化したスニペットです。現在見ているページを装飾したり非アクティブなサブツリーは非表示にするなどメニューを作成する際の大体の機能は備わっています。

http://modx.jp/docs/extras/snippets/wayfinder.html

外部情報

http://modx.jp/docs/tutorial/howto_make_template.html サイト用テンプレートの作り方(MODX日本公式サイト)