Zenn
📃

【Movable Type】コンテンツタイプでカルーセルやバナーを管理する

に公開
Web
frontend
Movable Type
tech

概要

MTのコンテンツタイプでカルーセルの画像やバナーを管理および出力のコードサンプルです。本記事のサンプルでは以下の部分で表示することを想定しています。

  • カルーセル：トップページのMV用として
  • バナー：各ページフッターに共通の表示用として（採用サイトや特設コンテンツなど、回遊性を高めるためのもの）

カルーセルの画像やバナーをコンテンツタイプとして登録するようにすると、更新のたびにテンプレートを修正しなくて済む、エンジニア以外でも管理画面から更新が容易になるなどのメリットがありますが、作成する画像のサイズなど運用方法をきちんと決めておく（入力欄の説明文に記載しておくなど）必要があります。

カルーセルをコンテンツタイプで管理するコード例

仕様

  • カルーセルに表示させる画像の最大枚数は5つ（コンテンツデータ最新順）
  • 画像クリックで指定したリンク先に飛ぶようにする（リンク先の指定がなければリンクしない）

コンテンツタイプのフィールド設定例

  • コンテンツタイプ名：カルーセル画像（ID: 2）
  • コンテンツタイプフィールド
    • タイトル（テキスト）　※必須設定
    • カルーセル画像（画像アセット）　※必須設定
      • 画像は1枚のみ指定可
      • 画像ファイルのアップロードを許可
    • リンク先URL（URL）

コード例（MTML部分のみ）

例ではSwiperを利用しています。

<mt:Contents content_type="2" limit="5">
  <mt:ContentsHeader>
    <div class="swiper">
      <div class="swiper-wrapper">
  </mt:ContentsHeader>
  <mt:ContentField content_field="カルーセル画像">
    <figure class="swiper-slide">
      <mt:If tag="ContentField" content_field="リンク先URL"><mt:ContentField content_field="リンク先URL">
        <a href="<mt:ContentFieldValue>" target="_new">
      </mt:ContentField></mt:If>
        <img src="<$mt:AssetURL$>" alt="<mt:ContentField content_field='タイトル'><mt:ContentFieldValue></mt:ContentField>" width="<$mt:AssetProperty property='image_width'$>" height="<$mt:AssetProperty property='image_height'$>">
      <mt:If tag="ContentField" content_field="リンク先URL"><mt:ContentField content_field="リンク先URL">
        </a>
      </mt:ContentField></mt:If>
    </figure>
  </mt:ContentField>
  <mt:ContentsFooter>
      </div>
      <div class="swiper-pagination"></div>

      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </mt:ContentsFooter>
</mt:Contents>

コードがすこし見づらいですが、<mt:ContentField content_field="カルーセル画像">〜</mt:ContentField>の部分でコンテンツデータ登録したカルーセル情報を出力しています。

画像のalt属性にはコンテンツデータのタイトルで入力した内容を、画像のwidthやheightの値はMTAssetPropertyを利用してそれぞれ出力しています。MTAssetPropertyについては以下記事もご参考ください。

https://zenn.dev/srkkr/articles/1bd113cd6e0bd0

バナーをコンテンツタイプで管理するコード例

仕様

  • 「掲載する」にチェックを入れたものをすべて出力する
  • 別タブ（別窓）で開くかどうかを選択する
  • 画像クリックで指定したリンク先に飛ぶようにする（リンク先の指定がなければリンクしない）

コンテンツタイプのフィールド設定例

  • コンテンツタイプ名：バナー画像（ID: 2）
  • コンテンツタイプフィールド
    • タイトル（テキスト）　※必須設定
    • バナー画像（画像アセット）　※必須設定
      • 画像は1枚のみ指定可
      • 画像ファイルのアップロードを許可
    • リンク先URL（URL）
    • 別タブで開くかどうか（チェックボックス）
      • 名前：別タブで開く
      • 値：check
    • 掲載するかどうか（チェックボックス）
      • 名前：掲載する
      • 値：check

コード例（MTML部分のみ）

先述のカルーセルを応用する形での出力例です。

<mt:Contents content_type="2">
  <mt:ContentsHeader>
    <ul>
  </mt:ContentsHeader>
  <mt:ContentField content_field="バナー画像">
    <mt:If tag="ContentField" content_field="掲載するかどうか">
      <li>
        <mt:If tag="ContentField" content_field="リンク先URL"><mt:ContentField content_field="リンク先URL">
          <a href="<mt:ContentFieldValue>"<mt:If tag="ContentField" content_field="別タブで開くかどうか"> target="_new"</mt:If>>
        </mt:ContentField></mt:If>
          <img src="<$mt:AssetURL$>" alt="<mt:ContentField content_field='タイトル'><mt:ContentFieldValue></mt:ContentField>" width="<$mt:AssetProperty property='image_width'$>" height="<$mt:AssetProperty property='image_height'$>">
        <mt:If tag="ContentField" content_field="リンク先URL"><mt:ContentField content_field="リンク先URL">
          </a>
        </mt:ContentField></mt:If>
      </li>
    </mt:If>
  </mt:ContentField>
  <mt:ContentsFooter>
    </ul>
  </mt:ContentsFooter>
</mt:Contents>

<mt:ContentField content_field="バナー画像">〜</mt:ContentField>の部分でコンテンツデータ登録したバナー情報を出力しています。

<mt:If tag="ContentField" content_field="掲載するかどうか">〜</mt:If>で「掲載する」にチェックが入っているコンテンツデータのみを出力します。同様に<mt:If tag="ContentField" content_field="別タブで開くかどうか"> target="_new"</mt:If>で「別タブで開く」にチェックが入っている場合に target="_new"を追加で付与します。

以上です。

Discussion