DAINASHI YESTERDAY

2016.08.18

Breadcrumb NavXTの設定と非推奨の機能をCSSで解決する方法

BreadcrumbNavXT

パンくずリストの設置は、ユーザビリティーの面でもSEOの面でもよいとされています。

パンくずリストとは、サイトを訪問したユーザーに、自分が今見ているページがどんなカテゴリー・階層に属しているかを示すためのリンクです。

ユーザーはパンくずリストを見ることで一目で自分の現在位置を把握でき、同じカテゴリーの他のページへの移動もスムーズにできるため、回遊率向上につながります。

またパンくずリストはクローラーの巡回を助けたり、内部SEO対策にもなると言われていますので、是非ともサイトに設置しておきたい要素です。

ここでは、WordPressサイトに簡単にパンくずリストを設置できるプラグイン『Breadcrumb NavXT』の設定方法についてご紹介します。

Breadcrumb NavXTのインストール

WordPressのダッシュボートにて「プラグイン」→「新規追加」、またはプラグインページからダウンロードするなどしてBreadcrumb NavXTをインストール&有効化してください。

BreadcrumbNavXT_01

Breadcrumb NavXTプラグインページ
BreadcrumbNavXT_00

Breadcrumb NavXTの設定方法

インストールできたら、WordPressダッシュボードから「設定」→「Breadcrumb NavXT」でBreadcrumb NavXTの設定画面に入ります。

Breadcrumb NavXTの設定画面は

  • 一般
  • 投稿タイプ
  • タクソノミー
  • その他

の4つのタブに分かれていますので、以下を見ながら、お好みに合わせて設定してみてください。

一般

BreadcrumbNavXT_03

一般

パンくずの区切り
ページタイトルとページタイトルの間に表示される区切りの文字

現在の項目

現在の項目にリンク
現在のページのタイトルにリンクを設置する
分割ページパンくず
分割ページの場合、パンくずリストの最後尾にページ数を表示する
分割ページテンプレート
パンくずリストに分割ページが表示される際のソースを記入する

ホームページパンくず

BreadcrumbNavXT_04

ホームページパンくず
パンくずリストにホームページを含める
ホームページテンプレート
パンくずリストにホームページを表示する際のソースを記入する
ホームページテンプレート (リンクなし)
パンくずリストにホームページをリンクなしの状態で表示する際のソースを記入する

ブログを示すパンくず

BreadcrumbNavXT_05

WordPressダッシュボードの「設定」→「表示設定」にてフロントページに固定ページを指定した場合に有効となる設定です。

BreadcrumbNavXT_19

ブログを示すパンくず
ブログ(上画像の「投稿ページ」)をパンくずリストに含める
ブログ用テンプレート
パンくずリストにブログを表示する際のソースを記入する
ブログテンプレート (リンクなし)
パンくずリストにブログをリンクなしの状態で表示する際のソースを記入する

メインサイトのパンくず

BreadcrumbNavXT_06

WordPressをマルチサイトとして運用する場合に有効となる設定です。

メインサイトのパンくず
マルチサイトとして運用する場合、親サイトのホームをパンくずリストに含める
メインサイトのホームページテンプレート
マルチサイトとして運用する場合、親サイトのホームをパンくずリストに表示する際のソースを記入する
メインサイトホームテンプレート (リンクなし)
マルチサイトとして運用する場合、親サイトのホームをリンクなしの状態で表示する際のソースを記入する

投稿タイプ

投稿、固定ページ、添付ファイルなどの投稿タイプのパンくずについての設定です。カスタム投稿タイプを使用している場合は、こちらに設定項目が追加されます。

投稿

BreadcrumbNavXT_08

投稿テンプレート
パンくずリストに投稿(シングルページ)を表示する際のソースを記入する
投稿テンプレート (リンクなし)
パンくずリストに投稿(シングルページ)をリンクなしの状態で表示する際のソースを記入する
投稿階層表示
投稿(シングルページ)を階層化して表示させる
投稿階層表示におけるリファラーページの考慮
ユーザーがどのページを経由してきたかを考慮してパンくずリストを生成する。たとえばユーザーが月別アーカイブページを経由して投稿(シングルページ)にたどり着いた場合、パンくずには日付が表示される。
投稿階層
パンくずリストに階層を表示する場合に基準とするものを選択

