【ハウツー】
話題の高機能CMS「MODx」 を試す! - 導入からテンプレート作成まで
9 テンプレートを作成する(3)
この時点で、作成したテンプレートにはドキュメントやスニペットなどの部品を埋め込むコードが書かれていないため、ドキュメントの本文が表示されることはありません。テンプレートには、スニペットやチャンク、またはドキュメントのタイトル、本文を含むテンプレート変数を埋め込むことができます。
テンプレートでは、「MODxタグ」と呼ばれる独自のタグを指定することで、その場に任意のスニペットや変数を埋め込むことができます。ドキュメントのIDやタイトル、説明文、本文といった情報は全てテンプレート変数に該当します。テンプレート変数は次のように指定することができます。
テンプレート変数タグ
[*テンプレート変数*]
例えば、ドキュメントのタイトルを埋め込むには [*pagetitle*] を、本文を埋め込むには [*content*] を指定します。ドキュメントが表示されるときにMODxタグで記述された [*変数名*] という部分は適切なテンプレート変数の値に置き換えてくれます。テンプレート変数は独自に追加することも可能ですが、ドキュメントは既定で多くの変数を用意しています。ドキュメントのテンプレート変数についてはMODxのドキュメントを参照してください。
スニペットをドキュメント内に追加するには、テンプレート変数とは異なるスニペット用のタグを使わなければなりません。
スニペットタグ
[[スニペット]]
スニペットを使うことで、任意のPHPコードを埋め込むことができます。
同様に、チャンクを埋め込むにはチャンク用のタグを使います。
チャンクタグ
{{チャンク}}
これらのMODxタグを使うことで、Webサイト全体のレイアウトや共通機能をテンプレートにまとめることができ、変更や組み替えも自由に行うことができます。
コード02
<html>
<head>
<title>[*pagetitle*]</title>
</head>
<body>
<h1>[*longtitle*]</h1>
<div>[*content*]</div>
</body>
</html>
|
【図22】プレビュー |
コード02は、コード01のテンプレートに、MODxタグを用いてドキュメントのテンプレート変数を参照させています。図22は、このテンプレートでドキュメントを表示した結果です。例えば [*pagetitle*] タグの部分にはドキュメントのタイトルが、[*content*] タグの部分にはドキュメントの本文が組み込まれていることが確認できます。
図22の結果は、テンプレートが異なるだけで図16と同じドキュメントであることに注目してください。このように、テンプレートの仕組みによってコンテンツに手を加えることなくデザインを変更することができます。大量のドキュメントを管理しなければならない場合でも、テンプレートを利用することで柔軟に対応することができるでしょう。
関連サイト
- 関連したタグ
新着記事
| Google+アプリ、iOS版に続いてAndroid版も新UIに、独自機能も [16:25 5/25] |
| Googleウェブマスターツール、ナビゲーションやダッシュボード画面を変更 [14:43 5/25] |
| Instagramキラー!? Facebookがカメラアプリをリリース [10:44 5/25] |
| 楽天、マレーシア国内向けのオンラインモール事業に参入 [10:11 5/25] |
| グリー、最大153ヵ国にアプリ配信ができる「GREE Platform」の提供を開始 [09:45 5/25] |
特設サイトの情報
人気記事
一覧イチオシ記事
新着記事
|
【レポート】TVアニメ『ゆるゆり』、七森中☆ごらく部の世界戦略第2弾! 「ごらく部な地球の歩き方 ～香港編～」 [00:00 5/26] ホビー |
|
【コラム】理系のための恋愛論 第440回 彼女ができないのは…結婚体質だから?? [00:00 5/26] ライフ |
|
［注目映画紹介］「GIRL」 親友4人が抱える悩みをガールズトークを交えながらつづる [23:52 5/25] エンタメ |
|
［注目映画紹介］「メン・イン・ブラック3」タイムスリップで69年のMIBが見られワクワク [23:37 5/25] エンタメ |
|
女性従業員比率が高い企業は、業績が良い? -ヘイズ・ジャパン [23:05 5/25] キャリア |
サービス一覧
