DreamTemplateのMODx向けカスタマイズ例

テンプレートの準備

DreamTemplateのテンプレートは、Zipアーカイブになっています。ダウンロードしたZipアーカイブを展開します。(WindowsXPの場合は、右クリックして「すべて展開」。)

DreamTemplateの使い方

htmlフォルダにあるすべてのHTMLを開いて、どのHTMLをMODxテンプレート用に編集するかを決めます。

DreamTemplateの使い方

MODx用に編集するHTMLを開いて、どの部分にどのエレメントを割り当てるかという方針を決めます。

MODx用テンプレートの作成に慣れていない方は、下図のようにプリントアウトして赤ペンで書き込むと確実です。

DreamTemplateの使い方

テンプレートをアップロード

htmlフォルダをMODxサイト内のassets/templatesディレクトリにまるごとFTPでアップロードします。(HTMLファイルをアップロードする意味はありませんが、以下の作業に必要なため、HTMLファイルを動かさずそのままにしています。)

テンプレートの作成

  1. MODx管理画面の「リソース」メニューの「リソース管理」の「テンプレート」タグを開き「テンプレートの作成」をクリック。
  2. テンプレート名を半角英数字で入力。特徴や使用箇所がわかるような名称。
  3. 説明を入力。特徴や使用箇所についての補足説明など。
  4. テンプレート(HTML)をテキストエディタ開き、すべてをコピー。
  5. 「テンプレートの作成/編集」画面の「テンプレートコード」に貼り付け。

テンプレートの編集

上記の方針を元に、「テンプレートの作成/編集」画面で編集します。このサイトの場合の編集例を下表に示します。

 方針

ソース編集例(このサイトの場合)
  <html>  
  <head>  
サイト名+リソース名 <title>DreamTemplate.com</title> <title>[(site_name)] | [*pagetitle*]</title>
METAタグの文字コードをUTF-8に、リソースの説明(description)を読み込むように設定 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="[*description*]" />
CSSのパスをテンプレートの場所に修正 <link href="style.css" rel="stylesheet" type="text/css"> <link href="[(base_url)]assets/
templates/5513/
style.css" rel="stylesheet" type="text/css" />
<base href="[(site_url)]" />
  </head>  
  <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">  
  <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">  
  <tr>  
ロゴ部分
画像のパスをロゴを編集した画像ファイルに修正。
<td><img src="images/index_01.jpg" alt="" width="1000" height="142" border="0" usemap="#Map">
</td>
<td>
<img src="assets/templates/5513/
images/index_logo.jpg
" alt="logo" width="1000" height="142" border="0" usemap="#Map" />
</td>
  </tr>  
  <tr>  
画像のパスをテンプレートの場所に修正 <td height="61" background="images/index_02.gif">
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<td height="61" background="assets/templates/
5513/
images/index_02.gif">
<table width="100%" border="0" cellspacing="10" cellpadding="0">
  <tr>  
  <td width="9%">&nbsp;</td>  