固定ページ

BreadcrumbNavXT_09

ページテンプレート
パンくずリストに固定ページを表示する際のソースを記入する
ページテンプレート (リンクなし)
パンくずリストに固定ページをリンクなしの状態で表示する際のソースを記入する

添付ファイル

BreadcrumbNavXT_10

WordPressでは画像などのファイルをアップロードすると、そのファイルを表示するためのページが生成されます。

投稿でメディアを挿入する際に、「リンク先」という項目に「添付ファイルのページ」というのがあります。どんなページかピンとこない場合は、「メディアを挿入」から実際にリンクして確認してみてください。

BreadcrumbNavXT_20

ここでは、その添付ファイルのページを表示するときのパンくずリストの設定をします。

添付ファイルテンプレート
パンくずリストに添付ファイルのページを表示する際のソースを記入する
添付ファイルテンプレート (リンクなし)
パンくずリストに添付ファイルのページをリンクなしの状態で表示する際のソースを記入する

タクソノミー

カテゴリー、タグ、投稿フォーマットにパンくずリストを表示する際の設定をします。

カテゴリー

BreadcrumbNavXT_11

カテゴリーテンプレート
パンくずリストにカテゴリーを表示する際のソースを記入する
カテゴリーテンプレート (リンクなし)
パンくずリストにカテゴリーをリンクなしの状態で表示する際のソースを記入する

タグ

BreadcrumbNavXT_12

タグテンプレート
パンくずリストにタグを表示する際のソースを記入する
タグテンプレート (リンクなし)
パンくずリストにタグをリンクなしの状態で表示する際のソースを記入する

投稿フォーマット

BreadcrumbNavXT_13

投稿フォーマットはWordPress 3.1から導入された機能で、投稿(シングルページ)の表示をカスタマイズする際に使用します。すべてのWordPressテーマで対応しているわけではないので、お使いのテーマが対応していなければ特に設定する必要はありません。

お使いのテーマが対応しているかは、投稿編集画面にて確認することができます。

BreadcrumbNavXT_18

参考ページ:投稿フォーマット – WordPress Codex 日本語版

投稿フォーマットテンプレート
パンくずリストに投稿フォーマットを利用した投稿(シングルページ)を表示する際のソースを記入する
投稿フォーマットテンプレート (リンクなし)
パンくずリストに投稿フォーマットを利用した投稿(シングルページ)をリンクなしの状態で表示する際のソースを記入する

その他

投稿者別アーカイブページ、日付、サイト内検索結果ページ、404ページにパンくずリストを表示する際の設定をします。

投稿者アーカイブ

BreadcrumbNavXT_14

投稿者テンプレート
パンくずリストに投稿者を表示する際のソースを記入する
投稿者テンプレート (リンクなし)
パンくずリストに投稿者をリンクなしの状態で表示する際のソースを記入する
投稿者表示フォーマット

投稿者名を表示する場合、どのような形式で表示するかを指定します。

  • display_name……ユーザープロフィールの「ブログ上の表示名」
  • nick_name……ユーザープロフィールの「ニックネーム」
  • first_name……ユーザープロフィールの「名」
  • last_name……ユーザープロフィールの「姓」

その他

BreadcrumbNavXT_15-2

日付テンプレート
パンくずリストに日付が表示される際(=「投稿タイプ」タブの「投稿階層」で「日付」を指定した場合)のソースを記入する
日付テンプレート (リンクなし)
パンくずリストに日付がリンクなしの状態で表示される際のソースを記入する
検索テンプレート
パンくずリストに検索ワードを表示する際のソースを記入する
検索テンプレート (リンクなし)
パンくずリストに検索ワードをリンクなしの状態で表示する際のソースを記入する
404 タイトル
下の「404テンプレート」の「%htitle%」に入る文字列を指定する
404テンプレート
404ページでパンくずリストを表示する際のソースを記入する

非推奨

BreadcrumbNavXT_17

