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

第9回 パンくずナビゲーション部分を作る

この記事を読むのに必要な時間:およそ 5 分

前回の次回予告は「ブログ記事リストテンプレートを完成させよう。」となっていましたが,パンくずナビゲーション部分のボリュームがかなりありますので,今回はその解説を少し詳しく行います。ここで作成するパンくずナビゲーションは,ブログ記事リストテンプレートだけでなく,すべての第二階層用のテンプレートに流用します。

パンくずナビゲーション部分を作る

くれま先輩:ということで,今日は「パンくずナビゲーション部分」に集中します!予定を変更してすみません…。第二階層用のテンプレート内で使用する「パンくずナビゲーション」のモジュールを作りましょう!

ほげ山くん:あ,はい。じゃ,新規モジュールを作成する画面を開きますね。上部メニューの[デザイン→テンプレート]で,「テンプレートモジュール」の下の「テンプレートモジュールを作成」をクリック。でいいですよね。

くれま先輩:うんうん。じゃあ,タイトルを「パンくずナビゲーション」として,次のサブテンプレートを記述して保存してね!中身は後で解説するから。

新規テンプレートモジュール「パンくずナビゲーション」に記述する内容

<mt:If name="entry_template">
	<div id="topicPath">
	<p>
	<a href="<mt:BlogUrl />">トップ</a>
	&nbsp;&raquo;&nbsp;
	<mt:ParentCategories glue="&nbsp;&raquo;&nbsp;">
	<a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a>
	</mt:ParentCategories>
	&nbsp;&raquo;&nbsp;
	<mt:EntryTitle />
	</p>
	<!-- end div#topicPath --></div>
<mt:ElseIf name="page_template">
	<div id="topicPath">
	<p>
	<a href="<mt:BlogUrl />">トップ</a>&nbsp;&raquo;&nbsp;<mt:PageTitle />
	</p>
	<!-- end div#topicPath --></div>
<mt:ElseIf name="category_archive">
	<div id="topicPath">
	<mt:SetVarBlock name="arctitle"><mt:ArchiveTitle encode_html="1" /></mt:SetVarBlock>
	<p>
	<a href="<mt:BlogUrl />">トップ</a>
	&nbsp;&raquo;&nbsp;
	<mt:ParentCategories glue="&nbsp;&raquo;&nbsp;">
	<mt:SetVarBlock name="catlabel"><mt:CategoryLabel encode_html="1" /></mt:SetVarBlock>
	<mt:If name="catlabel" ne="$arctitle">
	<a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel encode_html="1" /></a>
	<mt:Else>
	<mt:CategoryLabel encode_html="1" />
	</mt:If>
	</mt:ParentCategories>
	</p>
	<!-- end div#topicPath --></div>
<mt:ElseIf name="search_results">
	<div id="topicPath">
	<p>
	<a href="<mt:BlogUrl />">トップ</a>&nbsp;&raquo;&nbsp;「<mt:SearchString />」の検索結果</p>
	<!-- end div#topicPath --></div>
<mt:Else>
	<div id="topicPath">
	<p>
	<a href="<mt:BlogUrl />">トップ</a>&nbsp;&raquo;&nbsp;サイトマップ</p>
	<!-- end div#topicPath --></div>
</mt:If>

ほげ山くん:うーむ。mt:Ifの中に,mt:ElseIfというのがたくさん入ってますねー。

くれま先輩:mt:ElseIfの部分で,次々と条件分岐をしているのが分るかな? mt:Ifのnameモディファイアで最初に条件を挙げた「entry_template(ブログ記事)」に当てはまらなければ,次のmt:ElseIfでの「page_template(ウェブページ)」で判別…といった感じで,1つ1つの条件に当てはまっているか,次々にチェックしていってるイメージなんだけど。

ほげ山くん:なるほどなるほど,わかります。ところでここのモディファイアの値って,第5回のときに出てきたアレですよね?

【参考URL】
Archive Template Variables | MovableType.org(英語)
http://movabletype.org/documentation/designer/
archive-template-variables.html

