AfroNamiHeiの箱

WordPressでパンくずナビゲーションを探してみた。

パンくずナビゲーションとは、現在表示しているページがどの階層にいるのか、「トップ>プラグイン>Breadcrumb NavXT」のような表示でわかりやすくしたもの。

パンくずナビ、パンくずリストとも言われるようで、名前の由来は童話「ヘンゼルとグレーテル」で、主人公が森で迷子にならないように通り道にパンくずを置いていった」というエピソードかららしい。

google検索ですぐに見つかったのがBreadcrumb NavXTプラグインだったので使ってみる。

日本語版も存在していたので日本語版を使うことにします。

Afroがダウンロードする段階ではバージョンが3.4.1で日本語も同じバージョンがでてました。

ダウンロード > 解凍 > アップロード > プラグイン有効化

オフィシャルサイト
Breadcrumb NavXT | Mtekk’s Crib

日本語版サイト
Breadcrumb Navigation XT [パンクズリストの表示] – WordPress Firefox オープンソース って(・∀・)イイ!!

サイトからダウンロードし、解凍する。

breadcrumb-navxtフォルダーをFTPソフトで/wp-content/pluginsディレクトリにアップロード。

アップロードしたら有効っといつも通りの流れです。

プラグイン設定画面

特に変更することなく使えますが、各設定ページにあるテンプレートを日本語に変えることはみんなやりそうです。

たとえば「カテゴリー」

「カテゴリー」タブで開くページの「カテゴリアーカイブの接頭語」の項目。

この接頭語、接尾語はそれぞれ2つありますが上の2つ、「カテゴリの接頭語」と「カテゴリの接尾語」は次にある「カテゴリのアンカー」にくっついてくると考えてください。

そしてこの「カテゴリのアンカー」はリンクとして飛ばされる、このブログでいう「WordPressテーマ」や「外部サービス」などのことで、次にある「カテゴリアーカイブの接頭語」と「カテゴリアーカイブの接尾語」は現在開いているカテゴリの文字になります。

ほかのタブメニューの「タグ」や「日付アーカイブ」なども考え方は同じみたいです。

日本語に編集する箇所は

Archive by category '

のArchive by categoryを日本語に

カテゴリー '

とでもしたり、「タグ」や「その他」にもArchive by tagをタグやSearch results forを検索結果とかに変更しておくと表示文字が日本語になります。

「表示中の記事」の「表示中の記事のアンカー」
・・・Reload the current page.

「記事＆ページ」の「投稿のアンカー」と「ページアンカー」
・・・Go to

「カテゴリー」の「カテゴリのアンカー」
・・・Go to theとcategory archives.

「タグ」の「タグのアンカー」
・・・Go to theとtag archives.

「日付アーカイブ」の「日付のアンカー」
・・・Go to theとarchives.

htmlタグやWordPressの変数があるのでよくわからない人は以上の文字は変更できると思っていいと思います。

パンくずナビゲーションのタグ

パンくずナビゲーションを表示させたい場所にタグを書き込みます。

書き込むタグは

<div class="breadcrumb">
<?php
if(function_exists('bcn_display'))
{
	bcn_display();
}
?>
</div>

テーマがWPTP-Chocolateの場合、Afroは書き込むファイルはheader.phpファイルの一番最後に書き込んだ。

テーマがChocoThemeの場合は

<a href="<?php bloginfo('rss_url'); ?>" id="rss-link">RSS</a>
<div id="main-top">
<div id="main-bot">

と

<div class="cl">&nbsp;</div>
<!-- Content -->
<div id="content">

の間にタグを入れた。

テーマによってはheader.phpファイルの最後に書き込むとデザインがくずれます。横型カレンダーや流れるニュースなどを入れた時と同じ症状になるはずなので手を加える必要があります。

画像が表示されていないだけなのでスタイルシートを利用して画像を読み込ませることと。
パンくずナビゲーションの文字開始位置が気に入らなくなると思うので、文字位置をずらしたときに画像まで文字の位置に影響されないようにclassを2つに分けることにします。

WordPressのテーマ、WPTP-Chocolateはデザインが崩れます。

テーマがWPTP-Chocolateの場合の修正した書き込むタグ

<div class="breadcrumb">
<span class="breadcrumb-font">
<?php
if(function_exists('bcn_display'))
{
	bcn_display();
}
?>
</span></div>

修正個所は赤文字を2つ追加しただけです。

スタイルシートの編集

header.phpファイルを編集し終わって、宣言されている2つのclassの設定を書き込みます。

ChocoThemeのようにデザインが崩れないテーマはスタイルシートを編集する必要がないかもしれないですが、パンくずナビゲーションの横位置は修正したい場合がでてきたら参考にして下さい。

編集するのはstyle.cssファイルです。
WPTP-Chocolateの場合は以下をstyle.cssファイルの最後の行に追加してます。

.breadcrumb {
float: left;
width: 922px;
background: url(images/content.jpg);
position: relative;
}

.breadcrumb-font{
position: relative;
left: 240px;
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Meiryo,Verdana,'ＭＳ Ｐゴシック',sans-serif;
font-size: 14px;
color : #333333;
}

breadcrumb内で
background: url(images/content.jpg);
と書いてパンくずナビゲーションのバックになる画像を指定。

パンくずナビゲーションの横位置を指定してるのが2つ目のclassのbreadcrumb-font内で
position: relative;
と
left: 240px;
です。
240の数値を大きくしていくと、表示開始位置がどんどん右へ移動します。

オフィシャルサイトでも例として説明しているclassはbreadcrumbの1つで、このclassに横位置を定義する
position: relative;
と
left: 240px;
をbreadcrumb内で宣言してしまうと文字は意図した位置で表示されますが、画像までもずれてしまうので別classで宣言したわけです。

その他
見逃しそうな項目で、Breadcrumb NavXT設定画面の右上に

インポート、エクスポート、リセットのスライドするボタンがあり、これをクリックして引き出すと

設定のバックアップやリセットなどができるようになってるようです。

引用、参考サイト
Customize in Ninja Blog ―パンくずナビをつける