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

カスタムフィールドで入力した内容を表示させるために，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ような設定で，テンプレートを作成しました。

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

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

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

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

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

そしてあらかじめ用意しておいた「商品紹介個別ページ(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のような設定で，テンプレートを作成しました。

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

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

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

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