くれま先輩:そうそう!ここで使用しているモディファイアの値は,すべてあらかじめシステム内で用意されている予約変数なんだよ。その他,今回使ったのは,「category_archive(カテゴリーアーカイブ/ブログ記事のリスト)」「search_results(検索結果)」。

ほげ山くん:そして,最後のmt:Else以下が「その他」なんですね。でも,「その他」の中って,「サイトマップ」って書いてあるのが気になるんですけど…。

くれま先輩:そうだよねぇ。それを説明したいから,まずは次に挙げるすべてのテンプレート内の<div id="primary">の直後に,<mt:Include module="パンくずナビゲーション" />と書いてみて。それで,サイト全体を再構築してみてね。

<mt:Include module="パンくずナビゲーション" />を記述するテンプレート

インデックステンプレート
  • サイトマップ
アーカイブテンプレート
  • ウェブページ
  • ブログ記事
  • ブログ記事のリスト
システムテンプレート
  • 検索結果

ほげ山くん:はーい。あぁ,そうか。今回は,色々な条件(モディファイアの値)で振り分けられて最後に残るのは「サイトマップ」のテンプレートしかないってことですね?

くれま先輩:よくできました! 今回はそういうことなのでさっきみたいに書いたの。というか,サイトマップの為のインデックステンプレートには今回あえて変数を設定しなかったので,mt:Else以下に書かざるを得ないんだけどね。別案件で,予約変数を持たないテンプレートが複数あるような場合には,この部分は手直しする必要があるので覚えておいてね。で,全体の再構築はできた?

ほげ山くん:できました。パンくずナビゲーションの部分は,こんな風になってます。

それぞれのテンプレートが出力する,パンくずナビゲーション部分のHTML

ブログ記事
<div id="topicPath">
<p>
<a href="http://xxx.xxxxxx.xx/>トップ
</a>&nbsp;&raquo;&nbsp;<a
href="http://xxx.xxxxxx.xx/japan/">国内作家の絵本
</a>&nbsp;&raquo;&nbsp;トナカイさんの赤いおはな
</p>
<!-- end div#topicPath --></div>


ウェブページ
<div id="topicPath">
<p>
<a href="http://xxx.xxxxxx.xx/>トップ
</a>&nbsp;&raquo;&nbsp;会社概要
</p>
<!-- end div#topicPath --></div>
ブログ記事のリスト
<div id="topicPath">
<p>
<a href="http://xxx.xxxxxx.xx/>トップ
</a>&nbsp;&raquo;&nbsp;国内作家の絵本
</p>
<!-- end div#topicPath --></div>
検索結果
<div id="topicPath">
<p>
<a href="http://xxx.xxxxxx.xx/>トップ
</a>&nbsp;&raquo;&nbsp;「(検索キーワード)」の検索結果
</p>
<!-- end div#topicPath --></div>
サイトマップ
<div id="topicPath">
<p>
<a href="http://xxx.xxxxxx.xx/>トップ
</a>&nbsp;&raquo;&nbsp;サイトマップ
</p>
<!-- end div#topicPath --></div>

著者プロフィール

黒野明子(くろのあきこ)

1973年生まれ。1995年 武蔵野美術大学短期大学部専攻科グラフィックデザインコース修了。

ファッションカメラマン事務所、広告系デザイン事務所、Web制作会社勤務を経て、2003年よりフリー。Webデザイン・企画を中心に、DTPデザインなども行う。

現在、武蔵野美術大学共通デザイン研究室非常勤講師及び株式会社デジタルスケープ・PreJOBトレーニング講師も兼務。2005年秋頃から業務としてMTサイトの構築を始め、現在の業務のほとんどでMovable Typeを使用している。

著書:

『CMSとして使うMovable Typeガイドブック』 (翔泳社、共著)

『Movable Typeプロフェッショナル・スタイル』(毎日コミュニケーションズ、共著)

URL:http://cremadesign.jp/

コメント

コメントの記入