AfroNamiHeiの箱

Breadcrumb NavXTプラグインのインストールは前回にやったので。

jBreadCrumbを導入

jBreadCrumbのダウンロードをします。
CompareNetworks jQuery’d Bread Crumb – jBreadCrumb
ページの右にあるGet jQuery.jBreadCrumb 1.1のすぐ下のDownload jBreadCrumb Pluginをクリックして任意の場所に保存です。

解凍したフォルダー内にある必要なファイルは以下
jQuery CN Pluginsフォルダー内の

• Imagesフォルダー（と中のファイルすべて
• jsフォルダー（と中のファイルすべて
• Stylesフォルダー内のBreadCrumb.cssファイル

これらフォルダーごとWordPressのディレクトリにアップロードしますが、場所はいつもの場所ではなく使用しているテーマのディレクトリになります。

テーマがWPTP-Chocolateの場合
/wp-content/themes/wptp-chocolateディレクトリ

テーマがChocoThemeの場合
/wp-content/themes/chocothemeディレクトリ

他のテーマ使用時でも同じようにテーマのディレクトリへアップロードですが
jsディレクトリは既に存在しているので、解凍してできたjBreadCrumbのjsフォルダーは中のファイル全てを/wp-content/themes/（使用中テーマ）/jsディレクトリへアップロードします。

imagesディレクトリはほとんどのテーマで存在していそうなディレクトリですが、解凍した方のjBreadCrumbのImagesフォルダーは頭文字が大文字なのでImagesフォルダーを/wp-content/themes/（使用中テーマ）ディレクトリにアップロードできると思います。

3つ目のStylesフォルダーも/wp-content/themes/（使用中テーマ）ディレクトリにアップロード。

これらのフォルダーやファイルをアップロードの際は既にあるディレクトリやファイルを確認した方がいいかもです。

ヘッダーの編集

jBreadCrumb本体とjQuery、スタイルシートの設定を呼び出すためのソースをテーマのheader.phpファイルに書き込みます。

header.phpファイルの場所はいつもの通り、/wp-content/themes/（使用中テーマ）ディレクトリにあるのでheader.phpファイルをバックアップしてから編集することにします。

エディターでheader.phpファイルを開き

<?php wp_head(); ?>

を探し、この直後にでも

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory');?>/Styles/BreadCrumb.css" type="text/css">
<script src="<?php bloginfo('stylesheet_directory');?>/js/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/jquery.jBreadCrumb.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
                jQuery("#breadCrumb").jBreadCrumb();
})
</script>

を追加。

2010/05/12追記：取り消し線しました。読み込む必要がなかったJavaScriptライブラリーで、これを読み込んが状態だと他のWordPressプラグインに影響がでるようです。なのでjquery.jsファイルとjquery.easing.1.3.jsはアップロードしなくて大丈夫です

これはどのテーマでも共通とは思いますが、もし<?php wp_head(); ?>が複数ある場合（あるいはテーマ切り替えで故意に）、phpでブラウザ判定などで分岐させたりしてると思うので、分岐させているif文から
<?php endif; ?>かこの後に続く</div>
を探し出し、この直後に追加してみることも覚えておいてください。

パンくずナビゲーションの表示コード

表示コードを埋め込む場所はテーマによってことなります。

            <div class="breadCrumbHolder module">
                <div id="breadCrumb" class="breadCrumb module">
                    <ul>
<?php
if(function_exists('bcn_display'))
{
	bcn_display();
}
?>
                    </ul>
                </div>
            </div>

上記のコードを埋め込みむ。

編集するファイルは引き続きheader.phpファイルでWordPress Defaultテーマのように一番最後の行に追加してもデザインが壊れないものと、表示させたい場所に追加するとデザインが崩れるものがあるのでここからは参考程度に。

また、既にBreadcrumb NavXTプラグインや他のパンくずナビゲーションを埋め込んでいる場合はぶつからないようにコードを削除しておくなど必要かも。

WPTP-Chocolateの場合の表示コード

WPTP-Chocolateの場合は追加場所をどこにしてもデザインがつぶれると思います。
原因はいつものようにバックグラウンドの画像が表示していない、ずれたりするといった感じ。

これを修正するために埋め込むコードは

<div id="bodyaddsbg">
<span class="breadcrumb-font">
            <div class="breadCrumbHolder module">
                <div id="breadCrumb" class="breadCrumb module">
                    <ul>
