チャレンジ! Movable TypeをCMSとして使ってみよう!

第8回ブログ記事リストテンプレートを使って、カテゴリ別絵本一覧ページを作る

トップページの次は、ブログ記事リストテンプレートをいじっていきましょう。⁠最新情報」カテゴリとその他のカテゴリで別々の体裁になりますので、カテゴリ名による条件分岐を行うところから始めます。

Movable Type4.23とMotionでましたね!

ほげ山くん:先輩、今月もなんですけど、Movable Type 4.23のセキュリティアップデートでましたね!

くれま先輩:でましたね(笑⁠⁠。早速アップデートしておきましょー!

【参考リンク】
[重要]セキュリティアップデート Movable Type 4.23 の提供を開始(MovableType.jp)
http://www.movabletype.jp/blog/_movable_type_423.html

くれま先輩:で、Motionの告知もでましたね。

【参考リンク】
Movable Type をソーシャルアプリケーションに『Motion』のベータを開始(MovableType.jp)
http://www.movabletype.jp/blog/the-web-is-in-motion-via-movable-
type-pro.html

ほげ山くん:僕、Motionがなんなのか、よくわかってないんですけど(汗⁠⁠。

くれま先輩:簡単に言うと、⁠Twitterのようなマイクロブロギング」「FriendFeedのようなにさまざまなWebサービスのフィードの収集・閲覧」ができる、⁠Movable Type Pro(4.25ベータ版)+専用プラグイン+デザインテンプレート」のセット、って感じかな。

ほげ山くん:Movable Typeで、Twitterみたいなことができるんですか…?

くれま先輩:そうなのよ。どんな感じなのかは、荒木勇次郎さんと蒲生トシヒロさんの記事が参考になるので、見てみてね!

【参考リンク】
Movable Type 4.25(英語版ベータ⁠⁠・Motion(ベータ)リリース(小粋空間)
http://www.koikikukan.com/archives/2008/12/17-015555.php
今日のMovable Type:Movable Type: Motionにシックス・アパート社の開発魂を感じた(世界中の1%の人々へ)
http://www.dakiny.com/archives/movable-type/
movable_type_motion_beta/

ほげ山くん:Movable Type、どんどん進化してますねぇ。

くれま先輩:Motion、おもしろいから触ってみるといいと思うよ!私もインストール していじってみたので、今度ちょっと書きます!

gihyo.jp 2009年新春特別企画にて公開します.乞ご期待!

「ブログ記事リスト」テンプレートに出力させる要素を確認する

くれま先輩:さて。話を本題に戻そうか。前回でトップページが一通りできたから、今日は「ブログ記事リスト」テンプレートをカスタマイズしていこう!

ほげ山くん:「ブログ記事リスト」テンプレートというと、カテゴリごとに属するブログ記事を自動でリストアップしてくれるテンプレートですね?

くれま先輩:うん。それで、デフォルトのテンプレートとはちょっと違った項目を出力させたいんだよね。ほげ山くん、第3回で自分で言ってたこと、覚えてる?

ほげ山くん:えーっと、あ、あれか。⁠最新情報』カテゴリの記事一覧ページは、この体裁ではだめなんじゃないですか?」って言ってましたね。僕。

くれま先輩:それそれ。⁠最新情報」カテゴリで出力させたい要素はこんな感じなんだよね。

「最新情報」カテゴリで出力したい要素
ブログ記事が投稿された日付
タイトル
ブログ記事の個別URL

ほげ山くん:了解です!じゃ、その他のカテゴリで出力させるものを、チェックしないといけませんね。

くれま先輩:第3回で見せた「カテゴリ別絵本一覧ページ」のデザインをもう一回見てみて確認しましょ。

図1 カテゴリ別絵本一覧ページのデザイン
図1 カテゴリ別絵本一覧ページのデザイン

ほげ山くん:そうかそうか。1冊につき、こんな内容が出力されているんですね。

その他のカテゴリで出力したい要素
絵本の表紙画像
絵本のタイトル(と個別ブログ記事へのリンク)
絵本の著者名
絵本の発売日

くれま先輩:そうなのよ。⁠最新情報」カテゴリとは違うでしょ?じゃ、次の段階に進んで、それぞれの出力を振り分けてみようね!

カテゴリ名による条件分岐をする

ほげ山くん:今回の条件分岐は、すごくシンプルですよね?

くれま先輩:うん。⁠最新情報」カテゴリか?それ以外か?の2通りだけだからね。まずは作業するテンプレートを開いていこう。上部メニューの[デザイン→テンプレート]でテンプレートの一覧画面になるでしょ、で、⁠アーカイブテンプレート」の見出しの下にある「ブログ記事のリスト」をクリック。

ほげ山くん:テンプレート編集画面になりました。

くれま先輩:これまでの作業をしていたら、

<div id="primary">
<!-- end div#primary --></div>

というdivがあるはずなので、その中にこんな記述をしてね。

div id="primary"の中に書き込む記述
<mt:IfCategory name="最新情報">
<!-- 「最新情報」カテゴリで行われることを記述 -->
<mt:Else>
<!-- その他のカテゴリで行われることを記述 -->
</mt:IfCategory>

ほげ山くん:えーっと、mt:IfCategoryタグのnameモディファイアで、カテゴリ名を指定しているわけですね。

くれま先輩:そうそう。で、mt:Else以降は、それに当てはまらない時に実行されるってこと。今日は次に、この<!-- その他のカテゴリで行われることを記述 -->の部分で実行されることを書いていくね。

その他のカテゴリで行われることを記述していく

ほげ山くん:さっき、その他のカテゴリで出力させる要素をチェックしましたよね。

くれま先輩:うんうん。なので、それらを出力するMTタグを対応させてみよう!第6回で出てきたものばかりだから、すぐ分ると思うよ!

その他のカテゴリで出力したい要素+それを出力するMTタグ
絵本の表紙画像
<mt:coverAsset><a href="<mt:EntryLink />"><img src="<mt:AssetThumbnailURL width="100" />"alt="<mt:EntryTitle />" title="<mt:EntryTitle />" /></a></mt:coverAsset>
絵本のタイトル(と個別ブログ記事へのリンク)
<a href="<mt:EntryLink />"><mt:EntryTitle /></a>
絵本の著者名
<mt:author_name />
絵本の発売日
<mt:release_date />

ほげ山くん:ほんとだ。ほとんど一緒ですねぇ。

くれま先輩:これらをレイアウト用のdiv要素等と組み合わせて書くとこんな感じね。

<!--<mt:Entries>
--><div class="booksDetail"><div>
<p><mt:coverAsset><a href="<mt:EntryLink />"><img src="<mt:AssetThumbnailURL width="100" />"alt="表紙写真:<mt:EntryTitle />" title="表紙写真:<mt:EntryTitle />" /></a></mt:coverAsset></p>
<h2><a href="<mt:EntryLink />"><mt:EntryTitle /></a></h2><ul>
<li><mt:author_name /></li>
<li><mt:release_date /></li>
</ul>
</div></div><!--</mt:Entries>
-->

ほげ山くん:お、このコメントの入れ方は、前回やったdiv要素の横並びですね!

くれま先輩:よく覚えてましたー。この記述を、<mt:Else>以下に書いたら、再構築しましょ。グローバルナビゲーションのリンクをクリックして、出力結果がどうなったか見てみてね。

「最新情報」カテゴリでの再構築結果
<div id="primary">

<!-- 「最新情報」カテゴリで行われることを記述 -->

<!-- end div#primary --></div>
その他のカテゴリでの再構築結果
<div id="primary">

<!--
--><div class="booksDetail"><div>
<p><a href="http://xxx.xxxxxx.xx/japan/003.html"><img src="http://xxx.xxxxxx.xx/assets_c/2008/11/fig001-thumb-100xauto.jpg"alt="表紙写真:トナカイさんの赤いおはな" title="表紙写真:トナカイさんの赤いおはな" /></a></p>
<h2><a href="http://xxx.xxxxxx.xx/japan/003.html">トナカイさんの赤いおはな</a></h2><ul>
<li>やまだゆみこ</li>
<li>2008年11月13日</li>
</ul>
</div></div><!--
-->
(以下、存在するブログ記事の数だけ繰り返し)

<!-- end div#primary --></div>

ほげ山くん:ちゃーんと条件分岐されてましたね!

くれま先輩:よしよし(笑⁠⁠。じゃ、次回は、ブログ記事リストテンプレートを完成させるよ!「最新情報」でもリストを表示させて、パンくずナビゲーションやローカルナビゲーションも表示させようね!

次回予告

おすすめ記事

記事・ニュース一覧