WordPress

WordPressでパンくずを表示するプラグインBreadcrumb NavXTの設定と使い方

Breadcrumb_NavXT

WordPressでパンくずを表示するプラグインBreadcrumb NavXTを導入したので設定と使い方を紹介しておきます。

WordPressプラグインBreadcrumb NavXT導入の目的

パンくずといってもよく分からない人もいるかと思いますが、Yahoo!のオークションなどでサイト上部に「オークション > コンピュータ > パソコン > Mac 」こんな感じで表示されているアレです。

Breadcrumb NavXT導入の目的は大きく2つです。

  • 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に入れてみると、こんな感じに表示されています。

WordPress Breadcrumb NavXT

ちなみに上記コードを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にしました。変更なども管理画面でできるので助かります。

ちなみに、こんなのもありましたよ。

Prime Strategy Bread Crumb

コメント

  1. Minako Shoh より:

    パンくずリストを,phpのどこに挿入すれば良いのか素人に分からず苦慮しておりましたが,大変参考になりました。有難うございました。

コメントを残す