メニュー部分
一つのセルにしてWayfinderスニペットで作成したメニューに書き換え。
    <td width="7%" align="center">
    <a href="#" class="menu">
    Fonts </a>
    </td>
    <td height="61">
    <div id="mainmenu">
    [[Wayfinder? &startId=`0` &level=`1` &sortBy=`id`]]
    </div>
    </td>
    <td width="10%" align="center"> <a href="#" class="menu">Freebies</a></td>
    <td width="9%" align="center"><a href="#" class="menu">Graphics</a></td>
    <td width="9%" align="center"> <a href="#" class="menu">How-To</a></td>
    <td width="10%" align="center"> <a href="#" class="menu">Inspiration</a></td>
    <td width="9%" align="center"> <a href="#" class="menu">Reviews</a></td>
    <td width="10%" align="center"><a href="#" class="menu">Showcases </a></td>
    <td width="8%" align="center"> <a href="#" class="menu">Tools</a></td>
    <td width="8%" align="center"><a href="#" class="menu">Tutorials</a></td>
      <td width="11%">&nbsp;</td>  
      </tr>  
      </table></td>  
      </tr>  
      <tr>  
    画像のパスをテンプレートの場所に修正 <td height="234" background="images/index_03.jpg">
    <table width="100%" border="0" cellspacing="10" cellpadding="0">
    <td height="234" background="assets/templates/
    5513/
    images/index_03.jpg">
    <table width="100%" border="0" cellspacing="10" cellpadding="0">
      <tr>  
      <td width="32%">&nbsp;</td>  
    <td width="37%"><table width="100%" border="0" cellspacing="10" cellpadding="0">
      <tr>  
    タイトルに修正 <td><h2>Welcome to <strong>our web site</strong></h2></td> <td><h2>[*longname*]</h2></td>
      </tr>  
      <tr>  
    要約(序説)に修正 <td class="white-text">Sed diamaccusantium doloremque laudantium,<a href="#" class="white-link-underline"> totam rem aperiam eaquep</a>. Store veritatis et quasi architecto beatae vitae dicta sunt, explicabo nemo enim ipsam voluptatem.</td> <td class="white-text">[*introtext*]</td>
      </tr>  
      </table></td>  
      <td width="31%">&nbsp;</td>  
      </tr>  
      </table></td>  
      </tr>  
      </table>  
      <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">  
      <tr>  
      <td class="bg1"><table width="100%" border="0" cellspacing="10" cellpadding="0">  
      <tr>  
      <td width="3%">&nbsp;</td>  
      <td width="95%"><table width="100%" border="0" cellspacing="10" cellpadding="0">  
      <tr>  
      <td width="73%" valign="top"><table width="100%" border="0" cellspacing="10" cellpadding="0">  
      <tr>  
      <td class="bord"><table width="100%" border="0" cellspacing="1" cellpadding="0">  
      <tr>  
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">  
      <tr>  
      <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="10" cellpadding="0">  
      <tr>  
    リソース名に修正 <td width="20%" rowspan="2"><img src="images/index_07.jpg" width="169" height="169" alt=""></td> <td>[*longname*]</td>
    <td width="80%"><img src="images/index_13.gif" width="309" height="31" alt=""></td>
      </tr>  
      <tr>  
    内容[*content*]に修正 <td><strong>Sed diamaccusantium doloremque laudantium,</strong><a href="#" class="gray-text-underline"><strong> totam rem aperiam eaquep. Store veritatis</strong></a><strong> et quasi architecto beatae vitae dicta sunt, explicabo nemo enim ipsam voluptatem.</strong></td> <td>[*content*]</td>
      </tr>  
      </table></td>  
      </tr>  
    削除 <tr>           
    <td bgcolor="#C3C3C3"><table width="100%" border="0" cellspacing="5" cellpadding="0">
    <tr>
    <td width="11%" align="right"><img src="images/index_28.gif" width="30" height="30" alt=""></td>
    <td width="16%" align="center"><a href="#"><strong>Comments </strong></a></td>
    <td width="41%">&nbsp;</td>
    <td width="32%"> <a href="#"><strong>Leave Your Response</strong></a></td>
    </tr>
    </table></td>
    </tr>
      </table></td>  
      </tr>  
      </table></td>  
      </tr>  
    削除 <tr>  
    <td class="bord"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><table width="100%" border="0" cellspacing="10" cellpadding="0">
    <tr>
    <td width="20%" rowspan="2"><img src="images/index_18.jpg" width="169" height="169" alt=""></td>
    <td width="80%"><p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><img src="images/index_20.gif" width="273" height="28" alt=""></p></td>
    </tr>
    <tr>
    <td><strong>Sed diamaccusantium doloremque laudantium,</strong> <a href="#" class="gray-text-underline"><strong>totam rem aperiam eaquep. Store veritatis</strong></a><strong> et quasi architecto beatae vitae dicta sunt, explicabo nemo enim ipsam voluptatem.</strong></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td bgcolor="#C3C3C3"><table width="100%" border="0" cellspacing="5" cellpadding="0">
    <tr>
    <td width="11%" align="right"><img src="images/index_28.gif" width="30" height="30" alt=""></td>
    <td width="16%" align="center"><a href="#"><strong>Comments </strong></a></td>
    <td width="41%">&nbsp;</td>
    <td width="32%"><a href="#"><strong>Leave Your Response</strong></a></td>
    </tr>
    </table></td>
    </tr>
    </table></td>
    </tr>
      </table></td>  
      <td width="27%" valign="top"><table width="100%" border="0" cellspacing="10" cellpadding="0">  
      <tr>  
      <td bgcolor="#FFFFFF" class="bord"><table width="100%" border="0" cellspacing="10" cellpadding="0">  
      <tr>  
    サブメニュー部分
    1つのセルに統合して、サブメニューを挿入。
    <td><img src="images/index_10.jpg" width="191" height="162" alt="">
    </td>
    <td>
    <div class="side">
    <h3>ご案内</h3>
    [[Wayfinder? &startId=`2` &level=`1` &sortBy=`id`]]
    </div>
    <div class="side">
    <h3>新着情報</h3>
    <ul> [!Ditto? &parents=`3,4,5,6,7,8` &depth=`3` &display=`5` &showInMenuOnly=`1` &sortBy=`pub_date` &tpl=`LatestNews`]]
    </ul>
    </div>
    </td>
    </tr>
    <tr>
    <td>Sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. </td>
    </tr>
    <tr>
    <td><a href="#">&bull; Lorem Ipsum has been the </a><br>
    <br>
    <a href="#">&bull; Standard dummy text ever</a><br>
    <br>
    <a href="#">&bull; Make a type specimen book</a></td>
      </tr>  
      </table></td>  
      </tr>  
      <tr>  
      <td bgcolor="#FFFFFF" class="bord"><table width="100%" border="0" cellspacing="10" cellpadding="0">  
      <tr>  
    バナー部分
    1つのセルに統合して、バナーを挿入。
    このサイトでは、Banners という名前のチャンクを作って、そのチャンクを挿入。
    <td><img src="images/index_23.gif" width="158" height="24" alt=""></td> <td>{{Banners}}</td>
    </tr>
    <tr>
    <td>Sed diamaccusantium dolorem<br>
    que laudantium.</td>
    </tr>
    <tr>
    <td align="right"><a href="#"><img src="images/index_31.gif" alt="" width="79" height="24" border="0"></a></td>
      </tr>  
      </table></td>  
      </tr>  
      </table></td>  
      </tr>  
      </table></td>  
      <td width="2%">&nbsp;</td>  
      </tr>  
      </table></td>  
      </tr>  
      </table>  
      <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">  
      <tr>  
    画像のパスをテンプレートの場所に修正 <td height="68" background="images/index_35.gif"> <td height="68" background="assets/templates/
    5513/
    images/index_35.gif">
      <table width="100%" border="0" cellspacing="15" cellpadding="0">  
      <tr>  
    プライバシーポリシー
    このサイトでは27番リソースにリンク
    <td width="50%" align="center"><a href="#"><strong>Terms of Use</strong></a><strong class="blye-text-regular"> | </strong><a href="#"><strong>Privacy Statement </strong></a></td> <td width="50%" align="center">
    <a href="[~27~]">
    <strong>Privacy Statement </strong></a></td>
    著作権表示
    このサイトでは CopyYears スニペットを使用
    <td width="50%" align="center"><strong>&copy; 2009 Your Corporation. All rights reserved</strong></td> <td width="50%" align="center"><strong>Copyright &copy; 
    [!CopyYears?startYear=`2008`]] MODx Users Forum
    . All rights reserved</strong></td>
      </tr>  
      </table></td>  
      </tr>  
      </table>  
         
      <map name="Map">  
      <area shape="rect" coords="770,38,913,95" href="#">  
      </map>  
      </body>  
      </html>  

    「テンプレートの作成/編集」画面が使いづらいという方は、普段お使いのテキストエディタで編集してから、コピー&ペーストするとよいでしょう。

    関連記事

    MODXとは

    新着情報