今すぐできる超絶シンプルなMTのCMSカスタマイズテクニック

第1回 とにかく,今すぐ「お知らせ」だけMTで更新できるようにしたい(1)

この記事を読むのに必要な時間:およそ 2 分

テンプレートの下準備

さて,テンプレートを作成して一画面ずつデザインしていく前にウェブサイト名(company)>ブログ名(news)>デザイン>テンプレートから,テンプレート設定画面を開き,以下のように不要なデフォルトテンプレートを削除しておきます。

  • インデックステンプレート:JavaScriptとメインページ以外削除
  • アーカイブテンプレート:ブログ記事以外削除
  • テンプレートモジュール:すべて削除
  • ウィジェットセット:すべて削除
  • システムテンプレート:そのまま(すべて削除しても問題なし)

不要なモジュールを削除することで,デフォルトテンプレートで設定されている余分なモジュールの読み込みによる再構築エラーを防いだり,意図しないファイルが出力されないようにしています。また,削除したテンプレートを元に戻すには,テンプレートの管理画面にある「テンプレートの初期化」から戻すことができます。

図7 テンプレートを削除してカスタマイズの準備ができました

図7 テンプレートを削除してカスタマイズの準備ができました

「ブログ記事」テンプレートのカスタマイズ

いよいよMTタグを使って必要なテンプレートのカスタマイズをしていきましょう。

まずは,アーカイブテンプレート>ブログ記事のテンプレートから設定します。

「ブログ記事」テンプレートは,あらかじめ用意しておいた「お知らせの詳細ページ」⁠news/entry.html)のHTMLテンプレートをベースにMTタグを埋め込んで設定します。ここで設定したテンプレートから「お知らせの詳細ページ」が生成されるようになります。

「ブロク記事」テンプレートの編集画面下部にある,テンプレートの設定>アーカイブマッピング>パス>カスタムから設定するアーカイブマッピングのURLを以下のように変更します。

  • %y-%m-%d-%h-%n.html

この設定は生成されるページの,URLの出力形式を定義しています。

この記述の意味は「yyyy-mm-dd-hh-mm.html⁠⁠,つまり2010年6月1日18時30分に記事を作成した場合,⁠2010-06-01-18-30.html」とURLを出力する,というように定義付けています。ここのアーカイブマッピングのURLの設定は,サイトの設計に応じて検討する必要があります。出力形式・記法など,詳しくはドキュメントを参考にしてみてください(今回解説している手順で,URLの設定をデフォルトのyyyy/mm/entry-basename.htmlのままにしてしまうと,サイトのディレクトリの構成上スタイルシートや画像へのパスが切れますので注意ください⁠⁠。

図8 アーカイブマッピングURL

図8 アーカイブマッピングURL

次に,テンプレートに書かれているデフォルトテンプレートのソースをすべて削除します。そしてあらかじめ用意しておいた「お知らせの詳細ページ」(news/entry.html)のHTMLソースをそのままペーストします。その中の,見出しに該当する箇所と,本文部分に該当する箇所を以下のように書き換えます。

<h2><$MTEntryTitle$></h2>
<p><$MTEntryBody$></p>

図9 このようにMTタグに書き換えます

図9 このようにMTタグに書き換えます

ここで利用しているMTタグについて以下に解説します。

<$MTEntryTitle$>

ブログ記事のタイトルを表示するタグです。

<$MTEntryBody$>

ブログ記事の本文を表示するタグです。

つまり以下の図のような状態を設定しました。

図10 今回設定した状態

図10 今回設定した状態

テンプレートのプレビューで,エラーもなくきちんと表示設定されていることを確認します(この時点で再構築しても,他のテンプレートの設定が済んでいないのでエラーになる可能性があります⁠⁠。管理画面から入力したコンテンツが,テンプレートに設定したMTタグを介してHTMLとして生成されるという超基本的なMTの設定まで行うことができました。

次回は残りのテンプレートの設定を行い,⁠お知らせ」をCMS化した企業サイトの完成を目指していきます。

著者プロフィール

高橋真弓(たかはしまゆみ)

2005年,都内のWeb制作会社にてWebプロデュースやWebディレクションを担当。2008年,シックス・アパート株式会社に入社。マーケティング・マネジャーとしてシックス・アパートのマーケティング活動全般を手がける。

http://uramayu.typepad.jp/