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

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

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

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

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

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

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

図1 今回の対象は商品一覧のディレクトリ

図1 今回の対象は商品一覧のディレクトリ

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

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

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

  • 商品一覧ページ(product/index.html)
  • 商品紹介個別ページ(product/individual.html)

図2 商品一覧ページ,商品紹介の個別ページを,MTを使って更新できるようにカスタムフィールドを使ってカスタマイズしていきます

図2 商品一覧ページ,商品紹介の個別ページを,MTを使って更新できるようにカスタムフィールドを使ってカスタマイズしていきます

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

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

図3 新しく「商品一覧」のブログを作成します

図3 新しく「商品一覧」のブログを作成します

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

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

図4 作成するカスタムフィールド

図4 作成するカスタムフィールド

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

図5 カスタムフィールドの作成画面でこのような感じで入力していきます

図5 カスタムフィールドの作成画面でこのような感じで入力していきます

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

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

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

名前オブジェクト説明種類必須?既定値ベースネームテンプレートタグ
商品画像ブログ記事300×300の商品画像をアップロードしてください画像YES imageimage
価格ブログ記事 テキストYES priceprice
カラーブログ記事 テキストYES colorcolor
サイズブログ記事 テキストYES sizesize
素材ブログ記事 テキストYES materialmaterial

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

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

図6 できあがったカスタムフィールド

図6 できあがったカスタムフィールド

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

著者プロフィール

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

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

http://uramayu.typepad.jp/

コメント

  • MT構築の参考にさせていただいております。

    はじめまして。
    会社のHPをMTで構築することになりまして、ただ今HTMLソースをMTに置き換え作業に悪戦苦闘しています(MT初心者です)。高橋さまのサイトを見つけ、とても丁寧でわかりやすく、とてもありがたいです。

    第5回の記事を参考にして、作っているのですが、「メインページ」で表示している商品クリックから、「個別商品ページ」へのリンクが上手くいきません。
    「ブログ記事編集」の「出力ファイル名」や
    「アーカイブテンプレート」のアーカイブパス
    をいじっているのですが、どうも上手くいきません。

    もしお時間がございましたら、アドバイスなどいただけないでしょうか?
    どうぞよろしくお願いいたします。

    Commented : #1  miwako hagiwara (2012/04/22, 13:09)

コメントの記入