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

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

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

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

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

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

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

新規テンプレートモジュール「パンくずナビゲーション」に記述する内容
<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>

くれま先輩:じゃ、これを出力しているそれぞれのサブテンプレートをそれぞれ説明してみるね。まずは、⁠entry_template(ブログ記事⁠⁠」で実行される部分だよ。

「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:ParentCategoriesって、⁠最上位のカテゴリから現在のカテゴリまでを繰り返して表示するブロックタグ」ですよね?ということはこれって、サブカテゴリがあっても対応できるってことなんですかね?

くれま先輩:当たり!mt:ParentCategoriesだったら、サブカテゴリがある場合でも「トップ&nbsp;&raquo;&nbsp;トップレベルカテゴリ&nbsp;&raquo;&nbsp;サブカテゴリ&nbsp;&raquo;&nbsp;ブログ記事タイトル」というようにループして出力してくれるからね。

ほげ山くん:今後、もしかしたら、カテゴリの中にサブカテゴリを作る可能性もありますものね。

くれま先輩:ありえるよね。今後のことも考慮して、今回はこうしてみたわけ。そして、glueモディファイアの値「&nbsp;&raquo;&nbsp;」が、mt:ParentCategoriesで繰り返される部分のつなぎ目に出力されるの。

ほげ山くん:なるほどー。

「page_template(ウェブページ⁠⁠」で実行されるサブテンプレート
<div id="topicPath">
<p>
<a href="<mt:BlogUrl />">トップ</a>&nbsp;&raquo;&nbsp;<mt:PageTitle />
</p>
<!-- end div#topicPath --></div>

くれま先輩:これは単純だよね。

ほげ山くん:mt:PageTitleで、ページのタイトルが出力されているだけですね。

「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:ParentCategoriesが使われてますけど…。なんだかmt:SetVarBlockで「arctitle」という名前の変数を設定してます?

くれま先輩:よく観察してますなー。よく見るとわかるけど、mt:ParentCategoriesによるループに入る前に、変数「arctitle」の値として現在のアーカイブのタイトル(この場合はカテゴリ名)を設定しているでしょ。で、mt:ParentCategoriesのループの中でmt:CategoryLabelを使って、変数「catlabel」の値としてループの中に出てくるカテゴリ名を設定。次のmt:If name="catlabel" ne="$arctitle"は、何をしているかわかる?

ほげ山くん:えーっと。現在のカテゴリ名(arctitle)とループの中のカテゴリ名(catlabel)が違う場合(ne)は、処理が実行されるんですね?

くれま先輩:よくできました。何でこういうことをするかというと、mt:ParentCategoriesによるループの中でカテゴリ名にカテゴリーアーカイブへのリンクがついているじゃない?

ほげ山くん:<a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel encode_html="1" /></a>の部分ですね。

くれま先輩:そうそう。でも、いま見ているページへのリンクも生成されると、ちょっと使いにくいでしょ? なので、いま見ているページのカテゴリ名の場合は、mt:Else以下に記述されているリンクなし部分が出力されるように、条件分岐しているんだよ。

「search_results(検索結果⁠⁠」で実行されるサブテンプレート
<div id="topicPath">
<p>
<a href="<mt:BlogUrl />">トップ</a>&nbsp;&raquo;&nbsp;「<mt:SearchString />」の検索結果</p>
<!-- end div#topicPath --></div>

ほげ山くん:検索結果テンプレートの場合は、mt:SearchStringというMTタグを使っているんですね。

くれま先輩:検索に使用された文字列を、ここに出力させたいんだよね。⁠トップ&nbsp;&raquo;&nbsp;「りんご」の検索結果」とかね。

ほげ山くん:これって、タグクラウドをクリックして検索結果テンプレートを見た場合でも、ちゃんと動作してますね。

その他の場合に実行されるサブテンプレート
<div id="topicPath">
<p>
<a href="<mt:BlogUrl />">トップ</a>&nbsp;&raquo;&nbsp;サイトマップ</p>
<!-- end div#topicPath --></div>

くれま先輩:で、さっき話題に出たこの部分ね。

ほげ山くん:今回のサイトでは、条件分岐して残るテンプレートが「サイトマップ」しかないからですよねー。了解しました!

くれま先輩:そんな訳で、今回はちょっと詳しくパンくずナビゲーション部分のサブテンプレートを解説してみましたが、色々と応用の効く内容だと思いますので、試してみてください!そして、次回こそ、ブログ記事リストテンプレートを完成させましょう!!

次回予告

おすすめ記事

記事・ニュース一覧