Movable Typeの日付フィールドで月別アーカイブページを作成する

コンテンツタイプの日付フィールドで月別のアーカイブページを作成してみます。

作成内容

今回はイベント情報を掲載するコンテンツを作成する想定で試してみます。
「イベント情報」という名前で以下のようなコンテンツフィールドを作成しました。

  • 開催日(日付フィールド・必須)
  • 終了日(日付フィールド)

投稿画面は以下のようになっています。

次にテンプレートを作成します。
テンプレートの管理ページで「コンテンツタイプリストアーカイブ」を選択して、新規作成をクリックします。

アーカイブマッピング設定で種類を「コンテンツタイプ 月別」、日付と時刻フィールドを「開催日」にして追加をクリックします。
使用する日付フィールドを必須にしていないと選択に出てこないので注意してください。

テンプレートの内容を以下のように設定します。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1><mt:ArchiveTitle></h1>
<mt:Contents content_type="イベント情報" sort_by="field:開催日" sort_order="ascend">
  <mt:ContentsHeader><ul></mt:ContentsHeader>
  <li>
    <h2><mt:ContentLabel></h2>
    <div>
      <mt:ContentField content_field="開催日">
        <mt:ContentFieldValue format="%Y年%m月%d日">
      </mt:ContentField>
      <mt:ContentField content_field="終了日">
        ~ <mt:ContentFieldValue format="%Y年%m月%d日">
      </mt:ContentField>
    </div>
  </li>
  <mt:ContentsFooter></ul></mt:ContentsFooter>
</mt:Contents>
</body>
</html>

これでテンプレートの作成が完了しました。
最後にダミー用のコンテンツを以下の内容で登録します。

  • ラベル:イベントA 開催日:2021-03-06
  • ラベル:イベントB 開催日:2021-03-27 終了日:2021-04-03
  • ラベル:イベントC 開催日:2021-03-13 終了日:2021-03-20

コンテンツ登録後に再構築を行うと、以下のような内容で月別のアーカイブページが作成できました。

<h1>2021年3月</h1>
<ul>
  <li>
    <h2>イベントA</h2>
    <div>
        2021年03月06日
    </div>
  </li>
  <li>
    <h2>イベントC</h2>
    <div>
        2021年03月13日 ~ 2021年03月20日
    </div>
  </li>
  <li>
    <h2>イベントB</h2>
    <div>
        2021年03月27日 ~ 2021年04月03日
    </div>
  </li>
</ul>

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年4月
 123456
78910111213
14151617181920
21222324252627
282930