Contents Type

Movable type 7で実装されたContents Typeの使い方を解説

2018.05.17

コンテンツタイプ用のテンプレートを作る

前回の記事で、商品管理というコンテンツタイプを作りました。
次は登録した商品管理のテンプレートを作ってみたいと思います。

必要なテンプレートを用意する

まずは、コンテンツデータをどこに出力するかを決めます。
一覧・詳細画面を作ってみます。

  • インデックステンプレート
  • コンテンツタイプアーカイブリストテンプレート
  • コンテンツタイプアーカイブテンプレート

従来のテンプレートでは、記事アーカイブや記事アーカイブリストなどブログ記事の出力などを設定できるがアーカイブテンプレートの主体でした。
ブログとしても引き続き利用できますが、Movable Type 7のコンテンツデータ主体のサイト設計の場合はコンテンツタイプアーカイブ系テンプレートで構築していきます。

今回の例では、商品一覧と商品詳細ページの作成を行います。

商品一覧ページ:インデックステンプレートの作成

インデックステンプレート 追加

従来のように単一ページの出力をするテンプレートになります。
用途は様々ですが、主にトップページなどに使用することが一般的です。

Movable Type 7では、赤枠のセレクトボックスからテンプレートを追加する形にUIが変わりました。
従来のテンプレートの管理では、各テンプレートごとのセクションで追加するようなUIでした。

  • コンテンツタイプ:商品情報を3件出力
  • コンテンツフィールド:商品タイトル
  • コンテンツフィールド:商品画像
  • コンテンツフィールド:商品詳細ページへのリンク

mt:Contentsのcontent_typeで出力したいコンテンツデータを指定します。
limitで出力件数を指定します。sort_orderで並べる順序を昇順にしています。

<mt:If name="__first__">〜</mt:If>と<mt:If name="__last__">〜</mt:If>でmt:Contentsループの最初と最後を出力を指定してあげます。

コンテンタイプで指定したフィールドを指定するには、mt:ContentFieldというブロックタグで任意で指定したフィールドラベルをcontent_fieldに入れて <mt:Var name="__value__" /> 出力することができます。
画像の出力は、従来カスタムフィールドなどと同様にmt:AssetURLで取り出します。
1点カスタムフィールドの画像と違い、ブロックタグはmt:ContentFieldで括ります。

詳細へのリンクは、<mt:ContentPermaLink /> で出力することができます。
従来の<mt:EntryPermalink />のコンテンツタイプ版になります。

MTMLコード

  
<mt:Contents content_type="商品情報" limit="3" sort_order="ascend">
  <mt:If name="__first__">
  <div class="siimple-content siimple-content--large">
    <h2 class="siimple-h2">商品リスト</h2>
    <div class="siimple-grid">
      <div class="siimple-grid-row">
  </mt:If>
        <div class="siimple-grid-col siimple-grid-col--4">
          <div class="siimple-box">
            <a class="siimple-link" href="<mt:ContentPermaLink />">
              <mt:ContentField content_field="商品画像">
              <figure>
                <img src="<mt:AssetURL />" alt="">
                <mt:ContentField content_field="商品タイトル"><figcaption><mt:Var name="__value__" /></figcaption></mt:ContentField>
              </figure>
              </mt:ContentField>
            </a>
          </div>
        </div>
  <mt:If name="__last__">
      </div>
    </div>
  </div>
  </mt:If>
</mt:Contents>
  

出力イメージ

出力イメージ

商品詳細ページ:インデックステンプレートの作成

コンテンツタイプアーカイブテンプレート 追加

商品詳細ページは、新たに設置されたコンテンツタイプテンプレートから作成します。
コンテンツタイプテンプレートでは、作成したコンテンツデータを選択できる項目があります。
コンテンツタイプはサイト内に複数作成することができるため、コード側でコンテンツタイプ定義などせずに、従来の記事詳細と同じような感覚でテンプレートを書くことが可能です。

  • コンテンツタイプを選択
  • コンテンツフィールド:商品タイトル
  • コンテンツフィールド:商品説明
  • コンテンツフィールド:商品画像

コンテンツタイプアーカイブテンプレート 保存

コンテンタイプ保存後は、出力先となるアーカイブマッピングの設定を行います。
今回は設定しませんが、コンテンツタイプにはカテゴリフィールドを設定することができます。

MTMLコード

  
<div class="siimple-content siimple-content--large">
  <div class="siimple-grid">
    <h2 class="siimple-h2">商品詳細</h2>
    <div class="siimple-grid-row siimple-box">
      <div class="siimple-grid-col siimple-grid-col--4">
        <mt:ContentField content_field="商品画像"><img src="<mt:AssetURL />" alt=""></mt:ContentField>
      </div>
      <div class="siimple-grid-col siimple-grid-col--8">
        <mt:ContentField content_field="商品タイトル"><h3 class="siimple-h3"><mt:Var name="__value__" /></h3></mt:ContentField>
        <mt:ContentField content_field="商品説明"><p class="siimple-p"><mt:Var name="__value__" /></p></mt:ContentField>
      </div>
    </div>
  </div>
</div>
  

出力イメージ

出力イメージ

今回の例は、商品一覧と商品詳細ページの作成までの流れを解説しました。
従来のMT6までの「ブログ」と違いとしては、名前が変わったこともそうですが「ブログ」という枠でコンテンツを管理するのではなく、目的に応じたデータを複数作れること・それぞれのテンプレートを用意することが可能になります。

  • Facebook
  • Twitter
  • はてなブックマーク
CATEGORY BACK