静的HTMLから作るMODXテンプレート

更新日
2017.08.26
作成日
2014.05.09

移行作業中のため一部のページが正しく表示されていない場合があります(o-ω-))

静的 HTML から MODX 用のテンプレートを作る方法を部品ごとに説明します。

はじめに

MODX テンプレートには PHP のコードが含まれないので、オジリナルのテンプレートを作るには静的 HTML からデザインするのが一番簡単です。

テンプレートの予備知識として基本機能の「テンプレート」をご覧頂ください。

  • グローバルナビゲーション
  • パンくずナビゲーション
  • サブページナビゲーション
  • 新着情報の一覧(今回は新着情報に各詳細ページがある仕様にします)

このへんの基本的なサイトの機能を付けたテンプレートを作成してみましょう。

デザイン用ファイルのフォルダ構成

CSS ファイルや画像などのデザインの部品を置く場所は基本的にどこでもいいんですが、一応「/assets/templates/」というフォルダが用意されているのでそこにまとめて入れてもいいですし、私の場合はルート直下に「/styles/」というフォルダを作って「/styles/スタイル名/」という感じでまとめています。

サイトルート
├ /assets/
├ /manager/
├ /styles/
│ ├/js/
│ │ └jquery.min.js ← スタイルを変えても毎回使うようなものは外側に置いとくといい。
│ └/modxx01/
│  ├ /images/
│  └ style.css
└ index.php

とりあえずこのようなフォルダ構成にすることにします。お好きな構成にして下さい。

デザインを考える

まずサイトのデザイン制作ですが一番楽なのは手打ちでもいいし Dreamwerver などのオーサリングツールを使ってもいいので普通にデザインします。

メニューや内容が変更されるような場所には「ここにタイトル」「ここに記事本文」など仮で入れておきます。

この時点で JavaScript などかなり作りこんでしまった方が楽なので、モックアップを作成するように完成に近いかたちでデザインを作っておきます。

ひとまずサンプルで作った完全プレーンな HTML がこちら。(昔作った使い回しの Web1.5 なのでちょっと作り直したい)このデザインからどこをどうしたいか考えるとざっくりと右のような感じになる。

HTML コードは以下のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <base href="[(site_url)]">
  <title>ホーム | サイト名</title>
  <link rel="stylesheet" type="text/css" href="styles/modxx01/style.css" media="screen">
</head>
<body class="home">
  <div class="wrapper clearfix">
    <!-- サイトヘッダー -->
    <div id="SiteHeader">
      <h1 id="top">サイト名</h1>
      <!-- トップのナビゲーションメニュー -->
      <div class="topnavi">
        <ul>
          <li><a href="#">home</a>
          <li class="active"><a href="#">page1</a>
          <li><a href="#">page2</a>
        </ul>
      </div>
    </div>
    <!--/#SiteHeader-->
    <!--パンくず -->
    <div class="topicpath">
      HOME » page1
    </div>
    <!-- ドキュメントの内容 -->
    <div class="document clearfix">
      <div class="main">
        <!--ページ見出し-->
        <h2>ページのタイトル</h2>
        <!-- 本文 -->
        <div class="content">
          <p>本文<br><br><br><br><br></p>
        </div>
        <!-- 新着情報 -->
        <div class="newslist">
          <h3 class="noext">新着情報</h3>
          <ul>
            <li><a href="#">ニュース記事タイトル2 (2012.10.01)</a>
            <li><a href="#">ニュース記事タイトル1 (2012.10.01)</a>
          </ul>
        </div>
      </div>
      <!-- サイドバー -->
      <div class="sidebar">
        <ul class="submenu">
          <li><a href="#">サブメニュー1</a>
          <li><a href="#">サブメニュー2</a>
        </ul>
        <p>何か表示</p>
        <p>何か表示</p>
        <img src="styles/modxx01/images/twittersample.png" width="200" height="300" alt="side sample">
      </div>
    </div>
    <!--/.document-->
    <div id="PageTop">
      <a href="#top">PageTop</a>
    </div>
    <div class="docinfo">
      <span class="date">Edited on 2012.11.13</span>
    </div>
    <!-- サイトフッター -->
    <div id="SiteFooter">
      <ul class="credit">
        <li> Copyright (c) 2014 サイト名
      </ul>
    </div>
    <!--/#SiteFooter-->
  </div>
  <!--/.wrapper-->
</body>
</html>

この中で自動的に表示させたい所を MODX タグに置き換えていきます。

BaseURLを付ける

ヘッダー部分にサイト URL タグの入った base href タグを入れます。理由はこちら。

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

タイトルや本文を置き換える

まず34はページ毎に入力した内容をそのまま表示させるだけなので、リソース変数[*pagetitle*] [*content*] と置き換えるだけです。

  • [*pagetitle*] - リソースのページタイトル
  • [*content*] - リソースの本文
  • [*editedon*] - リソースの編集日時タイムスタンプ
  • [(site_name)] - グローバル設定のサイト名
  • [(site_url)] - グローバル設定のサイトURL
 <!--ページ見出し-->
<h2>ページのタイトル</h2>

この部分を以下のように置き換えます。

 <!--ページ見出し-->
<h2>[*pagetitle*]</h2>

本文部分も同じように置き換えます。

 <!-- 本文 -->
<div class="content">
[*content*]
</div>

その他細かい部分、ブラウザに表示されるタイトル部分と<h1>のサイト名、フッターのサイト名もそれぞれ置き換えておきます。

<title>[*pagetitle*] | [(site_name)]</title>
<h1 id="top">[(site_name)]</h1>
<li> Copyright (c) 2014 [(site_name)]

ページの上部へ戻るリンクはページ内リンクですが BaseURL が影響してホームに飛んでしまうのでページの URL を付けておきます。

<a href="[~[*id*]~]#top">PageTop</a>

編集日時に使う[*editedon*]モディファイアで自由なフォーマットに変換する事ができる。

<span class="date">Edited on [*editedon:date*]</span>

ヘッダーのグローバルナビゲーションを作る

次に1のヘッダーメニューを作ります。

ヘッダーメニューは頻繁に変わることが少ないので手書きでも十分ですが、今回はアクティブなページを判断したいので標準でインストールされる Wayfinder というスニペットを使います

<!-- トップのナビゲーションメニュー -->
<div class="topnavi">
 <ul>
  <li><a href="#">home</a>
  <li class="active"><a href="#">page1</a>
  <li><a href="#">page2</a>
 </ul>
</div>

Wayfinder はリストタグで表示してくれるので、ul 部分をそのままスニペットタグに置き換えます。

<!-- トップのナビゲーションメニュー -->
<div class="topnavi">
 [[Wayfinder? &startId=`0` &level=`1`]]
</div>
  • &startId=`0` - ID0 を始まりにします。
  • &level=`1` - ツリーの深さ 1 までのリソースを取得します。

ID0 のリソースは存在しませんが、0を指定するとサイトルートになります。

リストタグは特に指定が無い限りシンプルなものを自動的に出力しますが、パラメータでテンプレートを変更する事ができます。一番外枠の ul を変更するパラメータは&outerTplです。

<div class="topnavi">
 [[Wayfinder?
  &startId=`0`
  &level=`1`
  &outerTpl=`@CODE:<ul class="topmenu">[+wf.wrapper+]</ul>`
 ]]
</div>

テンプレートはそのまま文字列を書くとチャンク名としてチャンクの内容がを使用されますが、先頭に@CODE:と書くことで直接 HTML を記述できます。短くて使い回しのしないコードはチャンクを作るよりも直接記述した方が楽です。

途中に[+wf.wrapper+]と書かれているのは Wayfinder のプレースホルダです。この場所に中身の <li> が入るよ~。という目印です。これが入っていないとリストが表示されません!

アクティブなリスト要素には標準でactiveというクラス名が付くのでこのクラスにスタイルを付けることで開いているメニューだけ色を変更したりできます。このクラス名は自分自身とそこまでのパンくずになる親にも付きます。純粋に自分自身だけを判断するにはパラメータの&selfClassでクラス名を指定できます。

その他色々なテンプレートやクラス名を指定出来ますが書き切れないので詳しくは Wayfinderの説明ページ を御覧ください。

