【MODX】初期画面リソースを作って基本設定を一括管理する

■動機と目的

『MODXを使って、ある程度レイアウトや色使い等を簡単にコントロールできる汎用HP構築システムを作れないかな。』
MODXは、テンプレートから自由に構築できるという自由度の高いCMSですが、その自由度の高いシステム故に、敷居が高く感じられるのも事実です。
そこで、汎用的に使えるテンプレートを用意し、『背景色を変える』『サイドバーの位置を変える』等のちょっとした設定を簡単にできるようになれば、ある程度のレイアウトの自由度は確保できるんじゃないかなと考えました。

そんな発想から、CrossSystemの原案を考え始め、自分の中の数少ない知識で考え付いたのが『リソースのひとつとして初期設定画面をつくり、そこに割り当てたカスタムテンプレート変数を、スニペット経由で全リソースから利用できるようにする』というものでした。PHxを使えば実現できそうな気もしますし、もしかしたらもっと簡単な方法があるのかもしれませんが、自分にはこれしか思い浮かびませんでしたw

ただ、出来上がったものを自分で使ってみる限り、『これはこれでアリなんじゃ?』と思っています。ひとつのリソースで一括管理しているので設定変更がしやすいし、リソースのひとつなら、編集者クラスの権限しかなくても編集できますから。

■『背景色を変更する』を実装してみる。

とりあえず、『背景色をコントロールする』を例にして、具体的な設定を説明します。

1.準備

下準備として、テンプレートをひとつと、それに使うCSSを登録します。
テンプレートは普通に構築しますが、CSSは実ファイルではなく、リソースとして登録します。

具体的には、

1.『ツール』→『グローバル設定』→『フレンドリーURL』タブから、『個別の拡張子表現』を『はい』に設定
2.リソースをひとつ作り、テンプレートをblankに、リッチテキスト編集をOFFにして、エイリアス名を『xxx.css』と、拡張子css付きでつけて保存。(このリソースのIDを仮に10としておきます)
3.登録したテンプレートにcssを紐付けます。<head>~</head>内に、
<link href="index/sidebar.html" rel="stylesheet" type="text/css" media="screen" />と記述してやれば完成です。

このcssリソースに普通にcss設定を記述していけば、bodyの部分に
body {

background-color: #fff;

}
という記述で背景色を設定することと思います。この部分にスニペットコールを割り込ませて背景色をコントロールできるようにしていきます。

2.初期設定リソースを作る

まず、新しくリソースを作って、タイトルを『初期設定』という名前で保存しておきます。
それから、このリソース専用のテンプレートをひとつ作ります。公開・閲覧する為のリソースではないので、中身はblankにしておきます。
先ほど作った初期設定リソースの使用テンプレートをこのブランクテンプレートに設定して保存しておきます。

3.『bgcolor』という名前のカスタムテンプレート変数を作る。

カスタムテンプレート変数をひとつ作成します。変数名は『bgcolor』、表示名は『背景色』、入力タイプは『text』、初期設定値は『#fff』にしておきます。
このbgcolorを2.で作った初期設定用のテンプレートに関連付けておきます。

4.managermanagerを使うと設定変更が直感的にできて便利です。

managermanagerに関しては、下記サイトが詳しくて親切なので、紹介するだけに留めておきます。
Cubix managermanager解説ページ
Let's enjoy MODX managermanager解説ページ

mm_rulesに以下の文章を書き加えておきます。

$tpl = '該当するテンプレートID';
mm_widget_colors('bgcolor', '#ffffff', '', $tpl);

これで、タイトルとテキスト入力エリアだけという殺風景な入力欄が下のようになって便利です。

5.スニペット作成

bgcolorだけでなくいろんなパターンで使えるように、汎用的な形でスニペットを作ります。内容は、

$tv = $modx->getTemplateVarOutput($tvname,10); //10は2.で作った初期設定リソースのIDです。
$tvvalue = $tv[$tvname];
return $tvvalue;

こんな感じです。自分の場合はこれを『settingvalue』というスニペット名で登録しています。
他のリソースから、
[[settingvalue? &tvname=`bgcolor`]] 
というスニペットコールで呼び出すと、設定したbgcolorの色指定を返してくれるわけです。
実際には、
1.初期設定値がない場合。nullならなにも返さないけど、値が入ってれば値を返す
2.初期設定値がある場合。そのまま設定値を返す。
3.いくつかのテンプレート変数の設定値を参照して、優先順位に沿って最適な値を返す。
と、いくつかのパターンに分けられるので、それぞれにif文で分岐させて値を返すようにしています。

6.CSSの内容を書き換える

5.のスニペットを呼び出すように、CSSの内容を書き換えます。
[書き換え前]
body {

background-color: #fff;

}

[書き換え後]
body {

background-color: [[settingvalue? &tvname=`bgcolor`]] ;

}

こんな感じに書き換えてやると、背景色を初期設定画面でコントロールできるようになります。

■その他の例■
descriptionというテンプレート変数を作り、入力欄が空ならなにも返さない、入力欄に文章を入れると<meta name="description" content="入力欄の内容">という値を返すようにして、テンプレートの<head>~</head>間に [[settingvalue? &tvname=`desc`]] と入れておく。