80年代へようこそ!

Welcome back to the 80s!

80年代へようこそ! Welcome back to the 80s!

パンくずリストの設置について

  |日曜日

Movable Typeにパンくずリストを実装する方法は、各サイトで紹介されていますが、自分用のメモという意味合いで、ソースコードを記載しておきます。このサイトは、全体的にマルチブログで構築されていますので、そこら辺も考慮に入れつつ、まずは、この「sign of cypher」に設置してみることにします。

「sign of cypher」のトップページは、階層的には、メインサイト「80年代へようこそ! Welcome back to 80s!」のひとつ下に位置しています。サイト全体の「Home」が「sign of cypher」の上にあることになりますので、パンくずリストでの表示は、「Home > sign of cypher」となります。

Home  > 

ひとまず、こんなかんじです。上記と同様に、各ページに対応するソースを作っていき、最終的にはひとつにまとめて「パンくずリスト」という名前のテンプレートモジュールを作成します。ひとつにまとめるときには、「>mt:If<」を使って、このページの時にはこのソースを表示とする、といったかんじで、各ページに対応させます。上記の場合ですと、メインページのみに対応させますので、下記のようになります。


Home  >  <a href="<mt:BlogUrl />">

(以下はひとまず省略)

次に、個別のブログ記事に対応するページについて。カテゴリを考慮して、「親カテゴリ > 子カテゴリ > ブログ記事のタイトル」となるようにします。孫カテゴリについては、未検証です。

Home  >  <a href="<mt:BlogUrl />">  >  <a href="<mt:CategoryArchiveLink />">  > 

同様に、月別アーカイブのページ、カテゴリ別アーカイブのページ、ウェブページ、検索結果のページ、アーカイブインデックス(デフォルトで「archives.html」と出力されるファイル)に対応するように追加していきます。

で、ひとつにまとめるとこんなかんじです。

<mt:If name="main_index">
<div id="topicPath">
<p>
<a href="/index.html">Home</a>
 > 
<a href="<mt:BlogUrl />"><mt:BlogName encode_html="1" /></a>
</p>
</div>
<mt:ElseIf name="entry_template">
<div id="topicPath">
<p>
<a href="/index.html">Home</a>
 > 
<a href="<mt:BlogUrl />"><mt:BlogName encode_html="1" /></a>
 > 
<mt:ParentCategories glue=" > ">
<a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a>
</mt:ParentCategories>
 > 
<mt:EntryTitle />
</p>
</div>
<mt:ElseIf name="datebased_archive">
<div id="topicPath">
<p>
<a href="/index.html">Home</a>
 > 
<a href="<mt:BlogUrl />"><mt:BlogName encode_html="1" /></a>
 > 
<$mt:ArchiveTitle$>
</p>
</div>
<mt:ElseIf name="category_archive">
<div id="topicPath">
<mt:SetVarBlock name="arctitle"><mt:ArchiveTitle encode_html="1" /></mt:SetVarBlock>
<p>
<a href="/index.html">Home</a>
 > 
<a href="<mt:BlogUrl />"><mt:BlogName encode_html="1" /></a>
 > 
<mt:ParentCategories glue=" > ">
<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>
</div>
<mt:ElseIf name="page_template">
<div id="topicPath">
<p>
<a href="/index.html">Home</a>
 > 
<a href="<mt:BlogUrl />"><mt:BlogName encode_html="1" /></a>
 > "<mt:PageTitle />
</p>
</div>
<mt:ElseIf name="search_results">
<div id="topicPath">
<p>
<a href="/index.html">Home</a>
 > 
<a href="<mt:BlogUrl />"><mt:BlogName encode_html="1" /></a>
 > 「<mt:SearchString />」の検索結果</p>
</div>
<mt:Else>
<div id="topicPath">
<p>
<a href="/index.html">Home</a>
 > 
<a href="<mt:BlogUrl />"><mt:BlogName encode_html="1" /></a>
 > アーカイブ</p>
</div>
</mt:If>

これで、「パンくずリスト」という名前のテンプレートモジュールを作成し、例えば「ヘッダー」の下記のところに挿入すれば、パンくずリストが表示されるようになります。CSSで適当に見た目を整えることも忘れずに。

<div id="content">
<div id="content-inner">
<$mt:Include module="パンくずリスト" $>
<div id="alpha">
<div id="alpha-inner">

  最終更新日 :

 - WebTips ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

no image
ファイル名に「_」アンダースコアを使えるようにする

ウェブページのファイル名に「_」アンダースコアを使 …

no image
便利なウェブ配色ツール

便利なウェブ配色ツールの紹介です。

no image
トラックバックの動作検証

まさかこのブログにトラックバックしてくるような酔狂 …

no image
ブログのポータルに登録してみた

このサイトの訪問者のほとんどは、検索エンジンからの …

no image
IETester、複数のバージョンのIEを表示するアプリ

IETester、複数のバージョンのIEを表示するアプリケーションの紹介です。

no image
カテゴリーの順番を任意に並べ替える

カテゴリーの順番を任意に並べ替える。 カテゴリーと …

no image
今さらですが検索エンジンへの登録について

各検索エンジンへの登録についての記述です。

no image
YouTubeの動画をPCに保存して携帯電話で見る方法

最近、携帯を買い換えたので、自分用のメモです。駄文 …

no image
ランダムに選択したブログ記事を表示する

ランダムに選択したブログ記事を表示するプラグイン。 …

no image
MT4.21から4.23へのアップデート

セキュリティアップデート Movable Type …