サブページナビゲーションを作る

6の「今見ているページ以下のサブメニュー」を作ります。

これは上で作ったメインメニューとは違い見ているページによって基準になるIDが変わってきます。

<ul class="submenu">
 <li><a href="#">サブメニュー1</a>
 <li><a href="#">サブメニュー2</a>
</ul>

この部分をそっくり以下のように置き換えます。

[[Wayfinder? &startId=`[*id*]` &level=`1` &outerClass=`submenu`]]

&startId[*id*]というリソース変数にすることで「自分自身」からのメニューを作成できる。

パンくずナビゲーションを作る

2のパンくずナビゲーションを作ります。これも標準でインストールされている「TopicPath」というスニペットを使用します。

<div class="topicpath">
 HOME &raquo; page1
</div>

と書いてある部分を以下のように変更します。

<div class="topicpath">
 [[TopicPath]]
</div>

これだけでもパンくずナビは表示されますが、今回はちょっと凝ってトップページだけサイトスローガンを表示させます。簡単な条件分岐はモディファイアを使うと便利。

<div class="topicpath">
 [[TopicPath:ifempty(`[(site_slogan)]`)]]
</div>

前に作ったメニューのパラメータの「?」や「&」と違い名称の後にセミコロン「:」でモディファイアを繋げることでその結果を使った分岐や装飾が出来ます。

この場合はifemptyというモディファイアで「もしTopicPathで表示する値がなければオプションの[(site_slogan)]を使用する」というように条件分岐しています。

新着情報を作る

ここは Ditto というスニペットを使用します。このスニペットも標準でインストールされます。メニューで使用した Wayfinder との違いは、Wayfinder はツリー構造を使用してネスト形式で表示出来るのに対して、Ditto はツリーの階層に関係なく一覧で表示させたりページネーションを付けることが出来ます。

今回は新着情報の詳細を書けるように専用のフォルダを作ることにします。適当な場所に新しいリソースを作成して、新着情報記事をこの中に書いていきます。新着情報の横にあるカッコ付きの数字がこのリソースのIDになるので、新着情報の一覧はこのIDを基準にして取得します。

<!-- 新着情報 -->
<div class="newslist">
 <h3 class="noext">新着情報</h3>
 <ul>
  <li><a href="#">ニュース記事タイトル2 (2012.10.01)</a>
  <li><a href="#">ニュース記事タイトル1 (2012.10.01)</a>
 </ul>
</div>

Ditto は Wayfinder と違い囲みタグは表示しないので<li>部分だけ変更します。

<!-- 新着情報 -->
<div class="newslist">
 <h3 class="noext">新着情報</h3>
 <ul>
  [[Ditto? &parents=`2` &display=`10`]]
 </ul>
</div>

上記の例では ID2 の下にあるリソースを作成日でソートして上位10件表示させます。

Ditto の始まりを表すパラメータは&parentsです、Wayfinder と違うので若干ややこしいかもしれません。(この2つのスニペットは使用頻度高いので似たパラメータは名称統一してたほうが覚えやすいんですが…作者が違うので難しいのかも)

Ditto のデフォルトテンプレは最低限しか表示されないのでこれだけだと下の画像のような表示になってしまいます。

ちょっと寂しすぎるのでリスト化して編集日時を付けてみましょう。

<!-- 新着情報 -->
<div class="newslist">
 <h3 class="noext">新着情報</h3>
 <ul>
  [[Ditto?
   &parents=`2`
   &display=`10`
   &tpl=`@CODE:<li><a href="[+url+]">[+title+] ([+date+])</a>`
  ]]
 </ul>
</div>

Ditto の記事表示用のテンプレートは&tplの1個しかないので比較的分かりやすいです。

ソースコードが長くなる場合はテンプレートのソースを記述したチャンクを作成して&tpl@CODE:を外してチャンクの名前を指定します。スニペットでテンプレート名としてチャンクを使用する場合ブラケット{{}}は必要ない。

&tpl=`新着用Dittoのテンプレート`

この新着情報はトップページにだけ表示したいので、.newslistの部分をテンプレートからそっくり切り取ってトップページのリソースの本文部分に貼り付けます。

