トフでもできる!? Movabletype.netテーマ開発

もくじに戻る

ニュースページを作る・その3〜アーカイブ編〜

ここからは、サブカラムの中、記事リストのアーカイブをつくっていきます。

テーマ「stylish corporate」のニュース一覧ページ。左カラムにアーカイブリストがありますね。

記事はカテゴリ別や日付別、月別などでアーカイブリストを作ることができます。
これをニュースページの左カラムに設置してみましょう!

これがサイドにあるとぐっとニュースぺージっぽくなるもんね!

ニヤリトフ

カテゴリ、月別のアーカイブリストをつくる

まず、作りたいアーカイブのアーカイブ・テンプレートを作っておきます
最初のテンプレートの書き換え時に用意したのはカテゴリ別記事リストと、月別記事リストでした。
ほかにも投稿者別や、年別などのアーカイブテンプレートを作ることができます。
必要に応じて、記事リストのテンプレートを、MT編集画面デザイン>テンプレート アーカイブ・テンプレートから、追加しておきましょう。

アーカイブ・テンプレートの編集画面から、アーカイブタイプを選択できます。

それでは、カテゴリ別ニュース記事リストと、月別アーカイブを編集していきます!
ニュース一覧ページをつくるときと使うMTタグは同じです。記事は自動的にアーカイブタイプに合わせて、カテゴリ別になるように集めてきてくれます。
news.htmlのテンプレートから、必要なタグをコピーしてきましょう。

一覧の部分はモジュールにしておくと、
アーカイブ・テンプレートの種類が増えた時らくちんだよね♪

タグらくらくトフ

それに加えて、なんの記事リストかわかるようにしたいので、<$mt:ArchiveTitle$>をつかってテンプレート名を表示させ、一覧の上にぺージの見出しをつけておきます

<mt:ArchiveTitle>
ブログ記事一覧アーカイブのタイトルを表示します。表示されるタイトルは、アーカイブの種類に依存します。
https://movabletype.net/tags/2007/08/archivetitle.html

<h3 class="newsArea__categoryName"><$mt:ArchiveTitle$></h3>

それぞれにテンプレート名が表示されて、ちょうど良い見出しになりました。
これでカテゴリー別記事リスト、月別記事リストのページができました。

記事リストをアーカイブにして表示させる

ついに、記事リストをアーカイブ形式にして表示させます。
インデックステンプレートnews.htmlのサブカラムを編集していきます。
カテゴリー別記事リストをアーカイブ表示させるのに使えるMTタグには、以下の種類があります。

<mt:ArchiveList>
アーカイブの一覧を表示するためのブロックタグです。
https://movabletype.net/tags/2007/08/archivelist.html
モディファイアarchive_type="archive_type_foo"の中を変えることで他アーカイブを選択できます。今回はカテゴリー別を表示させたいので、archive_type="Category"を使います。
ブログ記事一覧アーカイブの絶対 URL を表示します。ブログ記事一覧アーカイブへのリンクを作るときに使います。mt:ArchiveListブロックの中か、アーカイブに関連したテンプレートで使用できます。
https://movabletype.net/tags/2007/08/archivelink.html
<$mt:CategoryArchiveLink$>
カテゴリアーカイブのURLを表示します。
https://movabletype.net/tags/2007/08/categoryarchivelink.html
<mt:ArchiveListHeader>
<mt:ArchiveList>タグの中で、最初にだけ実行する条件タグです。
https://movabletype.net/tags/2007/08/archivelistheader.html
<mt:ArchiveListFooter>
<mt:Archives>タグの中で、最後にだけ実行する条件タグです
https://movabletype.net/tags/2007/08/archivelistfooter.html
<$mt:ArchiveCount$>
ブログ記事一覧アーカイブのブログ記事数を表示します。
https://movabletype.net/tags/2007/08/archivecount.html
<$mt:CategoryCount$>
カテゴリに含まれるブログ記事の件数を表示します。
https://movabletype.net/tags/2007/08/categorycount.html

まず、カテゴリ別記事リストを呼び出し、その中からカテゴリ名と、そのカテゴリに含まれる記事の件数をそれぞれ取得し、表示させていきます。

<mt:ArchiveList archive_type="Category">
  <mt:ArchiveListHeader>
  <h3 class="sideArea__title">カテゴリ</h3>
    <ul class="sideArea__list">
      </mt:ArchiveListHeader>
       <li>
         <a href="<$mt:CategoryArchiveLink$>">
           <mt:ArchiveTitle>(<$mt:CategoryCount$>)
         </a>
      </li>
      <mt:ArchiveListFooter>
    </ul>
	</mt:ArchiveListFooter>
</mt:ArchiveList>

サブナビにカテゴリー別記事リストと、それぞれのカテゴリーに含まれる記事の数のアーカイブが入りました。
続いて、月別記事リストも表示させていきます。

<mt:ArchiveList archive_type="Monthly">
  <mt:ArchiveListHeader>
  <h3 class="sideArea__title">月別</h3>
    <ul class="sideArea__list">
      </mt:ArchiveListHeader>
       <li>
         <a href="<$mt:ArchiveLink$>">
           <mt:ArchiveTitle>(<$mt:ArchiveCount$>)
         </a>
      </li>
      <mt:ArchiveListFooter>
    </ul>
	</mt:ArchiveListFooter>
</mt:ArchiveList>

2つのアーカイブが表示できました!
ほかの記事別リストがある場合も、
archive_type="archive_type_foo"の部分を変更して表示させていきましょう。

ニュースページの仕上げ

ここで作ったアーカイブを、モジュールにして記事関連ページの各ニュース記事一覧のテンプレート記事テンプレートnews.htmlのテンプレートのサブカラムに入れておきましょう。

ニュース関連のテンプレート全てに入れておきましょう。


これでニュースぺージは完成です!

news.htmlのページは <$mt:BlogRelativeURL$>news.htmlで表示できます。
ニュースへのリンクをナビに表示させたい場合は、headerのモジュールから、ナビを追加させておくのもいいですね。

だいぶ慣れてきましたか?

サンプルを見る