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

第5回 カスタムフィールドを使って,商品紹介のカタログページを一番簡単な方法で作ってみる

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

カスタムフィールドを使ったテンプレート作成

カスタムフィールドで入力した内容を表示させるために,MTのテンプレートを設定していきます。

デザイン > テンプレートを開き,まずは不要なテンプレートを削除しましょう。

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

まずはブログ記事のテンプレートから設定していきましょう。

アーカイブテンプレート > ブログ記事へ移動します。

「ブログ記事」テンプレートは,あらかじめ用意しておいた「商品紹介個別ページ(product/individual.html)」のHTMLテンプレートをベースにMTタグを埋め込んで設定します。

「ブロク記事」テンプレートの編集画面下部にある,

  • テンプレートの設定 > アーカイブマッピング >

から設定するアーカイブマッピングのURLを以下のように変更します。

  • category/sub-category/entry-basename.html

次に,テンプレートに書かれているデフォルトテンプレートのソースをすべて削除します。

そしてあらかじめ用意しておいた「商品紹介個別ページ(product/individual.html⁠⁠」のHTMLソースをそのままペーストします注:第4回で説明したモジュールの設定もお忘れなく!⁠⁠。最後に,記事タイトル,本文,カスタムフィールド表示項目の部分は以下のように記述します。

<h1><$MTEntryTitle$></h1>
<p><$MTEntryBody$></p>
<MTimageAsset><img src="<$MTAssetURL$>" /></MTimageAsset>
<table>
  <tr>
    <th>価格</th>
    <td><$MTprise$></td>
  </tr>
  <tr>
    <th>カラー</th>
    <td><$MTcolor$></td>
  </tr>
  <tr>
    <th>サイズ</th>
    <td><$MTsize$></td>
  </tr>
  <tr>
    <th>素材</th>
    <td><$MTmaterial$></td>
  </tr>
</table>

今回初めて出てきたMTタグの解説です。

<$MT○○(カスタムフィールド作成時に設定したテンプレートタグ名)$>

カスタムフィールド作成時に設定したMTテンプレートタグの英数字を<$MT○○$>に指定すると,ブログ記事の投稿画面で入力したカスタムフィールドの値を表示します。

<MT○○Asset><img src="<$MTAssetURL$>" /></MT〇〇Asset>

カスタムフィールドからアップロードしたアイテムを,画像として表示する場合,カスタムフィールドの作成時に指定したテンプレートタグ名の末尾にAssetを追加したブロックタグとして利用します。 たとえば,MTImageというカスタムフィールドの場合は,MTImageAssetというブロックタグを記述します。このブロックタグ内では,通常のmt:Assets タグと同様に, mt:AssetURL などのアイテム用のタグが利用できます。詳しくはドキュメントを参照してください。

テンプレートをプレビューし問題なさそうであれば,再構築します。

「ブログ(商品一覧)」に記事にテスト投稿してみて,うまくできたかどうか確認してみましょう。商品紹介の個別記事は図7ような設定で,テンプレートを作成しました。

図7 商品紹介の個別記事

図7 商品紹介の個別記事

次は商品一覧のトップページに,更新した商品一覧を表示させるように設定していきます。

インデックスページに,カスタムフィールドも含んだ記事を一覧させる

商品一覧ページには,入力した記事の「タイトル」⁠価格」⁠本文」⁠商品画像」が更新された順に一覧表示されるようにし,さらにサイドメニューに,入力した記事のタイトルが一覧表示されるように設定していきましょう。

図8 入力した記事のタイトルを一覧表示させる設定

図8 入力した記事のタイトルを一覧表示させる設定

ブログ名(商品一覧)  > デザイン > インデックステンプレート > メインページを開きます。

次に,テンプレートに書かれているデフォルトテンプレートのソースをすべて削除します。

そしてあらかじめ用意しておいた「商品紹介個別ページ(product/index.html)」のHTMLソースをそのままペーストします第4回で説明したモジュールの設定もお忘れなく!⁠⁠。

そして,更新記事の一覧部分は以下のように記述します。

<mt:Entries>
<table>
<tr>
<th><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></th>
<th><$MTprise$>円</th>
</tr>
<tr>
<td><MTimageAsset><img src="<$MTAssetURL$>" /></MTimageAsset></td>
<td><$MTEntryBody$></td>
</tr>
</table>
</mt:Entries>

これまでの連載の中から既出のタグだけで表示できます。

<mt:Entries>~</mt:Entries>の中に,カスタムフィールドを表示させるタグを入れれば,記事に入力したカスタムフィールドの値も一覧して表示されるようになります。

さらにサイドメニューの更新タイトル一覧の箇所は以下のように設定しています。

<mt:Entries>
<ul><li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li></ul> 
</mt:Entries>

商品紹介のインデックスページは図9のような設定で,テンプレートを作成しました。

図9 商品紹介のインデックスページ

図9 商品紹介のインデックスページ

第5回では,最も簡単な「カスタムフィールド」機能の使い方で,独自の入力項目を追加し,商品紹介ページの作成方法について解説しました。

カスタムフィールドはMTをCMSとして使うためには欠かせない機能で,これが使えるようになれば一気にMTのカスタマイズの柔軟性があがります。しかも難しくありませんので,ぜひマスターしましょう。

第5回をもって,今回の連載で作成している会社サイトはほぼ完成しました!

最終回の次回では,一回構築したMTのサイトを,⁠テーマ」として保存して,以後は使いまわす方法について解説していこうと思います。

著者プロフィール

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

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

http://uramayu.typepad.jp/