TinyMCE などを使用している場合はタグが参照文字に変換されないように HTML ボタンを選んでコピペして下さい。このようにリソース本文に機能的なものを埋め込めこむ事もできます。

自由に編集出来るエリアを作る

7の自由に編集できるエリアを作ります。ここは動的に吐くものは無いのでテンプレート内にそのまま記述するだけでもいいんですけど、チャンクに分離して編集しやすいようにしておこうと思います。

管理画面の「チャンクを作成」のページを開いて新規作成します。

チャンク名はわかりやすく日本語で「サイドバーの自由エリア」にしました。プロパティタブのカテゴリや説明で、このチャンクの内容やどこで使用しているかなど更に詳しく書いておくとあとで把握しやすいです。

内容はテンプレートやリソースと一緒で HTML や MODX タグを記述できます。適当にテキストや HTML、ツイッターで作成したウィジェットなどを貼っときましょう。

サイドバーのメニュー部分は先に置き換えているので以下のようになっていると思います。

<div class="sidebar">
 [[Wayfinder? &startId=`[*id*]` &level=`1` &outerClass=`submenu`]]
 <p>何か表示</p>
 <p>何か表示</p>
 <img src="styles/modxx01/images/twittersample.png" width="200" height="300" alt="side sample">
</div>

「何か表示」と仮の画像の部分をチャンクのタグに置き換えます。

<div class="sidebar">
 [[Wayfinder? &startId=`[*id*]` &level=`1` &outerClass=`submenu`]]
 {{サイドバーの自由エリア}}
</div>

チャンクに分けておくことで基本のテンプレートをスッキリさせたり、編集する時はテンプレートを直接開いて探さなくてもチャンクからその場所だけピンポイントで編集出来るようになります。

テンプレート本体を作る

これで必要箇所の置き換えが終わったのであとはこの HTML を MODX に登録するだけ!MODX 用に書き換えた HTML はこんなかんじ。むしろ最初の HTML よりもスッキリしたように見える。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <base href="[(site_url)]">
  <title>[*pagetitle*] | [(site_name)]</title>
  <link rel="stylesheet" type="text/css" href="styles/modxx01/style.css" media="screen">
</head>
<body class="home">
  <div class="wrapper clearfix">
    <!-- サイトヘッダー -->
    <div id="SiteHeader">
      <h1 id="top">[(site_name)]</h1>
      <!-- トップのナビゲーションメニュー -->
      <div class="topnavi">
      [[Wayfinder?
       &startId=`0`
       &level=`1`
       &outerTpl=`@CODE:<ul class="topmenu">[+wf.wrapper+]</ul>`
      ]]
      </div>
    </div>
    <!--/#SiteHeader-->
    <!--パンくず -->
    <div class="topicpath">
      [[TopicPath:ifempty(`[(site_slogan)]`)]]
    </div>
    <!-- ドキュメントの内容 -->
    <div class="document clearfix">
      <div class="main">
        <!--ページ見出し-->
        <h2>[*pagetitle*]</h2>
        <!-- 本文 -->
        <div class="content">
          [*content*]
        </div>
      </div>
      <!-- サイドバー -->
      <div class="sidebar">
        [[Wayfinder? &startId=`[*id*]` &level=`1` &outerClass=`submenu`]]
        {{サイドバーの自由エリア}}
      </div>
    </div>
    <!--/.document-->
    <div id="PageTop">
      <a href="[~[*id*]~]#top">PageTop</a>
    </div>
    <div class="docinfo">
      <span class="date">Edited on [*editedon:date*]</span>
    </div>
    <!-- サイトフッター -->
    <div id="SiteFooter">
      <ul class="credit">
        <li> Copyright (c) 2014 [(site_name)]
      </ul>
    </div>
    <!--/#SiteFooter-->
  </div>
  <!--/.wrapper-->
</body>
</html>

管理画面の上のページからテンプレートの作成ページを開きます。

テンプレート名の部分で好きな名前を付けて、本文に MODX タグに置き換えたソースコードをコピペして作成します。

新しくリソースを作って今作ったテンプレートを選んでみてください。表示がおかしな所があれば微調整して完成です。