<?php
if(function_exists('bcn_display'))
{
	bcn_display();
}
?>
                    </ul>
                </div>
            </div>
</span>
</div>

このコードをheader.phpの一番最後の行に追加です。

<div id="bodyaddsbg">はWPTP-Chocolateの画像を表示する部分、<span class="breadcrumb-font">はパンくずナビゲーション表示位置のためのタグです。

header.phpファイルを編集できたら追加した2つのタグで宣言されている要素を反映させるためにスタイルシートを編集します。

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

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

style.cssファイルの最後の行に追加です。
すでに.breadcrumbや.breadcrumb-fontがある時は以前に作ったものと思います。

left: 230px;の値を大きくするとパンくずナビゲーションの表示開始位置だけがどんどん右へ行きます。

ChocoThemeの場合の表示コード

ChocoThemeはデザインがくずれないテーマなので

            <div class="breadCrumbHolder module">
                <div id="breadCrumb" class="breadCrumb module">
                    <ul>
<?php
if(function_exists('bcn_display'))
{
	bcn_display();
}
?>
                    </ul>
                </div>
            </div>

上記のコードをheader.phpファイルの最後の方にある

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

の直前までに追加です。

Breadcrumb NavXTの設定

Breadcrumb NavXTの設定は試行錯誤してAfro的になんとかおさめたものなので、表示中の記事のパンくずリストをoffとか分類の表示を変更したりすると、設定は微妙に違ってくる可能性も。

また、設定が理解できれば同じようにする必要はなくなります。

デフォルトから空白にしている項目もあるので画像と照らし合わせたりで。

ホームの接尾語
</li>

ホームのアンカー
<li><a title="%title%へ移動" href="%link%">

表示中の記事の接尾語
</li>

表示中の記事のアンカー
<li><a title="再読み込み" href="%link%">

変更なし

カテゴリの接尾語
</li>

カテゴリのアンカー
<li><a title="%title% カテゴリーへ移動" href="%link%">

カテゴリアーカイブの接頭語
<li><a href="#">カテゴリー</a>

タグのアンカー
<a title="%title% タグへ移動" href="%link%">

タグのアーカイブの接頭語
<li><a herf="#">タグ</a></li>

日付アーカイブの接尾語
</li>

日付のアンカー
<li><a title="%title% アーカイブへ移動" href="%link%">

検索結果の接頭語
<li>検索結果 </li>

検索結果のアンカー
<a title="%title% の検索結果の最初のページへ" href="%link%">

各設定のなかで接尾語に
</li>
があるのに接頭語には
<li>
を入れずにメインのテンプレートにしている理由は、htmlが形成された時に
<li>
と
</li>
の位置関係が</a>などの関係でくるってしまうからです。

jBreadCrumbの設定

jBreadCrumb本体の設定も可能で、アコーディオンの速度や長さを指定できます。
解凍した中にjsフォルダーがありその中のjquery.jBreadCrumb.1.1.jsファイルが本体です。

jquery.jBreadCrumb.1.1.jsファイルの最後の方にある

        maxFinalElementLength: 10,
        minFinalElementLength: 10,
        minimumCompressionElements: 2,
        endElementsToLeaveOpen: 1,
        beginingElementsToLeaveOpen: 1,
        timeExpansionAnimation: 800,
        timeCompressionAnimation: 3000,
        timeInitialCollapse: 600,
        easing: _easingEquation,
        overlayClass: 'chevronOverlay',
        previewWidth: 10

が設定項目でAfroは上記のようにしてます。

わかる箇所だけ説明

• maxFinalElementLength（表示最大文字数
• minFinalElementLength（表示最少文字数
• minimumCompressionElements（各エレメント（区分分けされた文字）の折込数
• timeExpansionAnimation（開くときの速度
• timeCompressionAnimation（閉じるときの速度
• previewWidth（閉じたときの文字位置、あまり値を大きくしすぎると各区分の文字同士が離れてしまう

あとはいろいろさわるとわかってくるかも・・・。

以上で完了ですが、表示させたhtmlを確認すると閉じられてないタグもでてくるかもですが正常に動作はしてると思います。
SEO的にはよくないかもなので、他にいい方法とかあればぜひ連絡を。

引用、参考サイト

[JS]スムーズなスライドが気持ちいい、パンくずのスクリプト -jBreadCrumb | コリス