Breadcrumb NavXT

Breadcrumb NavXTはサイト内ナビゲーション、いわゆる「パンくずリスト」を簡単に作成してくれるプラグインです（パンくずなので、Breadcrumbという名前がついています）。

表示イメージはこんな感じですね

パンくずリストがあると、サイト内の階層をユーザー伝えることができるため、ユーザビリティの向上にもつながりますし、Googleなどの検索エンジンに対してもサイト構造を的確に伝えれるメリットがあります。

Breadcrumb NavXT設定 目次

• Breadcrumb NavXTのインストール
• Breadcrumb NavXTの設定
• テーマファイルへの埋め込み

Breadcrumb NavXTのインストール

１、WordPressのダッシュボードにログインし［プラグイン］→［新規追加］をクリック

２、検索窓に「Breadcrumb NavXT」を入力して［プラグインの検索］をクリック

３、Breadcrumb NavXTの下にある［いますぐインストール］をクリック

４、「本当にこのプラグンをインストールしていいですか？」と聞かれるので［OK］をクリック

５、インストールしているプラグイン: Breadcrumb NavXT 4.0.0と表示されるので、［プラグンを有効化］をクリック（バージョンは変更になる可能があります）

６、プラグンのラインナップにWP Social Bookmarking Lightが表示されていればインストール完了です

↑Contact Form 7設定 目次へ

Breadcrumb NavXTの設定

メニューの［設定］→［Breadcrumb NavXT］をクリック

Breadcrumb NavXTでは「一般」「アクティブページ」「投稿およびページ」「コンタクトフォーム」「Categories & Tags」「その他」の設定ができますが、ほぼ初期設定のままでいいと思います。

東池袋カレーマップではそのまま使っていますが「一般」の［区切り］と［ホームタイトル］はサイトに合わせて変更したほうがいいところですね。

例）区切りを「 > 」から「 → 」
　　ホームタイトルを「ホーム」から「トップページ」など

＜参考＞
「 &lt; 」は実体参照文字といって、WordPressの管理画面上では英数字ですが、ブラウザでみると「 > 」と表示されます。同じようなものに「 &lt; 」→「 < 」などがあります。

英数字で表すのは「 < 」「 > 」ともXHTMLのタグに使われているため、予想外の場所で「タグ」と認識されてしまうことを避ける為です。

↑Contact Form 7設定 目次へ

テーマファイルへの埋め込み

Breadcrumb NavXTの設定が終わったところで（というか確認しただけ）、次ははWordPressのテーマファイルへの埋め込み作業を行います。Breadcrumb NavXTはインストールしただけでは反映されません。

東池袋カレーマップはWordPressのデフォルトテーマの「Twenty Ten」をベースにカスタマイズしているかんけいで、編集するテーマファイルは「loop-single.php」になります（テーマファイルによって若干違ってくると思います）。

＜要注意＞
テーマファイルの編集に入りますが、WP-PostRatingsの部分だけピックアップしているため、基本的なテーマファイルの編集部分は省略しています。テーマファイルの編集について詳しく知りたい方はWordPressのインストールの「WordPressのテーマ作成に役立つサイト」などを参考にしてください。

＜編集開始＞
メニューの［外観］→［テーマ編集］を開き、右のメニューから「loop-single.php」をクリックします。パンくずリストを表示したい場所に以下の記述を追加。

<nav class="breadcrumb">
<?php
  if(function_exists('bcn_display'))
  {
  // Display the breadcrumb
  echo '<div class="navi">';
  bcn_display();
  echo '</div>';
  }
?>
</nav>

中央の「 bcn_display(); 」だけがあれば、パンくずリストはできますが、デザインの関係と言うか個人的な好みの問題で、タグをちょっと付け足してあります。

＜CSSファイル＞
上記ページに適応させているCSSはこちらになります。

nav.breadcrumb{
	padding: 0 0 20px 0;
	}
nav.breadcrumb a{
	margin: 0 5px 0 5px;
	}

吐き出すXHTMLがたんにアンカーのみなので、シンプルでいいですね。

各ページを確認して、最初のサンプルのように表示されていれば、Breadcrumb NavXTの設置作業は完了です。

↑Contact Form 7設定 目次へ