WordPressでパンくずを表示するプラグインBreadcrumb NavXTを導入したので設定と使い方を紹介しておきます。
WordPressプラグインBreadcrumb NavXT導入の目的
パンくずといってもよく分からない人もいるかと思いますが、Yahoo!のオークションなどでサイト上部に「オークション > コンピュータ > パソコン > Mac 」こんな感じで表示されているアレです。
Breadcrumb NavXT導入の目的は大きく２つです。
- SEOに有効という噂
- ユーザの使い勝手（ユーザビリティ）の向上
SEOに有効というのもネットを調べている限りでは、サイトの評価が上がるというものと、正しくマークアップすれば検索結果にパンくずが表示され、クリック率が上がる？という側面があるようです。今回は正確なマークアップまではせずに、必要に応じて設定しようと考えています。
以下のブログで詳細設定の方法を記載してくれています。
Breadcrumb NavXTを使ったパンくずリストの構造化マークアップ：SEOmode
まぁ、ユーザが迷いづらくなり、一人あたり閲覧ページ数が上がれば良いなと。
WordPressプラグインBreadcrumb NavXTの設定と使い方
まずは、プラグインのダウンロードと有効化。以下のページからBreadcrumb NavXTをダウンロードできます。
WordPress › Breadcrumb NavXT « WordPress Plugins
左メニュー「設定>Breadcrumb NavXT」でBreadcrumb NavXT設定画面に行けます。今回はデフォルトの設定で利用してみます。
パンくずを表示するには、以下のコードを表示したい場所に入れる。
[php]
<?php if(function_exists(‘bcn_display’)) { bcn_display(); }?>
[/php]
single.phpに入れてみると、こんな感じに表示されています。
ちなみに上記コードをsingle.phpのどこに記載したかと言うと、<div id=”content” role=”main”>の下。以下がデフォルトのsingle.php上部ですが、13行目と15行目の間あたりに挿入。
挿入前（上部抜粋）
[php]
<?php /** * The Template for displaying all single posts. * * @package WordPress * @subpackage Twenty_Eleven * @since Twenty Eleven 1.0 */ get_header(); ?>
<div id="primary">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, ‘single’ ); ?>
[/php]
挿入後（上部抜粋）
[php]
<?php /** * The Template for displaying all single posts. * * @package WordPress * @subpackage Twenty_Eleven * @since Twenty Eleven 1.0 */ get_header(); ?>
<div id="primary">
<div id="content" role="main">
<?php if(function_exists(‘bcn_display’)) { bcn_display(); }?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, ‘single’ ); ?>
[/php]
ですが、CSSなどであとで装飾できるように、そしてせっかくWordPressのデフォルトテーマ、Twenty elevenはHTML5なので、ちょっとだけコードを加筆しました。加筆後のコードはこんな感じ。
[php]
<nav>
<div id="breadcrumbList">
<?php if(function_exists(‘bcn_display’)) { bcn_display(); }?>
</div>
</nav>
[/php]
これで#breadcrumbListでCSSを編集できます。一応、修正後のsingle.phpのコード（上部抜粋）
[php]<?php /** * The Template for displaying all single posts. * * @package WordPress * @subpackage Twenty_Eleven * @since Twenty Eleven 1.0 */ get_header(); ?>
<div id="primary">
<div id="content" role="main">
<nav>
<div id="breadcrumbList">
<?php if(function_exists(‘bcn_display’)) { bcn_display(); }?>
</div>
</nav>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, ‘single’ ); ?>[/php]
他の表示させたいページも<div id=”content” role=”main”>の下あたりに記載するといけそうです。
ざっくりとですが、他の表示させたいページのリストは以下のとおり。
- category.php (カテゴリ一覧)
- Single Post (記事ページ)
- page.php (個別ページ)
- tag.php (タグ一覧ページ)
- search.php (検索結果ページ)
- archive.php (アーカイブ一覧ページ)
- author.php (作成者ページ)
貼ったあとは、ひとつひとつチェックしてください。一部英語表記の部分があるので、管理画面で修正してください。
ついでに、本文と文字サイズが同じというのもアレなので、CSSを簡単に追加。
[css]#breadcrumbList{
font-size:80%;
}
[/css]
WordPressのsearch.phpなどのファイルを加筆した場合、テーマのアップデートをすると全て消えてしまうので、小テーマを利用する、もしくはアップデートする際には忘れずにコピーなどバックアップをとるなど注意が必要です。
WordPressプラグインBreadcrumb NavXTの感想
WordPressでパンくずを表示するプラグインっていくつかあり、ライトなものもあったりするので、お好みで良いと思いますが、将来的にマークアップを正規化することを考えてBreadcrumb NavXTにしました。変更なども管理画面でできるので助かります。
ちなみに、こんなのもありましたよ。