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

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

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

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

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

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

Breadcrumb NavXTのインストール

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

Breadcrumb NavXTの設定方法

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

Breadcrumb NavXTの設定画面は

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

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

一般

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

現在の項目

現在の項目にリンク: 現在のページのタイトルにリンクを設置する

分割ページパンくず: 分割ページの場合、パンくずリストの最後尾にページ数を表示する

分割ページテンプレート: パンくずリストに分割ページが表示される際のソースを記入する

ホームページパンくず

ホームページパンくず: パンくずリストにホームページを含める

ホームページテンプレート: パンくずリストにホームページを表示する際のソースを記入する

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

ブログを示すパンくず

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

ブログを示すパンくず: ブログ(上画像の「投稿ページ」)をパンくずリストに含める

ブログ用テンプレート: パンくずリストにブログを表示する際のソースを記入する

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

メインサイトのパンくず

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

メインサイトのパンくず: マルチサイトとして運用する場合、親サイトのホームをパンくずリストに含める

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

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

投稿タイプ

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

投稿

投稿テンプレート: パンくずリストに投稿(シングルページ)を表示する際のソースを記入する

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

投稿階層表示: 投稿(シングルページ)を階層化して表示させる

投稿階層表示におけるリファラーページの考慮: ユーザーがどのページを経由してきたかを考慮してパンくずリストを生成する。たとえばユーザーが月別アーカイブページを経由して投稿(シングルページ)にたどり着いた場合、パンくずには日付が表示される。

投稿階層: パンくずリストに階層を表示する場合に基準とするものを選択

固定ページ

ページテンプレート: パンくずリストに固定ページを表示する際のソースを記入する

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

添付ファイル

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

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

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

添付ファイルテンプレート: パンくずリストに添付ファイルのページを表示する際のソースを記入する

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

タクソノミー

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

投稿フォーマット

投稿フォーマットはWordPress 3.1から導入された機能で、投稿(シングルページ)の表示をカスタマイズする際に使用します。

すべてのWordPressテーマで対応しているわけではないので、お使いのテーマが対応していなければ特に設定する必要はありません。

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

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

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

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

その他

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

投稿者アーカイブ

投稿者テンプレート: パンくずリストに投稿者を表示する際のソースを記入する

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

投稿者表示フォーマット

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

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

その他

日付テンプレート: パンくずリストに日付が表示される際(＝「投稿タイプ」タブの「投稿階層」で「日付」を指定した場合)のソースを記入する

日付テンプレート (リンクなし): パンくずリストに日付がリンクなしの状態で表示される際のソースを記入する

検索テンプレート: パンくずリストに検索ワードを表示する際のソースを記入する

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

404 タイトル: 下の「404テンプレート」の「%htitle%」に入る文字列を指定する

404テンプレート: 404ページでパンくずリストを表示する際のソースを記入する

非推奨

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

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

Breadcrumb NavXTの設定は完了しましたが、実はこれだけではWordPressサイトにパンくずリストは表示されません。

パンくずリストを表示するためには、WordPressテーマにパンくずを呼び出すためのコードを記入する必要があります。

パンくずリストは通常、ヘッダーのあたりに表示することが多いかと思います。

ここでもヘッダーのタイトル下に表示するため、header.phpの該当する箇所に下記のコードを記入します。

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

header.php

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

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

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

次に、上でご紹介した非推奨の機能であるタイトル文字数制限をCSSで制御する方法をご紹介します。

Breadcrumb NavXTの設定の各テンプレートの項で入力したソースにもよりますが、下記のソースのようにスタイルを指定すれば、タイトルが一定の長さ以上の場合は、それ以降を非表示にできます。

CSS

.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より大きくなった場合にはその部分を非表示にして、末尾に「…」を表示しています。

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

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

CSS

.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で安心して使える点もいいですね。

JOURNAL クリエイティブとマーケティングの話