WordPressに【Breadcrumb NavXT】を導入してパンくずリストを表示

この記事の所要時間: 323

どうも、Noodle.(@Noodle1002)です。今回は久々にWordpressネタなどを。記事数はそんなに多くないのに、記事カテゴリーが色々と増えてきました。Wordpressはデフォルトだと、記事カテゴリーが下部に表示される形となるのですが、視覚的にどの階層に自分がいるのか分かり辛いというデメリットがあります。ということで、一般的なサイトやブログであれば必ずある「パンくずリスト」という機能を導入し、ユーザビリティを向上させようというのが今回のお題。

そもそも“パンくずリスト”って何よ

パンくずリストっていう名前の由来は童話「ヘンゼルとグレーテル」のとある場面から名付けられています。森で兄弟が、パンをちぎって通り道に少しずつ撒いて迷わないように進んだというところ、皆さんもよくご存知でしょう。このヘンゼルとグレーテルのパンくずのように、WEBサイト内で自分のいるページの場所を表す物が、このパンくずリストと呼ばれるものです。英語ではBreadcrumbsと言うみたいですね。

百聞は一見にしかず、どういうものか以下のキャプチャ画像をご覧ください。

パンくずリスト

WEBページの上の方に必ずと言っていいほど表示されています。

これがパンくずリストです。今トップページから何処の階層のページを見ているのか、WEBページのカテゴリは何なのか、一目ですぐに分かりますね。サイトナビゲーションとしては必須の機能なので、Wordpressといえどもサクッと導入してしまいましょう。

パンくずリストを導入できるプラグインBreadcrumb NavXT

今回はBreadcrumb NavXTというプラグインの力を借りて、Wordpressにパンくずリストを表示させます。プラグインのダウンロードは以下のサイトより可能です。

ダウンロードはこちら:Breadcrumb NavXT

もちろんWordpressのダッシュボードからプラグインを検索して、簡単にインストールする事も可能です。このくだり久しぶりだな。ちなみに今回のプラグインは導入するだけではパンくずリストを表示させる事はできません。表示させたい位置にソースコードを入力する必要があります。

<div class=&quot;breadcrumb&quot;>
<?php
if(function_exists(‘bcn_display’))
{
bcn_display();
}
?>
</div>

上記のソースコードをWordpressテーマの表示させたい位置へ挿入すればいいんですが、大体はテンプレートフォルダ内にある「header.php」という部分に追記します。ちなみにこれはサイトヘッダー部分の形を決める為の重要な箇所です。コードの追記には最新の注意を払いましょう。

パンくずリスト表示用ソースコード

ヘッダー部分にソースコードを追記。

コードの記述が間違ってなければ無事パンくずリストが表示されます。おめでとうございます。なおこのプラグインもパンくずリストの設定を色々と変更する事ができます。が、私はデフォルトのまま使っておりますので割愛(というか分からない)。これでユーザビリティの向上につながるパンくずリストを導入する事ができました。今まではプラグインをインストールすれば簡単に機能を追加できていましたが、今回のBreadcrumb NavXTはソースコードの追記・テンプレートの修正という作業が入ってきます。でもそんな少しの手間で導入できるパンくずリスト、WEBサイトやブログには必須の機能ですから是非導入しておきたいところです。

それでは、これにて。


コメントを残す