各種タグ記述について
テンプレート及び投稿画面内で用いることができるのは、テキスト・htmlタグとMODX専用のタグのみ。php文もSmartyも使えません。MODXをCMSとして活用するには、MODX専用のタグの記述が必須です。
MEML(MODX Evolution Markup Language)
MODX Evolutionのタグ記述仕様は９種類のタグと共通のモディファイアの組み合わせによって構成され、MEML(MODX Evolution Markup Language)という総称を持ちます。他CMSと比べると、テンプレートワークとコンテンツワークで違いがなく、どちらでもほとんど同じように使えることが特長となっています。
※一般的なCMSではコンテンツワークで利用できるタグは限られています。
タグの種類
- [*リソース変数*] - 投稿画面上の各入力フィールドに対応。タイトル・本文・投稿日など。
- [*テンプレート変数*] - カスタムフィールド。リソース変数と同じような使い方です。
- [(コンフィグ変数)] - サイト名など、サイト全体に関する設定値。主にグローバル設定に関連します。サイト全体で共有できる値を管理するだけならチャンクでもかまわないので、コンフィグ変数では特にサイトの機能に由来する値を管理することになっています。
- {{チャンクタグ}} - 作ったチャンクを呼び出すためのタグ。
- [[スニペットコール]] または[!スニペットコール(キャッシュなし)!] - スニペットを呼び出すためのタグ。
- [~リンクタグ~] - 任意のリソースのURLを出力するためのタグ。
- [+プレースホルダ+] - スニペットの出力を、さらに定型化したい場合に用います。サブスニペット・ミニスニペットのようなものです。
- [^ベンチマークタグ^] - ページの出力時間やSQLクエリの発行回数などを出力するためのタグ。負荷調整などに用います。
- その他のタグ
MODXの独自タグは、上記の9種類があります。最低限必要なのはリソース変数のみ。無理せず、必要に応じてポイントを絞って習得しましょう。学習曲線の緩やかさはMODXの大きな特長です。
タグはどこにどう記述するか
これら9種類のタグは、テンプレート・投稿画面のどちらでも全く同じように用いることができます。
また、スニペットコールやリンクタグのように、パラメータを与えて呼び出すタイプのタグでは、タグ記述の内部に他のタグを入れ子で記述することができます。
[~[*id*]~]
たとえば上記のように記述すれば、これを記述したページのURLを出力できます。この場合は投稿画面内よりはテンプレート側に記述するほうが実用的です。eFormなど、formタグと関係するスニペットでもよく用いられます。
[[タイトル取得?id={{キャンペーン記事のID}}]]
スニペットコールであれば、上記のような記述ができます。この例では、「タイトル取得」という名前のスニペットのパラメータとして「キャンペーン記事のID」というチャンクの値を与えています。簡易チュートリアルにも類似ノウハウを記述していますので、参考にしてください。
Jotで実装するコメント欄や掲示板では、安全に配慮してスニペットコールが展開されないようになっています。
意外と重要なリンクタグ
MODXは、サイト構造の制御ルールをテンプレートに盛り込むタイプのCMSではありません。基本的に、各ページ間のリンクは手作業で張ります。その際、各ページのURLを直接貼り付けるのではなく、リンクタグを用いましょう。
リンクタグを用いると、URLの管理をMODX本体に任せることができます。ページのURLを変更すると、リンクタグが出力するURLも追随して変わります。
モディファイア
リンクタグ・ベンチマークタグ以外のタグでは、モディファイアという仕組みを用いて値を加工することができます。
[*pagetitle:ucase*]
たとえば上記のように記述すると、ページのタイトルに含まれる英字を大文字に変換することができます。
<meta name="description" content="[*description:strip_tags*]">
こう書くと、descriptionフィールドに入力されたHTMLタグを除去します。
[*pagetitle:zenhan:ucase*]
モディファイアは複数連結できます。上記の例では、全角の英字を半角に変換してから大文字に変換します。
[[スニペット名:モディファイア?パラメータ=値]]
パラメータ指定を持つスニペットコールでは、スニペット名に接続する形でモディファイアを記述します。
条件分岐(@IF文)
<@IF: [*変数名*]>空でなければ出力<@ENDIF>
<@IF: ![*変数名*]>空であれば出力<@ENDIF>
<@IF: [*変数名*]>
空でなければ出力
<@ELSE>
空であれば出力
<@ENDIF>
上記のようなIF文記述が可能です。
<@IF: [*description*]>
<meta name="description" content="[*description*]">
<@ENDIF>
こう書くと、descriptionフィールドに入力している場合のみmetaタグを出力します。
判定できるのは値の有無のみですが、モディファイアを併用すると複雑な条件による判定が可能です。
<title><@IF:[*id:isnot(1)*]>[*pagetitle*] | <@ENDIF>[(site_name)]</title>
上記の例では、トップページ以外で[*pagetitle*]を出力します。
<@IF:[*id:is(1)*]>
<title>[(site_name)]</title>
<@ELSE>
<title>[*pagetitle*] | [(site_name)]</title>
<@ENDIF>
同じように出力します。行数は増えますがこう書くほうが分かりやすいかもしれません。
値がHTMLや数式の場合は判定を誤ることがあるので、その場合もモディファイアが必要です。電話番号などは数式と見なされるので、モディファイアで処理を加えないとマイナス値と判定されることがあります。
<!--@IF: [*変数名*]>
空でなければ出力
<@ELSE>
空であれば出力
<@ENDIF-->
このように書くこともできます。HTMLとしてはブロック全体がコメント扱いになるため、工夫して用いればデザイン担当者とのコミュニケーションを円滑にすることができます。
タグ記述に用いることができる文字
チャンクやスニペットは、それらのパーツ名そのものが呼び出しタグになります。たとえば「ヘッダ画像」というチャンク名であれば {{ヘッダ画像}} というチャンクタグで呼び出すことができます。
全角文字を自由に用いることができます。半角スペースやクォートなども用いることができます。
{{header_image}}
というような呼び出しよりは、
{{ヘッダ画像}}
のほうが分かりやすいです。分かりやすいように記述してください。
{{正月の三が日だけ有効なヘッダ画像。江ノ島越しの富士山です}}
なんてのも、もちろんアリです。MODXは海外発のCMSですが、多言語対応はしっかりしているのでご安心ください。
キャッシュ制御について
キャッシュ制御も、タグ記述の一環として説明できます。
リソース変数やチャンク、リンクタグなどは、単純にデータベースに問い合わせて値を引っ張ってくるだけなので、たいして負荷はありません。スニペットは実体がPHPプログラムなので、処理内容によってはかなり重くなることがあります。もちろんそれはPHPプログラミングの問題であって、MODXの問題ではありません。
どうしても重くなってしまう処理は仕方がないので、一度目の処理だけは負荷をこらえて出力を得て、二度目以降はこの出力内容をまるごと記憶したものをサッと出してしまうのがキャッシュの考え方です。
[[スニペット]]
このように記述すれば、そのスニペットの処理はキャッシュされて、二度目以降のアクセスでは軽快に値のみを出力します。
[!スニペット!]
こう記述した場合、キャッシュせずに、リクエストのたびごとに処理を行ないます。「ただいま何分何秒」のような、リアルタイムな情報が必要な場合は、このように記述してキャッシュを回避します。
このようなブロック単位(スニペット単位)のキャッシュ制御は、一般的なCMSでは難しいことが多いですが、MODXでは簡単に書き分けることができます。
ソース中でのみコメントアウトする書き方
ソース中ではコメントアウトするが、出力時にはコメントアウトを解除させ、コメント扱いした文字列をそのまま出力させることができます。
<!--@MODX: この部分を表示する -->
コメントアウトされていますが、上記のように書くと「この部分を表示する」という文字列を出力できます。システム上ではコメントアウトのタグ文字列を削除します。
http://chibinowa.net/modx/tutorial/commenttag.html
参考情報
出力時に非表示にする
逆に、任意のブロックを、出力時に削除することができます。
<!--@IGNORE-->
この部分は出力しない
<!--@ENDIGNORE-->
または
<!--@IGNORE:BEGIN-->
この部分は出力しない
<!--@IGNORE:END-->
上記のように書くと、「この部分は出力しない」という文字列をシステム上で無視することができます。
http://chibinowa.net/modx/tutorial/commenttag.html
参考
上記の２つのコメント記法を併用する
MODXでサイトを作る際、HTMLコーディング担当者が作ったダミーコード(ナビゲーションなどの動的出力部分)をWayfinder・TopicPath・Dittoなどに置き換える作業が発生しますが、いったんMODXのタグに置き換えてしまうと、そのテンプレートはHTMLコーディング担当者にとっては仕組みの分からないものになってしまいます。この時、上記の２つのコメント記法を併用すると便利です。
<ul>
<li><a href="#">ダミーのタイトル１</a></li>
<li><a href="#">ダミーのタイトル２</a></li>
<li><a href="#">ダミーのタイトル３</a></li>
</ul>
たとえば、上記のようなHTMLをHTMLコーディング担当者から受け取ったとします。
<!--@MODX: [[Ditto?tpl='<li><a href="[+url+]">[+title+]</a></li>']] -->
まず上記のように書いてDittoを実装します。コメントアウトされていますが、これは出力されます。
[[Ditto?tpl='<li><a href="[+url+]">[+title+]</a></li>']]
こう書いているのと同じです。
<ul>
<!--@IGNORE:BEGIN-->
<li><a href="#">ダミーのタイトル１</a></li>
<li><a href="#">ダミーのタイトル２</a></li>
<li><a href="#">ダミーのタイトル３</a></li>
<!--@IGNORE:END-->
</ul>
次に、上記のように書いてダミーのコードをシステムでは無視するようにします。削除してしまってもよいのですが、デザインの直しがたびたび入る場合は、このようにして元のダミーコードを残しておくと、見比べることができるため分かりやすいです。
<ul>
<!--@MODX: [[Ditto?tpl='<li><a href="[+url+]">[+title+]</a></li>']] -->
<!--@IGNORE:BEGIN-->
<li><a href="#">ダミーのタイトル１</a></li>
<li><a href="#">ダミーのタイトル２</a></li>
<li><a href="#">ダミーのタイトル３</a></li>
<!--@IGNORE:END-->
</ul>
２つ合わせると、このようになります。同じように、メニューやパンくずリストなども実装できます。
このようにして作ったテンプレートは、MODX操作を全く行わないHTMLコーディング担当者が手元のパソコンのブラウザで開いた時に、自分が作ったそのままの状態でプレビューできます。HTMLコメントを使っているために、このような使い方ができます。
MODX担当者が作成したテンプレートをHTMLコーディング担当者に返し、今後デザイン修正を行なう場合はこれに手を入れるようにしていただくとスムーズです。
MODXタグ自体を記述したい！
[<!---->*変数名*<!---->]
投稿画面でリッチテキストエディタ(TinyMCEなど)を用いていない場合は、上記のように記述します。
このページの末尾あたりの情報も参考にしてください。
