MODXテンプレートについて

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

テンプレートとは

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

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

MODXのテンプレート

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

MODX の機能はアドイン・アドオンで構成される事が多く、どんなエレメンツを使用して構築しているかサイトによって違うため汎用向けに配布されているテンプレートは少ないです。テンプレートを配布サイトから借りてすぐに記事を書き始めたい人よりも、自分でオリジナルにデザインしたい人に向いていると言えます。

もし MODX のテンプレートを探しているなら通常の静的 HTML テンプレートとして配布、販売されているものを利用するのもおすすめです。ワンクリックで導入出来ないという欠点はありますが選べる量的には格段に多くなります。

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

リンクの貼り方

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

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

<a href="[~10~]">ID10のページへ</a>

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

BaseURLをつける

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

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

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

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

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

ただしスニペット毎にこの作業が必要になり面倒くさいのでおすすめ出来ません。

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

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

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

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

テンプレートのネスト

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

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

テンプレート「ベース」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

Evolution用

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

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

Revolution用

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

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

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

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

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

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

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

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

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

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

Edited on 2017.02.15 Created on 2007.03.28 MODX Webデザイン
PAGE TO TOP