実際にMODxでサイトを作ってみる
なんやかんやと頭の中でやっててもできるかどうか分からないので実際に使ってサイトを作ってみます。MTを初めて使ったときもそうだったんだけど、私の場合、とりあえず一旦雛形になりそうなページを手元でxhtmlとCSSでコーディングして形を作り、その後独自タグとかツール機能に差し替えできる部分のソースを入れ替えるやり方が一番理解しやすいのでその方向でいきます。（要領悪いかもしれないけど）
まずデザインを作りました
とりあえず今回作ってみるサイトの枠を作ってみました。MODxのカラーは黒と黄緑っぽいので適当にそんな感じのイメージで。
2カラムの左部分にはサンプルサイトに入ってたみたいな最近のエントリとかサブメニューとか、そういうのを入れるつもり。（適当人間なのでその辺りは行き当たりばったりで調べながらできることをやってみる）
テンプレート化するのは右カラムのコンテンツ部分以外ということになると思われ。
ということで、まずこのデザインをサクっと組んでみます。はい。組みました。MODxインストール時のサンプルサイのソースにはhead内にいろいろと入っていたんですが、とりあえずその辺りは後からなんやかんやした追記した方がいい気がしたので後回しの方向で。
とりあえず今の状態、見た目とhtmlソースはこんな感じ。
<!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=utf-8" />
<title>MODxサンプルサイト</title>
<link rel="stylesheet" href="common.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="index.html">MODxサンプルサイト</a></h1>
<p>とりあえずMODxでサイトを作ってみようという主旨！自分でやってみないと理解できないからやってみるよ！</p>
<!--/header --></div>
<ul id="gnavi">
<li><a href="#">HOME</a></li>
<li><a href="#">メニュー01</a></li>
<li><a href="#">メニュー02</a></li>
<li><a href="#">メニュー03</a></li>
<li><a href="#">メニュー04</a></li>
<li><a href="#" class="naviEnd">メニュー05</a></li>
</ul>
<div class="clearfix" id="contents">
<div id="main">
<!--/main --></div>
<div id="sub">
<!--/sub --></div>
<!--/contents --></div>
<div id="footer">
<p>単なるMODxの実験サイトです。</p>
<p>Powered by MODx</p>
<!--/footer --></div>
<!--/container --></div>
</body>
</html>Dreamweaver用の拡張機能
少し話がそれますが、DWをつかってテンプレートをコーディングする場合、MODxの独自タグの綴りを自分で打ったりコピーペーストする手間を省いてくれる素敵な入力補完の拡張機能が公開されていました。
>> MODx コードヒント for Dreamweaver
上記ページ内の下の方にMODxのタグのそれぞれの呼び方も掲載されていたのでチェックしておくと良いかもしれません。多分これらは全部使いこなす必要はないのかもしれないけど、必要に応じて調べるときに呼び方を知ってれば探しやすいのかな、と。
- [( )]...セッティングタグ
- [^ ^]...ベンチマークタグ
- [* *]...変数タグ
- [+ +]...プレイスホルダタグ
- [~ ~]...ドキュメントリンクタグ
- [[ ]] / [! !]...スニペットタグ
またいろいろ調べているとどうやらMODxはDWと組み合わせて編集したりするのが便利そうな感じでした。もう少し調べて有益な情報があればまたの機会に書いてみます。
テンプレート化する部分
上の方でも書いたとおり、今回テンプレートとして扱いたいのは右カラムのコンテンツ以外の部分。書いたソースでいうと、<div id="main"></div>以外の部分です。
テンプレート化作業
まず管理画面の「リソース > リソース管理 > テンプレート」を開くと今存在しているテンプレートが羅列された画面になります。その中の「テンプレートの作成」をクリックして新しいテンプレートを作ります。
次にテンプレート名、説明を入力します。ここのテンプレート名というのが「ドキュメントの作成」の画面で選択するテンプレートのセレクトメニューに並ぶタイトルです。カテゴリの登録はしなくても問題なさげなんですが、今後この実験サイトで他のテンプレートを作る事があったときに1つのカテゴリとして登録できた方がいい気がしたので新しくカテゴリを作ることにしました。
次にテンプレートコード（html）を入力するんですが、先ほど作ったhtmlソースをコピーペーストと、テンプレート化しない部分である#mainの中には [*content*] という変数タグを入れておきます。とりあえず最低限必要なのはそれだけみたいです。上のDWの拡張を入れていれば、[*と入力しただけで予測されるタグのリストが表示されるので便利でした。
以上。「保存」をクリックしてテンプレート化、終了。早。ちゃんと先ほどのテンプレート一覧のページにも今作成したカテゴリとテンプレートが表示されました。
新規のドキュメントを作成してテンプレートの選択で先ほど作ったテンプレートを選択して保存、プレビューしたんですが・・・あーそうですよね。まだCSSテンプレートをMODxに登録してないからCSSが適応されてない状態で表示されました。絶対パスでCSSのパス指定したらちゃんと表示されたけど、せっかくなのでCSSもMODxで管理した方がいいよね。とりあえず正しくhtmlは表示されたので最低限のhtmlテンプレート作成はこれでＯＫ。MODxタグへの差替えは後で。
CSSのドキュメントを作成する
メニューの「サイト > ドキュメントの作成」で新しいドキュメントを作る。
タイトルとかを適当に入れて「使用テンプレート」は「blank」に。後述しますが、ここのドキュメントエイリアスは他のhtmlで吐き出すドキュメントと違ってちゃんと拡張子.cssを付けておかないとうまくいきません。内容の入力欄には予めコーディングしておいたCSSソースをコピーペースト。
次に「ページ設定」のタブでコンテンツタイプを「text/css」に設定する。またリッチテキストのチェックは外しておかないと、<br />とかが勝手に挿入されてえらいことになってました。
で、「保存」。これでCSSの作成は終り。
画像をアップする
CSSから呼び出している画像もMODxにアップ。「リソース > ファイル管理」でCSSソース内で指定している画像の保管場所のフォルダを作成。今回CSSに記述している画像のパスがcommonディレクトリ以下だったので、「common」という名前のフォルダを作成しました。
今回用意したデザインの場合、とりあえず画像は4つだけなのでMODx管理画面からアップしても大した手間ではなかったけど、画像数がすごい多いデザインなんかだとFTPで直接アップした方が早い。断然早い。
「common」部分をクリックし、そこで画像を選択して「ファイルのアップロード」をクリック。画像のパス、ファイル名の右の「×」をクリックすると削除。
テンプレートのhtmlソースをMODxタグに
それではかなり上の方に書いたhtmlソースでMODxタグに置き換えた方がよさげな部分を置き換えていきます。MODxのインストール時にサンプルサイトも一緒にインストールしたので、それのテンプレートを参考に調べながら書き換えしてみます。以下のサイトも参考にさせて頂きつつ・・・
>>Let's enjoy MODx｜テンプレート変数について（概要）
>>MODx Content Management System | Document-Specific Variables
MODxのセッティングタグ（[( )]←こういうの）を挿入した部分は、管理画面の「ツール> MODx設定 > サイト」で設定した内容が挿入されます。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
まずこのcharset部分の「charset=utf-8」を「charset=[(modx_charset)]」へ。
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
そうすると上に書いたとおり管理画面の「ツール> MODx設定 > サイト」で指定してあるエンコードが挿入されると。MTとか使ってる人はこの辺りの仕組みは一瞬で理解できると思う。
同じ原理でどんどん置き換えていきます。置き換えた後のソース全体は後ほど書くとして、置き換えた箇所のMODxタグの説明を先に書いておきます。
- [(modx_charset)]
- charsetの挿入。「ツール> MODx設定 > サイト > エンコーディング」
- [(site_name)]
- サイトの名前。「ツール> MODx設定 > サイト > サイト名」
- [*pagetitle*]
- ドキュメントのタイトル。「サイト > ドキュメントの作成（編集） > タイトル」
- [(site_url)]
- サイトのurl。インストールした場所。
- [~id番号~]
- id番号を指定したドキュメントのurl。例えばCSSのドキュメントid(番号)が50なら[~50~]になる。
baseとRSSフィードのリンクについては、最初にコーディングしたソースには入れてなかったんだけど、追加してみました。他にもdescriptionなどよく使うものを置き換えるタグも多数ありましたが、とりあえず実験サイトなので一旦終了。で置き換えた後のhead部分のソースはこんな感じ。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
<title>[(site_name)] | [*pagetitle*]</title>
<base href="[(site_url)]"></base>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="[(site_url)][~11~]" />
<link rel="stylesheet" href="[(site_url)][~50~]" type="text/css" media="screen" />
</head>で、このソースを上の方でテンプレートに保存していたソースと入れ替えて、さっそくプレビューしてみると・・・あーCSSソースの画像のパスが切れちょりました。コーディングした時の階層とMODx上での階層がズレてました。次回からは最初からその辺りも考えて作業しなくては。ということで、CSSドキュメント内の画像のパスの部分をMODxタグを使って書き換えました。
background:url(common/head_bg.png) no-repeat top center;
こうなってた部分を、[(site_url)]を使ってこんな風にしました。
background:url([(site_url)]common/head_bg.png) no-repeat top center;
はい。これでバッチリ！やっほー！
今日のつまづいたところ
CSSのドキュメントを作成する時に「ドキュメントエイリアス」の部分に最初ファイル名のcommonだけを入れていたんですが、実際プレビューしてみると全然CSSは反映されていない状態でした。ソースを見てみると、CSSファイルへのパスがcommon.htmlとhtml扱いになっていました。
原因はフレンドリーURLを使用しているため、「ツール > MODx設定 > フレンドリーURLの接尾語」の部分に「.html」を指定しているからのようです。解決方法は上のほうでも書きましたが、「ドキュメントエイリアス」を入力する際にファイル名の後に「.css」を付ける事。そうすると正しくCSSが反映されます。但し、ソースを見てみると「common.css.html」のようにやっぱり最後に「.html」がついてます。RSSフィードのファイルも同様。でも正しく表示されています。なんか・・・MODxはそういうものだと思い込んだらいいっぽい。
次はチャンクとかスニペットとかプラグインとかそういうのの研究をしてみようっと。
<< MODxの管理画面 | MODx チャンクを使ってみる >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/163
