テンプレートの作り方

ここでは、ウェブサイトのhtmlをMODxのテンプレートして登録する手順の初歩を解説します。

この文章でわかる事

  • テンプレートの簡単な作り方（登録の仕方）
  • チャンクの簡単な使い方
  • 新しいリソース（ページ）の作り方

解説にあたり、以下のようなデザインのページをテンプレートとして用意しました。
テンプレートチュートリアルのデザイン画像 　テンプレートチュートリアルのデザイン画像

このページは以下の4つのエリアに分かれています。

  • ヘッダ（サマリー、キービジュアルとキャッチコピー）
  • メニュー
  • メインコンテンツ（記事が入るエリア）
  • フッター

 

それでは、このhtmlをMODxのデザインテンプレートとして利用してみましょう。

サンプルファイル（htmlのサンプルテンプレート）

MODxのテンプレートのもとになるサンプルhtmlを用意しました。サンプルファイルは以下のリンクからダウンロード可能です。htmlファイル・cssファイル、画像の3点が含まれています。
再配布を行わない限り自由に使って頂いてかまいません。

サンプルファイル一式(sample_ja.zip)をダウンロード

ダウンロードファイルには下記のファイルが含まれています。

  • modx_sample_ja.html
  • modx_sample_ja02.html
  • cssフォルダ
    style.css
    style02.css
  • imgフォルダ
    各種画像ファイル

modx_sample_ja02.htmlとcss/style02.cssはキービジュアルだけが違うバージョンです。解説中は特に触れませんが、好みに合わせてこちらを使っていただくこともできます。

htmlをmodxテンプレートとして修正する

htmlファイルは、以下のようなソースとなっています。このページの下のコードをコピーしてエディタにペーストするか、ダウンロードしたmodx_sample_ja.htmlをエディタで開いてください。このファイルを元にhtmlをmodx化（modxのテンプレートを作成）します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
  <meta name="author" content="thr" />
  <title>MODx サンプルテンプレート.</title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="wrapper">
    <div id="header">
      <h1>MODxはデザインの自由度が高いオープンソースCMSです。</h1>
    </div><!-- header end -->

    <div id="key">
      <span>MODx サンプルテンプレート.</span>
    </div><!-- key end -->

    <div id="main">
      <div id="left">
        <div class="gn_menu"><span>メニュー</span></div>
        <ul class="gn">
          <li><a href="#">ブルー</a></li>
          <li><a href="#">レッド</a></li>
          <li><a href="#">グリーン</a></li>
          <li><a href="#">パープル</a></li>
          <li><a href="#">オレンジ</a></li>
        </ul>
      </div><!-- left end -->

      <div id="right">
        <h2 class="midashi"><span>見出しテキスト（class="midashi"でこの形になります。)</span></h2>
        <p>MODx用サンプルテンプレートです。このテンプレートは<a href="http://d-sity.com/">THR</a>によって制作されました。<br />MODxのテンプレートの使い方を解説する為に作成しました。再配布などをしなければ、ご自由にご利用ください。</p>

        <h2 class="midashi"><span>リードテキストが入ります、リードテキストが入ります</span></h2>

        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキステキストテキステキストテキストテキストテキストテキストテキストテキステキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストテキストトテキスト</p>

        <h2 class="midashi"><span>リードテキストが入ります、リードテキストが入ります</span></h2>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキステキストテキステキストテキストテキストテキストテキストテキストテキステキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストテキストトテキスト</p>
      </div><!-- right end -->

    </div><!-- main end -->
  <div id="footer_link">
    <ul> 
      <li><a href="#">HOME</a> ｜</li>
      <li><a href="#">プライバシーポリシー</a> ｜</li>
      <li><a href="#">お問い合わせ</a> ｜</li>
      <li><a href="#">サイトマップ</a></li>
    </ul> 
    </div><!-- footer_link end -->

    <div id="footer"><span>Copyright 2009 &copy; Your name All rights reserved. Powered by <a href="http://www.d-sity.com/index.html">Thr</a></span></div>
  </div><!-- wrapper end -->
</body>
</html>

Head要素の修正

最初に、head要素のmeta要素の下に次の1行を付け加えます。

これは、画像などを探すために使われるベースURIで、MODxをインストールしたディレクトリを指します。

<base href="[(site_url)]"></base>

次に、titleタグを下のコードに置き換えます。

・pagetitle　：　リソースの作成/編集で入力するタイトルが表示されます。
・site_name　：　ツール -› グローバル設定 -› サイト -› サイト名　が表示されます。

<title> [*pagetitle*] | [(site_name)]</title>

次に、head要素の中のcssファイルへのリンクを変更します。テンプレートHTMLのhead要素の中のlink行を次のコードに置き換えます。この例では、assets/templates/tutorial/css/style.cssを参照します。後ほどCSSをこの場所へアップロードする必要があります。

