MODXのテンプレート変数の使い方

MODX のテンプレート変数の使い方を説明します。

MODX には「本文」や「リソース名」という基本のリソース変数がありますが、「テンプレート変数」はそれと同じように自由な入力・選択項目を増やせる機能です。WordPress でいうところのカスタムフィールドとだいたい同じです。

MODX のテンプレート変数はテンプレートと関連付けられます。テンプレートに関連付ける事で、そのテンプレート変数が直接必要なリソースにだけ入力フォームを表示させます。

どんな時に使うか

各リソース毎に違う内容にしたいオプション情報、例えばイメージ画像や商品価格など情報として独立させておきたい場合に使用します。

単に同じ内容を複数のページで使いまわしたい場合はチャンクを使う方が適切です。何通りかの内容がありリソースによって選択したい場合、テンプレート変数ではいくつかのチャンクを選べるようにして実際表示する時にチャンクの内容を持ってくれば内容を変更したい場合チャンクを修正するだけで全てのリソースに反映されます。

テンプレート変数の設定項目

項目説明
変数名 タグに使用する名前。
日本語も可能なので「商品画像」や「価格」など分かりやすい名前をつける事もできます。
見出し(入力フィールド名) 投稿画面の表示用の名前
入力フォーム 入力フォームのタイプを選択
入力時のオプション 各入力タイプのオプション項目
既定値 標準で選択、入力されている値
既定値を編集すると、項目が既定値のまま登録されている既存のリソースも書き換わります。
プロセッサ(旧ウィジェット) プロセッサ(表示形式)を選択
プロセッサの設定 プロセッサのプロパティの内容

入力フォームは色々なタイプが用意されています。例えば1行テキストボックス、複数行テキストエリア、ドロップダウンメニュー、ファイル用フォームなどなど。MODX のファイル用フォームは直接リソースに紐付けてアップロードするわけではなくて、イメージブラウザからファイル用のフォルダにアップロードしてファイル名を紐付ける感じです。FTP で画像をUPする代わりにそれをブラウザで行うだけです。リソースが削除されても使用している画像は削除されませんし、同じ画像を別のリソースで使いまわす事もできます。

タグの書き方

[*変数名*]

日本語も使用できます。

スニペットのパラメータに使用したりチャンクの名前としてネストする事もできます。

[[snippet? &var=`[*変数名*]` ]]
{{[*変数名*]}}

新しいテンプレート変数(項目)の作成

例では商品情報用のリソースに対して「価格」という項目を追加することにします。

あらかじめ「商品一覧用テンプレート」と「商品情報用テンプレート」の2種類を作ってあるとします。

新しいテンプレート変数を作成する

上の画面から新しいテンプレート変数を作成します。

変数名は呼び出す時に使用するタグに使う名前で、見出しは入力画面で表示される項目名です。

StringFormatNumberにして3桁ごとにカンマ区切りで表示します。

テンプレートとの関連付け

次に「テンプレートとの関連付け」タブに変更してこのテンプレート変数をテンプレートと関連づけます。リソースで使用するテンプレートの組み合わせは以下のような感じになるとします。

リソース使用するテンプレート
商品一覧ページ 商品一覧用のテンプレート
商品A 商品情報用のテンプレート
商品B 商品情報用のテンプレート

関連付けする必要があるのはテンプレート変数を直接入力する必要があるリソースで使用しているテンプレートだけでOKです。表示するかではなく ”入力するページか” という点にご注意下さい。例えば価格なら商品情報で入力するので「商品情報用テンプレート」にチェックをします。一覧ページでは使用するだけなので関連付けは不要です。ちなみに、不要な関連付けをしていても特に不具合が起きる訳ではないのでご安心ください。

「商品情報用テンプレート」を使用して編集画面を開いてみましょう。リソースで本文テキストエリアの下に以下のように新しい項目が増えていればテンプレート変数の設定ができました。

変数を使用する

フォームに価格を入力してリソースを作成してみましょう。

ここで入力した内容を使用するには、商品詳細テンプレートの表示したい場所に[*price*]と記述します。

関連付けていない商品一覧テンプレートから Ditto などのスニペットを通してそれぞれの商品の価格を表示したい場合はプレースホルダ(例:[+price+])で使用する事ができます。※スニペットによって接頭辞が付く場合もあります。

チャンクを使用してテンプレート変数の内容を切り替える例

「注意事項A」と「注意事項B」という2パターンの記述があって、リソース毎にどちらを表示するかを選択させる方法です。
テンプレート変数とチャンクを使用します。

「notes.A」「notes.B」というチャンクを作成してそれぞれの注意事項を記述します。

テンプレート変数で「注意事項」という項目を作成し、表示させたいテンプレートと関連付けておきます。

設定内容は以下のような感じにします。

入力タイプにドロップダウンなどの選択肢が設定できるものを選択して入力時のオプションを以下のようにします。

注意事項A==A||注意事項B==B

出力フィルタのカスタムウィジェットを使用する場合内容には

{{notes.[+value+]}}

などと書けば、チャンクの内容を表示する事ができます。
チャンクの名前を全部選択肢にしないで接頭辞の「notes.」を外側に書いてるのは、使い回しをしたりグループ管理する場合への考慮です。効果あるかは不明(っ'ω'c)

カスタムフィルターを使用しないで、テンプレート変数の値から直接チャンクを表示する場合はテンプレートに以下のように書いておけば選択された方のチャンクの内容が表示されます。

{{notes.[*注意事項*]}}

ドロップダウンやラジオボタンに「なし」の選択肢を作る

項目名だけを設定して項目値を空にすることで「なし」の選択肢を作る事ができます。

なし==||注意事項A==notes.A||注意事項B==notes.B

API

$modx->getTemplateVarOutput('変数名');
$modx->documentObject[ 変数名 ]['name'] // 変数名
$modx->documentObject[ 変数名 ]['value'] // 内容
$modx->documentObject[ 変数名 ]['display'] // 出力タイプ
$modx->documentObject[ 変数名 ]['display_params'] // 出力オプション
$modx->documentObject[ 変数名 ]['type'] // 入力タイプ

外部情報

http://modx.jp/docs/tags/rv.html リソース変数について
http://modx.jp/docs/tags/tv.html テンプレート変数について

Revo ではデフォルトで Custom input や Custom Widget がないのでどうするのかなぁと思ったんですけど、新しい入出力方法を作るにはフォルダに直接ファイルを作成するみたいですね。そのようなパッケージもいくつか存在していました。

http://rtfm.modx.com/display/revolution20/Adding+a+Custom+TV+Input+Type