あなたのサイトにパンくずリストを簡単に設置できるプラグイン『Breadcrumb NavXT』




ホームページやブログは階層構造になっているので、現在位置が一目でわかる「パンくずリスト」が設置されていると分かり易いサイトという印象を受けます。

WordPressでは「パンくずリスト」を簡単に導入できる『Breadcrumb NavXT』というプラグインがあります。

ということで、tade-blogに設置してみましたので、その導入方法をご紹介します。

 

スポンサード リンク


 

パンくずリストを設置するまでの手順

手順としては次の通りです。
  1. プラグインのインストールと有効化
  2. 設置場所にコードを記述
  3. 設定とCSSデザイン
 

1.プラグインのインストール

プラグインは冒頭に出てきたとおり、『Breadcrumb NavXT』を利用します。

インストールは、WordPressにログインし管理画面を開きます。メニューの「プラグイン」の「新規追加」をクリックします。

 



「検索」boxに「Breadcrumb NavXT」を入力し、「プラグインの検索」をクリックします。

 



検索結果が表示されますので、「Breadcrumb NavXT」のいますぐインストールをクリックします。

 



インストールが完了したら、「プラグインの有効化」をクリックします。

 

2.設置場所にコードを記述

プラグイン「Breadcrumb NavXT」のインストールは完了しましたが、この時点ではパンくずリストが表示されていません。表示させるためには、コートの記述が必要です。

管理画面のメニューから、外観のテーマ編集をクリックします。

 



右側の「ヘッダー(header.php)」をクリックします。

そうすると、header.phpファイルが表示されますので、最下部に次のようなコードを記述します。
<div class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>
「ファイルを更新」をクリックします。

これでホームページやサイトにパンくずリストが表示されるようになったはずです。

 

設定とCSSデザイン

このままでも十分なのですが、若干の設定とCSSで手を加えたいと思います。

 



表示されたパンくずリストを見ると、トップページがサイト名になっています。これはデフォルトの設定がサイト名になるようになっているので、これを「ホーム」に変更します。

また、文字の大きさが本文とあまり変わらないので、一見したところでは違いがわかりません。ですから、文字の大きさを小さくし、本文との間隔をもう少し広く取ることにします。

 

サイト名を「ホーム」に変える

WordPress管理画面の設定「Breadcrumb NavXT」をクリックします。

Breadcrumb NavXT設定のタブの一般をクリックし、「ホームページ用テンプレート」のコードの一部を変更します。
<a class="%type%" title="%title%へ行く" href="%link%">ホーム</a>

CSSに追記

管理画面のメニューから、外観のテーマ編集をクリックします。右側のスタイル-スタイルシート(style.css)をクリックします。

style.cssに次のコードを追記します。
.breadcrumbs{
	font-size: 8px;
	margin-bottom: 5px;
}
「ファイルを更新」をクリックします。

 



パンくずリストの文字が小さくなり、行の間隔が広がりました。文字の大きさは間隔の幅は好きに変えられますので、好みのサイズに変更すると良いでしょう。

 

最後に

ホームページやブログなどのサイトを見るユーザーにとって、ユーザビリティは重要な要素です。

それは、同じ内容を扱っているサイトがいくつもあるために、1つのサイトにこだわる必要がないからです。サイトが見やすくなければ、すぐに次のサイトに移っていくというわけです。

使い易いサイト作りの1つとして「パンくずリスト」は有効な小道具です。
この機会に導入を検討してみてはいかがでしょうか。