<link rel="stylesheet" type="text/css" href="[(base_url)]assets/templates/tutorial/css/style.css" />

スタイルシートをMODxのリソースとして管理する方法もあります。この場合は、下の手順でリソースを新規に作成してからCSSファイルの内容をコピーしてください。

サイト -› リソースの作成

プロフィール

  • タイトル：style(任意)
  • エイリアス：style
  • 使用テンプレート：(blank)

ページ設定

  • リッチテキストで編集：未チェック
  • 公開する：チェック
  • 検索対象に含める : 未チェック
  • キャッシュを生成 : チェック
  • 更新時にキャッシュをクリア : チェック
  • コンテントタイプ：text/css

スタイルシートをリソースとして管理する場合、リンクを以下のコードに置き換えます。

<link rel="stylesheet" type="text/css" href="[~リソースid番号~]" />

 

以下は、スタイルシートをファイルで管理することを前提に説明します。

 コンテンツの修正

サンプルhtmlの<div id="right">から</div><!-- right end-->を次のコードに置き換えます。

      <div id="right">
        [*content*]
      </div> <!-- right end -->

[* *]で囲まれた部分は「テンプレート変数(Template Valiables,TV)」といいます。変数といっても数字ではなく、各リソースの入力項目に対応したタグのようなものです。たとえばこの [*content*]には、投稿画面の「内容(content)」が表示されます。テンプレート変数には、MODxがあらかじめ用意しているものが幾つかありますが、ユーザーが独自に追加することもできます。

キャッチコピーの修正

次にフッターをパーツ化します。htmlファイルの中ほどにあるdiv要素を下の要領で置き換えます。

    <div id="key">
      <span>MODx サンプルテンプレート.</span>
    </div><!-- key end -->
    <div id="key">
      <span>{{catch_copy}}</span>
    </div><!-- key end -->

これは「cach_copy」というチャンク(共通部品)を作成し、チャンクを変更することですべてのページの内容を一度に変更することが目的です。

テンプレートをサイトへ反映させる

modx化したサイトテンプレート

 

完成したMODxのテンプレートがこれです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
  <base href="[(site_url)]"></base>
  <meta name="author" content="thr" />
  <title> [*pagetitle*] | [(site_name)]</title>
  <link rel="stylesheet" type="text/css" href="[(base_url)]assets/templates/tutorial/css/style.css" />

</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1>MODxはデザインの自由度が高いオープンソースCMSです。</h1>
    </div><!-- header end -->

    <div id="key">
      <span>{{catch_copy}}</span>
    </div><!-- key end -->

    <div id="main">
      <div id="left">
        <div class="gn_menu"><span>メニュー</span></div>
        <ul class="gn">
          <li><a href="#">ブルー</a></li>
          <li><a href="#">レッド</a></li>
          <li><a href="#">グリーン</a></li>
          <li><a href="#">パープル</a></li>
          <li><a href="#">オレンジ</a></li>
        </ul>
      </div><!-- left end -->

      <div id="right">
        [*content*]
      </div><!-- right end -->

    </div><!-- main end -->
  <div id="footer_link">
    <ul> 
      <li><a href="#">HOME</a> ｜</li>
      <li><a href="#">プライバシーポリシー</a> ｜</li>
      <li><a href="#">お問い合わせ</a> ｜</li>
      <li><a href="#">サイトマップ</a></li>
    </ul> 
    </div><!-- footer_link end -->

    <div id="footer"><span>Copyright 2009 &copy; Your name All rights reserved. Powered by <a href="http://www.d-sity.com/index.html">Thr</a></span></div>
  </div><!-- wrapper end -->
</body>
</html>

テンプレートを作成する

作成したテンプレートを登録するために、このHTMLをMODxに保存します。

  • MODxマネージャにログインします。
  • "リソース"をクリックします。
  • 下の段のタブから"リソース管理"をクリックします。
  • テンプレートをクリックします。
  • "テンプレートの作成"をクリックします。

テンプレート作成画面で以下の要領で操作します。

  • テンプレート名　：　tutorial（なんでもあなたの好きな名前にして構いません）
  • 説明　：　チュートリアルのテンプレート
  • 既存のカテゴリ　：　テンプレートを分類するためのカテゴリーを選びます。
  • カテゴリ作成　：　既存のカテゴリに分類したいカテゴリが見つからない場合に任意の名前を入力することでカテゴリが追加されます。
  • テンプレートコード(html)　：　上記のコードを貼り付けます。
  • "保存"ボタンをクリックしてテンプレートを保存します。

テンプレートに使うファイルをサーバーへアップロード

