パンくずナビゲーションプラグイン Breadcrumb Navigation XT

Breadcrumb Navigation XT
Breadcrumb Navigation XT

企業ウェブサイト・商用ホームページにはナビゲーションが必須だろう。ヘッダー部分もしくはサイドバー部分に表示されるナビゲーションに加え、今表示しているページが一体どこなのかを表示するパンくずナビゲーションはユーザービリティを高める。パンくずナビゲーションとは、例えば「トップ > カテゴリ > ページ」のようなもので、Yahoo! JAPANや楽天などでも採用されています。ショッピングサイトなどでは階層が深くなることが多いので、このパンくずナビゲーションを導入するとよいだろう。

さて、WordPressでパンくずナビゲーションを実現するには、Breadcrumb Navigation XTというプラグインをインストールする。ダウンロードは、Breadcrumb Navigation XTより行う。2007年9月3日現在、バージョン1.9.3が最新バージョン。インストールはダウンロードしたファイルを展開し、pluginsフォルダにアップロードし、有効化するだけである。

インストールが終了すると、管理メニューの設定欄にBreadcrumb Nav XTが増えているのがわかるだろう。Breadcrumb Navigation XTプラグインの設定には二通りあって、1.この設定メニューを使う方法と、2.ソースコードの中で直接設定する方法である。

Breadcrumb Navigation XTプラグイン設定

1.管理メニューの設定を使用する場合は、index.phpやheader.phpに下記の設定を加える。

CODE:
  1. <div class="breadcrumb">
  2. <?php
  3. if (function_exists('breadcrumb_nav_xt_display'))
  4. {
  5.     // Display the breadcrumb
  6.     breadcrumb_nav_xt_display();
  7. }
  8. ?>
  9. </div>

2.ソースコード内で直接設定する場合は、Mtekk’s Crib » Breadcrumb Navigation XT Documentationを参考にしながら、パンくずナビゲーションを表示したい個所に加える。細かい設定ができるのでプラグインを配布しているサイトのドキュメントを見てほしい。このサイトではsingle.phpに下記のとおり追加している。

CODE:
  1. <p class="breadcrumb">
  2. <?php
  3. // -- Breadcrumb Navigation XT --
  4. if (class_exists(breadcrumb_navigation_xt))
  5. {
  6.     $mybreadcrumb = new breadcrumb_navigation_xt;
  7.     $mybreadcrumb->opt['link_current_item'] = 'true';
  8.     $mybreadcrumb->opt['separator'] = ' » ';
  9.     $mybreadcrumb->opt['singleblogpost_prefix'] = "";
  10.     $mybreadcrumb->opt['title_blog'] = "ホーム";
  11.     $mybreadcrumb->display();
  12. }
  13. ?>
  14. </p>

2通り紹介したが、日本語化はされていないので、若干戸惑うかもしれないが、簡単に設定できてしまうので、ユーザービリティ向上を考えて、パンくずナビゲーションプラグインをぜひ導入してほしい。

[追記] WordPress 2.3に正式対応したバージョン1.10.1が出ている。タグのナビゲーションが作成できるようになったようだ。

このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

« メンテナンス中を表示するプラグイン Maintenance Mode
サイトマップ作成プラグイン Dagon Design Sitemap Generator »