CMSのポテンシャルを引き出す─MODxで作る商用サイト

第3回 MODxの基本操作とテンプレートを理解する

この記事を読むのに必要な時間:およそ 3 分

はじめに

前回はMODxにおける「リソース」について解説しました。今回もMODxを使用する上で必須といえる機能のひとつである,⁠テンプレート」とそれに付随する変数について解説していきます。

CMSとテンプレート

テンプレートという概念は,MODxに限らず,ほぼ全てのCMSに当てはまる重要な考え方です。例のごとく,「なかみつ園」を例に挙げてみます。どのページに遷移しても,会社のロゴや左右のナビゲーションメニュー,フッタなど,共通するパーツがあり,それによってデザインが統一されています。これらは,⁠テンプレート」という機能を使用することで実現しています。

前回の記事で,いくつかのリソースを作成してきましたが,その際,⁠使用テンプレート」という設定項目にはデフォルトである「BaseTemplate」という大変シンプルなテンプレートを使用していました。⁠BaseTemplate」の中身を確認するには,管理画面左側ウインドウの「エレメント」タブより,⁠テンプレート」ツリーを表示します。テンプレートの中身は次のようになっているはずです。

リスト1 BaseTemplateの中身

<html>
<head>
<title>[[++site_name]] - [[*pagetitle]]</title>
<base href="[[++site_url]]" />
</head>
<body>
[[*content]]
</body>
</html>

テストとして,</body>の直前に次の2行を加えて保存してみてください。念のためスクリーンショットも貼り付けておきます図1)⁠

<hr />
ここがフッタのつもり

図1 テンプレートに簡単なフッタを追加

図1 テンプレートに簡単なフッタを追加

どうでしょうか?トップページである http://www.example.com/ から各ページを見ると,それぞれのコンテンツにフッタが加えられ,全体のデザインが変更された形になりました。

また,ページのソースとテンプレートを比較すると,テンプレート内に記述されている変数のような文字列が様々な値に置き換えられていることに気がつきます。これらは,MODxが使用する特殊なタグです。

MODxタグの種類

テンプレート中やコンテンツ中に,⁠タグ」という特別な記述をすると,その部分を動的な値として出力することができます。実際のページとテンプレートの内容を比較すると一目瞭然ですが,現状で設定されているタグと置き換えられる値は表1の通りです。

表1 デフォルトテンプレート中に使用されているMODxタグ

タグ置き換えられる値
[[++site_name]]MODX Revolution
[[++site_url]]http://www.example.com/
[[*pagetitle]]「Home」「会社概要」など
[[*content]]ここに会社概要の説明が入ります

さて,タグの書式に微妙な違いがあることに気がつきましたか? MODxには表2のようなタグフォーマットが存在します。例のごとく,またもや意味不明な用語がたくさん出てきますが,現時点で覚えていただきたいものは,今回紹介する「テンプレート変数」「システム設定」に関するタグ,つまり

  • [[++タグ名]]
  • [[*タグ名]]

という書式です。

表2 MODxが使用するタグフォーマット

エレメント書式
テンプレート変数[[*templatevar]]
チャンク[[$chunk]]
スニペット[[snippet]]
プレースホルダー[[+placeholder]]
リンク[[~link]]
システム設定[[++system_setting]]
言語[[%language_string_key]]

テンプレート変数

テンプレート変数(Template Variable)とは,サイト管理者が各リソースで設定可能な変数で,英文のドキュメントなどでは略してTVとも表記されます。

リソースを作成,または更新する際,画面内には「使用テンプレート」⁠タイトル」⁠長いタイトル」などを設定するテキストフォームがあり,たとえば,⁠長いタイトル」というテキストボックスにマウスカーソルを合わせると,次のようなポップアップが表示されます。

[[*longtitle]] 長いタイトルを指定します。[[*longtitle]]として呼び出します。

つまり,テンプレートやコンテンツ内に[[*longtitle]]という記述を行うと,そのタグが「長いタイトル」の中身に置き換えられることになります。試しに,会社概要のページを図2のように変更してみました。

図2 会社概要のリソース

図2 会社概要のリソース

このリソースを実際にブラウザから確認してみると,図3のような表示になります。

図3 会社概要のブラウザでの表示

図3 会社概要のブラウザでの表示

このように,テンプレート変数を使用することにより,各ページに動的な値を出力することができます。実用的でわかりやすい例として,テンプレートの<TITLE>タグの部分を

<title>[[*pagetitle]] | サイト名</title>

としておくことで,SEO的にもわかりやすいページタイトルをつけることができます。

著者プロフィール

中満英生(なかみつひでお)

大学時代に出会ったSolarisがきっかけでUNIXの世界へ。その後ホスティングプロバイダ,データセンターで実務経験を積む傍ら,雑誌記事の執筆や技術セミナーの講師を務める。サーバ設定の他,セキュリティに関する著作や技術者エッセイも執筆経験あり。

コメント

コメントの記入