テンプレートに必要なファイルをサーバ上にアップロードします。

  • FTPソフトでMODxをアップロードしたサーバーに接続します（例えば、"/public_html/ドメイン名/"）。
  • (MODxをインストールしたディレクトリ)/assets/templates/に移動します。
  • templatesフォルダの中に新しいフォルダを作成します(例えば、"tutorial")。
  • tutorialフォルダの中に2つの新しいフォルダを作成します（"css"フォルダと"img"フォルダ）。
  • "img"フォルダに、サンプルファイルのimgフォルダ内のすべてのファイルをアップロードします。
  • "css"フォルダに、style.cssをアップロードします。

cssファイルをMODxのリソースとして管理している場合は、style.css内の画像ファイルへのパスを変更する必要があります。

テンプレートの指定変更

それでは、今までの作業をもう一度確認してみましょう。

  • テンプレートの中のstyle.cssへのリンクは正しく設定されてますか？（[(base_url)]assets/templates/tutorial/css/style.css）
  • tutorial/cssフォルダの中にstyle.cssはありますか？
  • tutorial/imgフォルダの中にサンプルファイルのimgフォルダ内の画像がすべてありますか？
  • MODxにcatch_copyという名前のチャンクはありますか？

さあ、マネージャ -> ツール -> グローバル設定 -> サイト　へ行って、次の情報を入力しましょう。

  • サイト名（最上部）　：　サイトの名前を入力
  • デフォルトテンプレート　：　ドロップダウンリストからtutorialテンプレートを選択
  • 全てのリソースが・・・リセットする　：　今回作成したテンプレートをすべてのリソースに反映させる場合はチェック
  • 一番上までスクロールして保存ボタンをクリック

チャンクとは

チャンクとは、MODxを使用する際に、Webページの指定した場所に挿入、表示できるコード/HTMLのパーツのことです。チャンクを利用することにより、長大な記述になりがちなテンプレートをすっきりと構造化することができます。MODx以外の多くのCMSでも、ヘッダやフッタをパーツとして管理する仕組みがあると思いますが、MODxではチャンクがこれに相当します。

以下の手順でチャンクを作成します。

リソース->リソース管理->チャンク->チャンクの作成

  • チャンク名:catch_copy
  • チャンクの説明：キャッチコピー
  • カテゴリ：既存の候補を選ぶか新しいカテゴリを入力して作成

HTMLの断片をコピーし、"チャンクコード(html)"にペーストします。今回はタグに囲まれたエリアにチャンクを挿入しているので、下記のようにキャッチコピー部分に表示させたい文字を入力してから保存します。チャンクには通常htmlを入力しますが、今回作成したcatch_copyチャンクは<span></span>に既に囲まれているのでタグを記入していません。

あなたの好きなキャッチコピー

チャンクを利用すると、ヘッダーやサイドバーなど、ウェブサイトの各ページで共通に使用したい箇所を独立して管理することができます。ウェブサイト内で複数のテンプレートを使用する場合（例えば2カラムのページと3カラムのページが混在するサイトなど）、チャンクを利用すれば、一箇所を修正するだけで作業が完了します。ウェブサイトの管理がとても便利になります。

リソースの作成

サイト -› リソースの作成　の順で操作し、以下の項目を入力します。

  • タイトル[*pagetitle*]：ページのタイトルを入力します。
  • エイリアス[*alias*]：ページのアドレスを入力します。「index.html」などの時は「index」と入力。
  • 使用テンプレート：使用するテンプレートを選びます。今回作ったテンプレート(tutorial)であることを確認します。
  • 内容（MODxタグ）[*content*]：このページのコンテンツ（内容）を入力します。

コンテンツがWISYWIG(TinyMCE)エディタで表示されている場合は、右上の「HTML」ボタンをクリックして張り付けるか、
ページ設定タブの「リッチテキストで編集」のチェックを外して一旦保存し、生のHTMLにしてから貼り付けます。

<h2 class="midashi"><span>見出しテキスト（class="midashi"でこの形になります。)</span></h2>
<p>MODx用サンプルテンプレートです。このテンプレートは<a href="http://d-sity.com/">THR</a>によって制作されました。<br />
MODxのテンプレートの使い方を解説する為に作成しました。再配布などをしなければ、ご自由にご利用ください。
</p>

（クリックで拡大）
エディタイメージ

 

これで、サイトテンプレートの反映とリソースの入力が終わりました。さぁ、実際にサイトを見て確認してみましょう。

サイトの確認

前の章で作ったリソースをプレビューします。

  • 管理画面の左側ツリーの中から作成したリソースを右クリック（MACユーザはアイコンをクリック）
  • プルダウンメニューの中から「プレビュー（別窓）」をクリック

テンプレートチュートリアルのデザイン画像

 

いかがでしょうか？上記のようなデザインになっていれば、テンプレートの変更は成功です。
このページでは、「テンプレートの作成」「チャンク」「リソースの作成」といったMODxの基本操作を説明しました。

ぜひ、あなたのmodxで、あなたが使いたいhtmlデザインファイルをテンプレートとして登録してみてください。