ヘッダやフッタをリソース編集画面で管理できるようにする
最終更新日：2014年1月14日 shortlink：http://modx.jp/?id=943
MODXではヘッダやフッタの一部をチャンクとして切り出して、チャンクの管理画面で編集できるようにする方法がよくある手順ですが、リソース編集画面でヘッダやフッタを管理する事もできます。
例えばページ編集者にはリソースの編集権限は許可するがチャンクの編集権限を与えたくない場合、ページ編集者のレクチャーをシンプルにしたい場合に有効です。
上記はリソース編集画面にヘッダ画像とフッタの文字が編集できるようになっています。
デモサイトの準備
実際にMODXデモサイトを利用して設定方法説明します。デモサイトにて「サンプルサイト有標準インストール」のパッケージを展開してください。本ページ執筆時点の最新版は「1.0.12J-r1」なので、このバージョンをベースにします。
このサンプルサイトのヘッダ画像、フッタの文字列をリソース編集画面で編集できるようにします(青枠で囲った部分)。
スニペット作成
次のスニペットを作成します。特に指定の無い項目はそのままで構いません。
- メイン/スニペット名
TV表示
- メイン/スニペットコード
<?php
if( empty($tv_name) ){
return '&tv_nameを指定してください';
}
if( empty($baseResource) ){
return 'ベースとなるリソースIDを指定してください';
}
$rs=$modx->getTemplateVarOutput($tv_name,$modx->documentIdentifier);
if( empty($rs[$tv_name]) ){
$rs=$modx->getTemplateVarOutput($tv_name,$baseResource);
}
return $rs[$tv_name];
?>
- プロパティ/既定のプロパティ
&baseResource=ベースのリソースID;string;1
トップページのリソース編集画面でヘッダやフッタの管理を行なうのでベースのリソースIDは1とします。
(サンプルサイトのトップページになるhomeのリソースIDは1)
テンプレート変数作成
次のテンプレート変数を作成します。特に指定の無い項目はそのままで構いません。
ヘッダ画像のテンプレート変数
- メイン/変数名
ヘッダ画像
- メイン/見出し(入力フィールド名)
ヘッダ画像
- メイン/入力タイプ
image
- テンプレートとの関連付け
xRay(標準でチェックが入っています)
- プロパティ/説明
ヘッダの画像を指定します。
フッタ文字のテンプレート変数
- メイン/変数名
フッタ文字
- メイン/見出し(入力フィールド名)
フッタ文字
- メイン/入力タイプ
text
- テンプレートとの関連付け
xRay(標準でチェックが入っています)
- プロパティ/説明
フッタの文字を入力します。
リソースの編集
管理画面左のリソース一覧から「home (1)」の編集画面を開くと、「カスタムフィールド(テンプレート変数)」部分に「ヘッダ画像」と「フッタ文字」の入力領域が表示されています。ここに適当な画像や文字を入れて保存します。
適当に入力↓
この例ではヘッダ画像はサンプルサイトに付属している画像の「MODX」のMの字を赤くした画像、フッタ文字は年号を2013ではなく2014にして保存しました(実際に試す場合は画像を適当にご用意ください)。
ただ、まだテンプレートに手を加えていないため、この状態で保存してもページには何の変化もありません。
テンプレートの変更
xRayのテンプレートを次のように変更します。
<!DOCTYPE html>
<head>
<base href="[(site_url)]">
<meta charset="UTF-8">
<title>[*pagetitle*]|[(site_name)]</title>
<meta name="description" content="[*description*]">
<meta name="keywords" content="[*キーワード*]">
<link rel="stylesheet" type="text/css" href="assets/templates/xray/style.css">
<link rel="stylesheet" type="text/css" href="assets/templates/xray/content.css">
</head>
<body>
<div class="wrap">
<div class="header">
<header>
<div class="slogan">[(site_slogan)]</div>
<h1><img src="[[TV表示 &tv_name=`ヘッダ画像`]]" alt="[(site_name)]" /></h1>
</header>
</div>
<div class="navi">
<nav>
[[Wayfinder?startId=0&level=2]]
</nav>
</div>
<div class="content">
<nav>
[[TopicPath]]
</nav>
<article>
<h2>[*pagetitle*]</h2>
[[Wayfinder?
&outerTpl='@CODE:<ul class="subnavi">[+wf.wrapper+]</ul>'
&level=1
]]
[*content*]
</article>
</div>
<div class="footer">
<footer>
[[TV表示 &tv_name=`フッタ文字`]]<br />
Mem: [^m^], SQL: [^qt^], [^q^] request(s), PHP: [^p^], total: [^t^], include [^f^]files, page retrieved from [^s^].
</footer>
</div>
</div>
</body>
</html>
具体的にはオリジナルのxRayから次の部分が変更になっています。
- 変更点-ヘッダ画像部分
<h1><img src="assets/templates/xray/images/header_image.png" alt="[(site_name)]" /></h1>
↓
<h1><img src="[[TV表示 &tv_name=`ヘッダ画像`]]" alt="[(site_name)]" /></h1>
- 変更点-フッタ文字部分
(c)2013 [(site_name)]<br />
↓
[[TV表示 &tv_name=`フッタ文字`]]<br />
表示確認
テンプレートを保存後、実際にサイトを表示するとどのページのヘッダ画像もフッタ文字も「home (1)」のリソース編集画面で設定したものが使われています。
今後は、「home (1)」のリソース編集画面からヘッダ画像とフッタ文字を自由に変えることができるようになります。
補足1 - 例外ページの追加
サンプルサイトでは全てのページが同じテンプレートを利用しているため、「home (1)」のリソース編集画面以外にもヘッダ画像とフッタ文字の設定ができるようになっていて、今回作成したスニペットは次にような動作になっています。
基本は「home (1)」のリソース編集画面で設定しているヘッダ画像/フッタ文字を利用し、もし各リソースで個別にヘッダ画像/フッタ文字を設定している場合はそちらを優先する。
このような動作なので特定ページだけヘッダ画像を変えたい場合はそのページのリソース編集画面でヘッダ画像を変更すればそこだけ変更することが可能です。
補足2 - 例外ページが不要な場合
とはいえ、ヘッダ画像/フッタ文字は全ページ共通で、ページ毎に個別に設定できる必要はないという場合があります。その場合は次のどちらかの方法をとることができます。
- 「home (1)」だけ違うテンプレートにする
- ManagerManagerで「home (1)」以外のリソースではヘッダ画像/フッタ文字の編集領域を非表示にする
前者は単純に「home (1)」用にテンプレートを用意し、テンプレートを変数を新しく用意したテンプレートだけに紐付けさせます。場合によってテンプレートの管理が煩雑になる可能性があります。
後者はManagerManagerプラグインを利用して、ヘッダ画像/フッタ文字の編集領域を制御します。今回のサンプルの場合、チャンクの「mm_rules」に以下の記述を追加します。
- メイン/チャンクコード
//一番下に追加する
global $content;
if($content['id'] <> 1){
mm_hideFields('フッタ文字,ヘッダ画像');
}
これはリソースIDが1の「home (1)」以外のリソース編集画面でヘッダ画像/フッタ文字を非表示にルールです。これで余計な表示が行なわれなくなります。
また、更に別の方法としてヘッダ/フッタ周りの画像や文字を編集する専用の隠しリソースを用意する方法もあります。
終わりに
最初にも書いたとおり、MODXに慣れている方ならばヘッダやフッタの一部をチャンクとして切り出し、個別に編集できるようにする方法がセオリーだと思います。
ただ、他の方に運用をお願いする場合はこのような方法をとることでリソース編集画面のみで、そのリソースのみならず、ヘッダやフッタの編集まで行なえるようになるため、場合によってはシンプルな運用方法が実現できるのではないでしょうか。
