サイト用テンプレートの作り方

キーワード:テンプレート 作り方

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

この文章でわかる事

参考サイト

http://ringo-site.com/template/free/hptemplatecom/top-body.html
http://chibinowa.net/modx/tutorial/newtemplate/
http://modx.jp/blog/20141212.html

初めに

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

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

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

サンプルファイル(htmlのサンプルテンプレート)

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

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

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

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 2011 &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行を付け加えます。

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

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

baseタグを使うのはMODXの特徴のひとつですが、使わなくてもサイトは構築できます。その代わりMODXの大きな特長であるリンクタグが使いづらくなるため、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ファイルの内容をコピーしてください。

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

プロフィール

ページ設定

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

<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)]" />   <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 2011 &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に保存します。

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

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

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

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

テンプレートの指定変更

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

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

チャンクとは

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

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

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

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

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

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

リソースの作成

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

コンテンツが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>

(クリックで拡大)
エディタイメージ

 

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

サイトの確認

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

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

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

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

PR

  • KAGOYA
  • ASP at AKIHABARA Japan
  • CMS AWARDS 2007 Winner
ページトップへ