「MovableTypeで作る企業サイトの基本」補足の補足(2)

2011年11月27日 11:13
Category : MovableType, webdesign
Tags :CMS, MovableType, webdesign

この記事は、"SaCSS　vol.07 「MovableTypeで作る企業サイトの基本」補足" と "「MovableTypeで作る企業サイトの基本」補足の補足(1)"の続きです。

MTで作るサイトのデザインが決まっていて、コーディングが済んでいて、MTタグの記述が終わっているところを想定していて、その作業の続きです。
この次は、もともと1つのHTMLだったものを、MTのテンプレートとして構成するために、モジュール化をおこないます。

サイト内で共通して利用する部分を決める

コーディングが済んだら、ページの構成を見て、サイト内の各ページで共通して使える部分をパーツに分けます。

サイト内で共通して利用する部分を決める

このページの場合は、

ヘッダー
サイドバー
フッター

を、各ページで共通して使うことになる、という場合は、この3つを別々のパーツに分けます。これがモジュールの作成です。

WordPressのカスタマイズ経験がある人は、WordPressのテーマファイルのheader.phpやfooter.phpの構成や中身を考えてみると作業しやすいと思います。

ヘッダーのモジュールを作ってみる

例として、ヘッダーのモジュールを作成する手順を考えてみます。
MTの管理画面を開き、左側のナビゲーションから、「デザイン」→「テンプレート」のページを開きます。
さらに、このページの「テンプレートモジュール」の見出し下にある「テンプレートモジュールの作成」を選びます。

モジュールの作成

テンプレートモジュールの作成

「テンプレートの作成」画面が開くので、まずはテンプレート名を入力します。ここでは「ヘッダー」と入力します。MTのテンプレート名は日本語が使えるので、カタカナで書いてOKです。

次に、見出しの下にMTのコードを入力する大きい欄があるので、ここにヘッダーのコードを入力します。

ヘッダーのテンプレートモジュールを作成

ここでは、サイトタイトルとサイトの説明文が入ったモジュールを作成しました。
MTIgnoreは、MT用のコメントアウトができるタグで、HTMLのと同じようなものです。ここに記入した内容は、テンプレートには記載されますが、HTMLには出力されません。

モジュールの呼び出し

作成した「ヘッダー」というモジュールを使うには、使いたいテンプレートの使いたい位置に、

<$mt:Include module="ヘッダー"$>

と記述します。
ヘッダー以外のモジュールを呼び出したい時は、module=の値を変更してください。
モジュールは、そのブログ/ウェブサイトのテンプレートモジュールの中から自動的に呼び出されるので、パスやURLを記述する必要はありません。モジュール名だけ書けば良いです。

簡単なテンプレートの例

前回の内容で説明した、新着情報のリストなども入れて、簡単なトップページの例として作成すると、以下のようになります。

それぞれのモジュールですが、

ヘッダー: サイトタイトル、説明、問い合わせへのリンクなど
サイドバー: 新着記事のリスト、バナーのリストなど
フッター: コピーライト、サイト内各コンテンツへのテキストリンク、ページの先頭へ戻るボタン

などが入ることが多いです。

テンプレートモジュールは自由に作ることができるので、最初にサイトの構成を決めて、どういうモジュールが必要になるかを決めるとスムーズに制作できます。

私は、アクセス解析のタグとか、案件によって異なるCSS,JSファイルの読み込みなどは、別のファイルにしていることが多いです。

更に高度なカスタマイズ

ここまでに書いた内容は本当の初歩の初歩なので、制作案件でこのまま使えるわけではないのですが、更に必要になるテクニックとしてよく使うのは、

サイドバ－に出力される内容をページごとに変更する
カテゴリーごとに異なるキービジュアルを表示させる（ページのヘッダー画像など）
新着情報を、サムネイル画像付きで出力する

が多いかなーという印象です。
MTのカスタマイズ本でもよく扱っているテクニックなので、このあたりまでできると、あまり困らなくなるのかなという感じがします。実践的なMTカスタマイズについては、カスタマイズ技術をまとめた書籍を1冊買ってきて、サンプルと同じものを1度作って見ると理解しやすいと思います（自分は教えてもらえる人がいなかったので、その繰り替えしで覚えました）。
私が使ったのは、