MODXテンプレートについて

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

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

Headline

MODXテンプレートの基本
リンクの貼り方
BaseURLをつける
テンプレートの構成とブロック
テンプレートのネスト
新しいテンプレートを追加してみよう
MODXのテンプレート上での分岐処理など
テンプレートを作成する時に使用したい基本的なスニペット

MODXテンプレートの基本

全部作らないといけないって大変なんじゃ？と思うかもしれませんが、実はMODXのテンプレートは静的HTMLに近くてすごくシンプルなのでDreamweverなどで静的サイトを作る作業と殆ど変わらないんです。

MODXの書き出す基本機能は「作ったテンプレートの中に内容を書き出すだけ」ぐらいで、そこからは自分のやりたい事によってそれに合ったアドオンを追加して機能を増やしていきます。メニュー表示や検索、フォームメーラーもアドオンになりますがここらへんのよく使われるアドオンはパッケージに同梱されていてインストール時に選択する事ができます。

この点はテンプレートを配布サイトから借りてすぐに記事を書き始めたい人よりも、自分でデザインしたい人向けといえるかもしれません。もしMODXのテンプレートを探しているなら通常の静的HTMLテンプレートとして配布、販売されているものを利用するのもおすすめです。ワンクリックで登録出来ないという欠点はありますが選べる量的には格段に多くなります。

見出しや本文が入る場所にMODXタグ（変数）を記述することでページによって違う見出しや本文の内容を書き出します。MODXでの変数は見出しなら[*pagetitle*]、本文なら[*content*]と書きます。MODXのテンプレートはHTMLの好きな場所にドキュメント本文、タイトル、テンプレート変数、スニペットなどを埋め込んで作っていきます。

リンクの貼り方

実際のWebサイトというのは、メニューがあったり、最新記事が表示されたり、リンクを貼ったりしてそれぞれのページを繋げている必要があります。MODXのドキュメントページは最初は独立していて他のページに飛ぶ事はできません。なので最低限必要なのはリンクになります。

リンクは以下のように書くことでURLを自動生成します。

ID10のページへ

[~10~]の部分は自動的にリソースへのURLに変換されるので、ツリー構造やエイリアス（ファイル名部分）を変更してもリンクを記述しているページの修正をする必要はありません。

めったに変更することがない最上層のカテゴリや単独のリンクなら上のようにHTMLに直接記述した方が楽ですが、どんどん増えたり気まぐれでタイトルが変更されるリソースへのリンクは手作業で記述するのは大変だし折角CMSを使っているのでスニペットを使って自動取得させるといいですね！

BaseURLをつける

MODXのテンプレートには基本的にヘッダーにbase hrefタグを入れます

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

これは単にリンクが吐出される時に[(site_url)]が付けばいいわけなので、別にBaseURLを付けなくてもいい方法はあります。

リンクを貼る時に[(site_url)][~ID~]と記述する。
Dittoなど自動的に吐出されるリンクも同じようにテンプレートで[(site_url)][~[+id+]~]と記述する。

ただし、基本で吐かれるのが相対パスなのでスニペット毎にこれを意識する必要があります。

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

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

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

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

テンプレートのネスト

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

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

テンプレート「ベース」








[*longtitle:ifempty=`[*pagetitle*]`*] | [(site_name)]





 {{ヘッダー用チャンク}}

 [*content*]
 {{フッター用チャンク}}

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

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

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



 [*pagetitle*]

 

 [*content*]
 

 

 {{サイドバー用チャンク}}

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

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

 [*pagetitle*]

 

 [*content*]

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

リソースからテンプレートを選択するときは「サイドバー有り」か「サイドバー無し」を選択すると、ベースにあるヘッダー・フッターも付いたテンプレートが表示されます。
リソースの使用テンプレートで「ベース」を選択した場合はネストしていないテンプレートのように[*content*]の部分に直接本文を表示します。

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

新しいテンプレートを追加してみよう

MODxDESiGN Templates.　海外のMODXテンプレート配布サイトです。結構豊富。

MODXタグを使用した個人サイト向けのシンプルなサンプルテンプレートを作成してみました。
MODXに最適化させたHTMLのほかに、移植元の純粋なHTMLを同梱しています。
見比べると、文章以外は基本同じで分岐などのロジックがテンプレートに殆ど含まれていないことが分かると思います。
簡単に試すにはサンプルサイト付きでインストールしてある程度リソースのある状態でテンプレートを追加してみてください。
新着表示部分はサンプルサイトに最適化させています。

ブラウザ外観 Chrome○ Firefox○ IE9○ IE8△ IE7△

大きいバナーとかツイッターの画像はサンプルなので実際に使う場合は外してください。

Evolution用

ダウンロードはこちらから

template.thml - 静的HTML
参考用に同梱している最初に作った完全静的HTMLです。MODXでは使用しません。
IEでスタイルが反映されない場合はをスタイルがあるURLやフォルダに変えてください。
template.modx.html - MODX最適化HTML
こちらを使用します。

Revolution用

Evoのテンプレートをベースに若干修正。サイドバーを選択出来るテンプレート変数が付属しています。

本家ライブラリに追加して頂きましたヽ(=´▽`=)ﾉパッケージマネージャーを使用する場合

管理画面＞システム＞パッケージマネージャー＞プロバイダから取得

左にあるツリーの「Front End Templates」＞「Style」からダウンロード＆インストールができます。

手動でインストールする場合は以下からダウンロードしてください。

ダウンロードはこちらから

上のファイルを「/core/packages/」の中に入れて下のメニューからインストールできます。

管理画面＞システム＞パッケージマネージャー＞転送済みのパッケージを取得

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

通常のCMSではSmartyや独自のタグでテンプレート内に分岐処理などのロジックが含まれていますが、MODXは基本的にはテンプレートに含まれるのは変数のみで分岐などの処理はスニペットやプラグインなどの本体が行います。

値があるかないかの簡単な分岐は、モディファイアやテンプレート変数のプロセッサを使うことで可能です。

テンプレートを作成する時に使用したい基本的なスニペット

とりあえず以下の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日本公式サイト）

MODXのリソース（ドキュメント）