mtde.info

TOPページ > ナビゲーション関連サンプル > パンくずナビゲーションを作る

コード

以下コードは、topicpathという名前のid要素を定義して、パンくずナビゲーション用コードを書いています。

もともとのコード量が多くは無いため、MTIfで使用するテンプレートを分け、コードの見通しを良くしてみました。MTIgnoreテンプレートタグはコメント行で、パブリッシュ時には出力されません。カテゴリ、エントリ、月別アーカイブのみを準備しています。

<MTIgnore>カテゴリアーカイブ</MTIgnore>
<MTIf name="category_archive">
   <div id="topicpath">
   <p><a href="<$MTBlogURL$>">TOPページ</a> &gt; <MTParentCategories glue=" &gt; "><a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel remove_html="1" decode_html="1"></a></MTParentCategories></p>
   </div>
</MTIf>

<MTIgnore>エントリアーカイブ</MTIgnore>
<MTIf name="entry_template">
   <div id="topicpath">
   <p><a href="<$MTBlogURL$>">TOPページ</a> &gt; <MTParentCategories glue=" &gt; "><a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel remove_html="1" decode_html="1"></a></MTParentCategories> &gt; <a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></p>
   </div>
</MTIf>

<MTIgnore>月別アーカイブ</MTIgnore>
<MTIf name="datebased_only_archive">
   <div id="topicpath">
   <p><MTArchivePrevious><a href="<$MTArchiveLink$>">&lt; <$MTArchiveTitle$></a> | </MTArchivePrevious><a href="<$MTBlogURL$>">TOPページ</a><MTArchiveNext> | <a href="<$MTArchiveLink$>"><$MTArchiveTitle$> &gt;</a></MTArchiveNext></p>
   </div>
</MTIf>

CSS

以下一例です。

/* パンくずリスト */

#topicpath {
font-size:90%;
margin: 10px 0 10px 0;
padding: 0;
}

#topicpath p {
margin:0;
}

実装について

独立したひとつのモジュールとし、インクルードするのが最良です。このサンプルの場合では、「ブログ記事」テンプレートと「ブログ記事リスト」からインクルードする前提です。

実装の手順は以下のようになります。

1.管理画面「テンプレートモジュール」より、モジュールテンプレートの作成をクリック。

2.名前を「mdlTopicPath」（名前は任意で）、コードは上記サンプルのものをコピーペーストする。

3.mdlTopicPathモジュールを、埋め込みたい箇所からインクルードする。今回の例では、「ブログ記事」テンプレートと「ブログ記事リスト」からインクルードすることとします。

4.CSSを調整する。上記CSSサンプルを貼ってもよい。

5.再構築をかける。

サンプル

このサイトのパンくずナビゲーションはこの手法で生成されています。エントリページ、カテゴリページ、月別アーカイブページで有効となっています。

月別アーカイブページはこのサイトでは出していませんが、以下リンクで確認することができます。

月別アーカイブリンク：http://www.mtde.info/2008/02/