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

Movable Typeの標準の状態では、ブログ記事に入力できるフィールドはタイトルと本文くらい（他にもありますが）しかありません。しかし例えば商品カタログのページを作りたいと思ったとき、価格や色、サイズなどの入力項目が欲しくなってきます。それを実現するのが「カスタムフィールド」機能です。

「カスタムフィールド」機能を使えば、ブログページやウェブページに独自の入力項目を追加することができるようになり、eコマース、商品カタログ等の定型ページ制作の入力がより簡単にできるようになります。

今回は、MTをCMSとして使うには書かせないカスタムフィールド機能を最もシンプルに使った、商品紹介ページの作成方法について解説していきます。

今回の連載を通して作成しているサイト全体でいうところの、「⁠商品一覧」のディレクトリの部分をMT化していきます。

なお、カスタムフィールド機能はオープンソース版（MTOS）では利用できませんのでご注意ください。

HTMLテンプレートの用意とカスタムフィールドの作成

あらかじめ、MTカスタマイズ前のプレーンなHTMLテンプレートを用意しておきましょう。今回は以下の2つのHTMLテンプレートをMT化していきます。

商品一覧ページ（product/index.html）
商品紹介個別ページ（product/individual.html）

それでは「商品一覧」のブログを新規で作成しましょう。

ブログを新規作成で、テーマは「クラシックブログ」「⁠ブログ名（ここでは「商品一覧」としています⁠）⁠」⁠、「⁠ブログURL（…/product/⁠）⁠」⁠、「⁠ブログパス（…/product/⁠）⁠」を入力し、ブログを再構築してください。

次に、カスタムフィールドを作成していきます。

今回作成するカスタムフィールドは5つ、「⁠商品画像」「⁠価格」「⁠カラー」「⁠サイズ」「⁠素材」です。つまり図4で、個別記事で定型化して更新したい箇所をカスタムフィールド化することにします。

左メニューにある、カスタムフィールド > 新規から制作しましょう。

作成するカスタムフィールドと値は以下のとおり。

カスタムフィールドのテンプレートタグ名は、必ず他のMTタグと被らないよう、オリジナルな名称になるようにしてください。

表　作成するカスタムフィールドと値

名前	オブジェクト	説明	種類	必須？	ベースネーム	テンプレートタグ
商品画像	ブログ記事	300×300の商品画像をアップロードしてください	画像	YES	image	image
価格	ブログ記事		テキスト	YES	price	price
カラー	ブログ記事		テキスト	YES	color	color
サイズ	ブログ記事		テキスト	YES	size	size
素材	ブログ記事		テキスト	YES	material	material

これで5つのカスタムフィールドができあがりました。

ブログ記事の入力画面を確認してみると、設定したカスタムフィールドの入力項目が出ていますね。

※　入力項目を「必須」にしていないカスタムフィールド項目は、デフォルトでは記事の入力画面には出てきません。記事の入力画面の右上にある「表示オプション」から、入力画面に表示させたい項目を選択してください。

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

カスタムフィールドで入力した内容を表示させるために、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のサイトを、「⁠テーマ」として保存して、以後は使いまわす方法について解説していこうと思います。