タイトルの長さ
非推奨の機能です。ここでタイトル文字数の制限を設定すると不具合が起きることがあるので、文字数を制限したい場合は後ほど紹介するCSSで制御する方法を使ってください。

WordPressサイトにパンくずリストを表示させる

Breadcrumb NavXTの設定は完了しましたが、実はこれだけではWordPressサイトにパンくずリストは表示されません。パンくずリストを表示するためには、WordPressテーマにパンくずを呼び出すためのコードを記入する必要があります。

パンくずリストは通常、ヘッダーのあたりに表示することが多いかと思います。ここでもヘッダーのタイトル下に表示するため、header.phpの該当する箇所に下記のコードを記入します。

※パンくずリストを表示させるためのコードを記入する箇所は、お使いのテーマや表示させたい場所によって異なります。

<div class="breadcrumbs">
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>

BreadcrumbNavXT_02

これで、WordPressサイトにパンくずリストを表示させることができました。あとはお使いのテーマに合わせてスタイルなどを調整してみてください。

非推奨の文字数制限をCSSで解決する

次に、上でご紹介した非推奨の機能であるタイトル文字数制限をCSSで制御する方法をご紹介します。Breadcrumb NavXTの設定の各テンプレートの項で入力したソースにもよりますが、下記のソースのようにスタイルを指定すれば、タイトルが一定の長さ以上の場合は、それ以降を非表示にできます。(デフォルトの場合は以下のスタイル指定で大丈夫です。)

.breadcrumbs span[property="name"] {
display: inline-block;
padding: 0;
margin-top: -3px;
vertical-align: middle;
max-width: 60px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

上記のCSSでは、タイトルの幅が60pxより大きくなった場合にはその部分を非表示にして、末尾に「…」を表示しています。

しかしこのままだと、タイトルが長い場合には全文表示できず(当たり前ですが)、ユーザーに何について書かれているのか伝わりづらい場合があります。

そのため、マウスホバー時にはタイトルを全文表示させるように指定してみます。

.breadcrumbs span[property="name"]:hover {
max-width: none;
}

マウスホバー時には max-width の指定を解除して、タイトルが全文表示されるようになりました。

参考ページ:Trimming Breadcrumb Title Lengths With CSS | mtekk's Crib

おまけ:パンくずリストをテンプレートファイルにする

パンくずリストをテンプレートファイルにしておいて、別のテンプレートファイルから呼び出せるようにしておくと便利です。

たとえば header.php が複数あり、なおかつそのすべてにパンくずリストを表示する場合、パンくずリストを修正したいときにはすべての header.php のパンくずリストの部分を修正する必要があります。

そんなとき、パンくずリストの部分を外部テンプレートファイル化しておけば、そのファイルのみを修正すれば済みます。

パンくずリストをテンプレートファイルにする方法

まず、パンくずリスト用のテンプレートファイルを作成します。ここでは例として breadcrumbs.php というファイルを作成してみます。

breadcrumbs.php に、header.php に書かれているパンくずリストのコードをそのまま移植します。

breadcrumbs.php

<?php
/*
Template Name: パンくずリスト
*/
?>
<div id="breadcrumbs">
<div class="breadcrumbs_inner">
<?php
if( function_exists('bcn_display') ):
bcn_display();
endif;
?>
</div><!-- .breadcrumbs_inner -->
</div><!-- #breadcrumbs -->

次に、header.php のパンくずリストのコードがあった箇所に下記を記入します。

header.php

<?php get_template_part( 'breadcrumbs' ); ?>

これで、パンくずリストの別テンプレートファイル化が完了しました。今後パンくずリストを修正したい場合は、breadcrumbs.php のみを修正すれば大丈夫です。

まとめ

Breadcrumb NavXTは詳細な設定もでき、パンくずリストとして読み込むテンプレートもかなり融通が効くので、サイトの雰囲気を崩さずにパンくずリストを導入するにはオススメのプラグインです。

また頻繁にアップデートもされていますので、最新のWordPressで安心して使える点もいいですね。作成者の方のサイトにて、より詳細な設定方法やカスタマイズ方法なども紹介されていますので、興味あったら見てみてください。

投稿者: