MovableTypeのパンくずナビが意外に難しい件

September 23, 2008

最近、MovableTypeをブログツールではなく、CMSツールとして扱うカスタマイズ案件が結構多くやっていまして、それなりにノウハウが溜まってきましたので、少しずつですが、アウトプットしていきます。

今回は、パンくずナビ(パン屑リスト?)の制作です。

MovableTypeですが、意外にもパンくずナビが標準の装備で実装されていません。その為、タグを駆使して作る必要があるのですが、これが意外にややこしかったりします。

ということで、MovableTypeのパンくずナビの制作のコツをメモっておきます。一応SEO的にも意識した作りにしておきます。

先日のFWW_サイト運営・管理研究会（仮）で、nishiaki氏が提案されていた内容を頭の片隅に置きながら、制作したいと思います。

念の為、nishiaki氏の提言(間違ってたらツッコんで下さい>nishiaki氏)

「SEO、SEOいわんで〜」より抜粋

なんとなくポイント3より

  • パンくずの現在地にstrong

+その後のディスカッションで出た話

  • パンくずの最後と、<title>タグの内容と、ページタイトル(<h1>タグ辺り)の文言は一致させるべき

実践

参照元

仕様は、「小粋空間」さんと同じ仕様です。

一般的な，現在地にはアンカータグが入らないタイプです。こんな感じです。さらに、nishiaki氏をお話を参考に、現在地に<strong>タグを入れます。

HOME > カテゴリー1 > サブカテゴリー2

逆に、現在地にもアンカータグが入っていいタイプだと、そう苦労することはありません。

普通に

<a href="<$MTBlogURL$>">HOME</a> &gt; <MTParentCategories glue=" &gt; ">
<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>';
<MTElse><$MTCategoryLabel$></MTElse></MTIfNonZero>
</MTParentCategories>

 こんな感じに書けば出来ます。(カテゴリーアーカイブ)

 

現 在地にアンカータグを入れるタイプですが、小粋空間さんのソースだと、なぜか、うまくいきません。色々原因も探ったのですが，分かったことは ArchiveTitleとCategoryTitleが同じなってしまうということぐらいでした。MT3系とMT4系で仕様変更があったのかもしれませ ん。

 

なので、小粋空間さんのソースを少し手を加えて(MTのPHP化が絶対条件)

<mt:SetVarBlock name="archive_title"><$mt:ArchiveTitle$></mt:SetVarBlock> <ul id="crumbs-navi">
<li><a href="<$mt:BlogURL$>">HOME</a> &gt; </li><mt:ParentCategories glue=" &gt; </li>">
<mt:IfNonZero tag="MTCategoryCount">
<?php 
if('<$mt:GetVar name="archive_title"$>' != '<$mt:CategoryLabel$>'){
echo '<li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a>';
}else{
echo '<li><strong><$mt:CategoryLabel$></strong></li>';
}
?>
<mt:Else>
<li><strong><$mt:CategoryLabel$></strong></li>
</mt:Else></mt:IfNonZero> </mt:ParentCategories>
</ul>

 

特に手を加えたのは、6行目辺りです。

<$MTCategoryLabel encode_php="q"$>' != '<$MTArchiveTitle encode_php="q"$>

小粋空間さんのように、これをやっちゃうと、MT4ではCategoryLabelとArchiveTitleが必ずおなじになってしまうため、この値が常にfalseになってしまいます。

そこで、1行目でそのページのArchiveTitleを任意の変数(ここではarchive_title)に入れます。

その上で、CategoryLabelとの整合性を計った上で、true(つまり現在地)なら、アンカー無し+SEOに配慮した<strong>タグを挿入。falseならアンカー付きで出力します。

若干ややこしいのですが、これで一応らしいパンくずナビが出来ると思います。

 

余談

あとこれはアクセスビリティ的な余談なんですが、パンくずナビって上部に有るのも重要だけど、記事の最後に合った方が使い易く無いかな?って話。

上部のパンくずは記事が、自分の思った記事じゃなかった時に使うことが多く、それも必要なんだけど、下部のパンくずは記事を読んでくれた人へ向けのもので、それも便利だと思います。

といってもここは、ブログなので、付けませんが。。。

そもそも、ブログにはパンくずナビあまり必要じゃ無いかなって話。(言い訳)

[実績紹介]Fireworld福岡(五大株式会社)[BaserCMS]
[実績紹介]Fireworld福岡(五大株式会社)[BaserCMS]
Fireworld福岡（五大株式会社）様のWebサイトを公開しました。 薪ストーブを専門に販売、設置、施工をされている会社です。 うちのシンプルなページを気に入って下さり、お問い合わせを頂きました... MORE »
[Movable TypeをCMSとして使う] 第4回 MT4?MTOS?
[Movable TypeをCMSとして使う] 第4回 MT4?MTOS?
前回のエントリ([Movable TypeをCMSとして使う] 第3回 ファイル構成を考える)の続きです。 MTこと、Movable Typeには、バージョン4から、MT4とMTOS(オープンソ... MORE »
[Movable TypeをCMSとして使う] 第3回 ファイル構成を考える
[Movable TypeをCMSとして使う] 第3回 ファイル構成を考える
前回のエントリ([Movable TypeをCMSとして使う] 第2回 プラグインを考える)の続きです。 Movable Typeは、あくまでBlogとして使うことを前提に作られていますので... MORE »
[Movable TypeをCMSとして使う] 第2回 プラグインを考える
[Movable TypeをCMSとして使う] 第2回 プラグインを考える
前のエントリ([Movable TypeをCMSとして使う] 第1回 構成を考える)の続きです。 書く順番が違う気もしますが、MTをCMSとして使う時に、便利なプラグインをご紹介します。 プラ... MORE »
[Movable TypeをCMSとして使う] 第1回 構成を考える
[Movable TypeをCMSとして使う] 第1回 構成を考える
前置き 先日、告知したサト研が来週末2月21日に行われます。今回から数回にわたりのサト研LT(ライト人グトーク)用に、ブログで先に書いてまとめておきます。時間的にも全部話せないと思うので、「詳し... MORE »

Comment( 2 )

nishiaki (November 25, 2008 6:01 PM)

パンくず下に付けるの個人的に好きです。
たまにやります。

同じコード張っとけばいいし。

パンくず用のコードどんなに書いとったっけな？
いつもコピペだから記憶にないやw
今度オレもパンくず用のコード晒してみますね。

ヤマダ ヤスヒロAuthor Profile Page (November 25, 2008 6:31 PM)

パンくず下にやるのいいですよね。
といいながら、なかなかやりませんが。

上記のコードも、もうちょっといい感じにならないかなっとも思っていますが、なかなか難しいですね。

只今、コメント機能が正常に機能していません。ご意見ご要望はこちらからどうぞ。

コメントする

このブログ記事に対するトラックバックURL

ヤマダヤスヒロ
ヤマダヤスヒロ

福岡県 福岡市在住 Webデザイナー。
1973年福岡生まれ。射手座、B型。HNは、やいぶ・Yaive など。

幼少期から、モノを作ることが大好き。しかし、小学生の頃の夢は弁護士。 中学生で、漫画家を志すも、高校生時に建築に強く興味を持ちあっさり方向転換。 某デザイン系大学を経て、インテリアデザイナーになる。その後建築士の免許を取得。 建設会社で現場監督を経験、建築塗装会社で営業を経てWebマスターになる。 2006年に独立開業、BULANCOとしてWeb制作に携わる。現在に至る。

業務範囲
制作環境
参加コミュニティー
ページトップへ