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

このエントリーをはてなブックマークに追加

MODXテンプレートにはphpのコードが含まれないので、オジリナルのテンプレートを作るには静的HTMLからデザインするのが一番簡単です。このページでは静的HTMLからMODX用のテンプレートを作る方法を部品ごとに説明します。

なお、MODXのテンプレートの基本的な知識として機能説明の「テンプレート」のページを御覧ください。

  • サイトメニュー
  • 新着情報の一覧(今回は新着情報の詳細を書ける専用のページを作ることにします)

基本的なサイトの部品としてこの辺を付けてみます。

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

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

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

とりあえずこんなかんじのフォルダ構成にすることにします。

デザインを考える

まずサイトのデザイン制作ですが一番楽なのは手打ちでもいいしDreamwerverなどのオーサリングツールを使ってもいいので普通にデザインします。メニューや内容が変更されるような場所には「タイトル」「記事本文」などと仮で適当に入れておきましょう。
どっちかというとこの時点でもうJavascriptなどまでかなり作りこんでしまった方が楽だったりします。好きなだけ作りたいデザインを作っておきましょう。

多くのCMSではアドオンのルールにあわせてHTMLの構造も考えないといけなかったりしますが、MODXでは逆にデザインのルールにあわせたアドオンの調整もできます(●'◡'●)

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

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> 

実際のHTMLページを見てみる。

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

BaseURLを付ける

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

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

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

まず(3)と(4)はページ毎に入力した内容をそのまま表示させるだけなので、リソース変数[*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の影響でホームに飛んでしまうのでページのパスを付けておきます。

<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*]というリソース変数にすることで「自分自身」と指定する事ができます。このようにMODXタグのパラメータにMODXタグを使うことも出来ます。

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

(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)]を使用する」というように条件分岐しています。

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

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

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

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

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

新着情報を作る

ここは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ボタンを選んでコピペして下さい。チャンクにしちゃってもいいと思います!リソース本文に機能的なものを埋め込めてしまうのもMODXの特徴です。

テンプレート本体を作る

これで必要箇所の置き換えが終わったのであとはこの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タグに置き換えたソースコードをコピペして作成します。

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

Edited on 2016.12.22 Created on 2014.05.09 MODXEvoチュートリアルCMSWebデザイン
PAGE TO TOP