WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： mane
カテゴリー： マークアップ >CMS

Movable Type.netはSix Apartが提供しているウェブサービスなのですが、マニュアルが全て日本語で用意されており、実装したい事がすんなり分かるのですごく便利でした。
実は・・・Movable Type.netを触るのは今回が初めてで、何も分からない状態からスタートでしたが、どうしてもわからない事はサポートにメールすると丁寧な返答が返ってくるので個人的にかなり好きになりました！！

そんなMovable Type.netで実装する中、最初につまづいたのが“パンくずリスト”・・・・
今回、子カテゴリにバックナンバー機能を実装したかったので、子カテゴリをメインカテゴリとする事が前提です。
また、カテゴリが増える可能性があったため、パンくずも動的にする必要がありました。

解決できたので、備忘録も兼ねて紹介していきます。

実装イメージ

実装方法紹介

早速ソースコードから見ていきましょう。
ソースコードは「ブログトップ、カテゴリ別一覧、詳細ページ」で使える仕様になっています。

<div class="pcStyle">
　　<ul class="flex crumb">
　　　　<li class="home"><a href="/"></a></li>
　　　　<mt:if name="entry_template">

　　　　　　<mt:HasNoParentCategory>
　　　　　　　　<li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></li>
　　　　　　</mt:HasNoParentCategory>

　　　　　　<mt:HasParentCategory>
　　　　　　　　<mt:ParentCategory>
　　　　　　　　　　<li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></li>
　　　　　　　　</mt:ParentCategory>
　　　　　　　　<li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></li>
　　　　　　</mt:HasParentCategory>

　　　　　　<li><$mt:PageTitle$></li>

　　　　<mt:else>

　　　　　　<li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></li>

　　　　</mt:if>
　　</ul>
</div>

まず、下記のソースコードでif文を作ります。
条件分岐で様々な事ができるので、必ず抑えておきたいタグです。

<!--記事詳細ページ内の時-->
<mt:if name="entry_template">

　　<!--ここに記事詳細ページ内に入った時の文を書きます-->

<!--記事詳細ページ外の時-->
<mt:else>
　　<li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></li>
</mt:if>

name=”entry_template” はMovable Typeと共通の変数です。
「entry_template ＝ ブログ記事」なので、「詳細ページの場合」という意味になります。
mt:else で、そうじゃない場合（一覧ページの場合）、カテゴリー名を表示する仕様にしています。
※Movable Typeのテンプレートの変数についてはコチラを参照してください。

記事詳細ページ

それでは、記事詳細ページの分岐を説明していきます。
全て、Movable Type.netのマニュアルに載っているタグです。

<!--記事詳細ページ内の時-->
<mt:if name="entry_template">

　　<!--親カテゴリのみの記事詳細-->
　　<mt:HasNoParentCategory>
　　　　<li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></li>
　　</mt:HasNoParentCategory>

　　<!--子カテゴリの記事詳細-->
　　<mt:HasParentCategory>
　　　　<mt:ParentCategory>
　　　　　　<li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></li>
　　　　</mt:ParentCategory>
　　　　<li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></li>
　　</mt:HasParentCategory>

　　<!--記事タイトル-->
　　<li><$mt:PageTitle$></li>

タグを1つずつ説明していきます！

<mt:HasNoParentCategory>

現在のカテゴリに親カテゴリが存在しないときだけ実行する条件タグです。
親カテゴリの詳細ページの場合、親カテゴリは無いので、親カテゴリ名のみがパンくずリストに表示されます。

mt:HasNoParentCategory

<mt:HasParentCategory>

現在のカテゴリに親カテゴリが存在しているときだけ実行する条件タグです。
こちらは子カテゴリの詳細ページの場合に発動します。

mt:HasParentCategory

<mt:ParentCategory>

現在のカテゴリの親カテゴリを表示します。
子カテゴリの詳細ページの時は、親カテゴリの表示が必要になるので、こちらを記載。

mt:ParentCategory

これで1つのブログに、1つのモジュールでパンくずを表示させることができます。
新しくカテゴリを追加してもメンテナンス不要ですね！

まとめ

すごく苦労したのですが、こうして備忘録を兼ねて復習すると、すごく簡単なことでした・・・
調べれば調べるほど、複雑に考えすぎて分からなくなるので、理解力と応用力は大切ですね！