SEO対策なら株式会社ペコプラ > Webサイト制作 > サイト制作 > 【Breadcrumb NavXT】階層の追加を行うカスタマイズ方法

【Breadcrumb NavXT】階層の追加を行うカスタマイズ方法

Webサイト制作

サイト制作

2021.05.17

WEBサイトのSEO対策としてポピュラー手段であるパンくずリスト。
WordPressでパンくずリストを表示する為によく使われるプラグイン、Breadcrumb NavXT。
自動でWordPressのWEBサイトの構造にあったパンくずリストを生成し表示してくれる便利なプラグインです。
しかし、自動で生成する為、思った通りのパンくずリストが表示されない場合もあります。
今回は、そんな時に自由自在に表示をカスタマイズする方法をご紹介いたします。

1 Breadcrumb NavXTとは
2 投稿種類毎のBreadcrumb NavXTでの表示のされ方
- 2.1 デフォルトの投稿の場合
- 2.2 カスタム投稿
3 Breadcrumb NavXTで用意されているフック
4 生成されたパンくずリスト解説
5 生成されたパンくずリストの値を変更する関数
6 パンくずに新たな階層を追加する方法
- 6.1 階層の一番上に新しい階層を追加する場合
- 6.2 階層の途中に新しい階層を追加する場合
7 まとめ

Breadcrumb NavXTとは

Breadcrumb NavXTは、WordPressで作成されたサイトにパンくずリストを設置する為のプラグインです。
WordPressのWEBサイトの構造をそのままパンくずリストとして出力してくれるので、一度設定をしてしまえば
現在のWEBサイトの状態に応じてパンくずリストを自動で生成し表示してくれます。

▼関連記事

SEO対策に有効な「パンくずリスト」とは

パンくずリストをご存じでしょうか。パンくずリストはSEOに効果的とされており、ぜひサイトを作る際には導入してほしい要素です。ただ…

投稿種類毎のBreadcrumb NavXTでの表示のされ方

Breadcrumb NavXTは、WordPressのWEBサイトの構造にあったパンくずリストを自動で生成してくれます。
この自動生成されるパンくずリストは、デフォルトの投稿とカスタム投稿で以下のような違いがあります。

デフォルトの投稿の場合

投稿の詳細: サイトトップ > 投稿のタイトル
投稿のアーカイブ: サイトトップ

カスタム投稿

カスタム投稿の詳細: サイトトップ > カスタム投稿名 > 投稿のタイトル
カスタム投稿のアーカイブ: サイトトップ > カスタム投稿名

それ以外に、カテゴリやタグの種類毎にテンプレートを設定できます。
アーカイブも、著者アーカイブ、日付アーカイブ、検索アーカイブにそれぞれテンプレートと表示項目が選べます。

この仕様の上であれば、管理画面からの操作でパンくずリストを任意の形に変更出来ます。
しかし、この仕様外のカスタムをしたい場合は専用のカスタマイズが必要になります。
仕様外のカスタムとは以下のような場合です。

パンくずリストの階層を一つ増やす。
デフォルト投稿とカスタム投稿の階層を同じにする。
特定の条件のページのみ階層や表示文字列を変更する。

Breadcrumb NavXTで用意されているフック

Breadcrumb NavXTでパンくずリストをカスタマイズするには用意されたフックを使用する必要があります。
Breadcrumb NavXTのフックは以下の２つになります。

bcn_before_fill: パンくずリスト生成前に動作するフックです。
特定のページのパンくずリスト生成時にのみ設定を変更したい場合等このフックを使用します。
bcn_after_fill: パンくずリスト生成後に動作するフックです。
パンくずの階層や表示を変更する場合等にこちらのフックを使用します。
多くのカスタマイズの場合こちらのフックを使用する事になると思います。

生成されたパンくずリスト解説

前項で解説したフックを利用する際に関数の引数としてオブジェクトが取得出来ます。
こちらのオブジェクトがパンくずリスト生成用の情報が入っているオブジェクトになります。
ですので、このオブジェクトを書き換える事で画面に表示されるパンくずリストが変更されます。
このオブジェクトの中で画面に表示されるパンくずのデータが入っているのは、trailというオブジェクトの中になります。
こちらのオブジェクト1つに付き1つのパンくずリストの階層情報が格納されており配列として複数の階層が保持されています。
この配列の数がパンくずリストの階層の数となり、配列番号の大きい順にパンくずリストとして表示されます。
パンくずの構造説明
trailオブジェクトの中身にはパンくず表示に直接関係する変数があります。

title

パンくずに表示される文字列

templete

パンくずを表示する際の階層のHTMLタグが記載出来ます。
%%で囲んだ変数が使用でき、trailオブジェクトの内容によって出力を切り替えることが出来ます。
よく使われる変数

%htitle%: trailオブジェクトのtitleが出力されます。
%title%: trailオブジェクトのtitleがエスケープされて出力されます。
%link%: trailオブジェクトのurlの値が出力されます。
パンくずにリンクを入れる際に使用されます。
%type%: trailオブジェクトのtypeの値が出力されます。
階層の種類や、現在表示している項目かどうか等スタイルの表示の際にclassで使用されます。
%position%: trailオブジェクトの階層を出力します。

パンくずリストにリンクをつける場合の遷移先

type

階層の種類や、現在表示している項目かどうか、スタイル用の値

生成されたパンくずリストの値を変更する関数

trailオブジェクトの値を書き換えるには関数を利用するか、新規にtrailオブジェクトを生成する必要があります。
trailオブジェクトの値を書き換える関数は以下になります。

set_title: trailオブジェクトのタイトルを書き換えます。
set_url: trailオブジェクトのURLを書き換えます。
set_linked: trailオブジェクトのリンクの有無を書き換えます。(値はtrueかfalse)
set_template: trailオブジェクトのテンプレートHTMLを書き換えます。
add_type: trailオブジェクトのTYPEを追加します。

上記関数で内容を書き換えられますが、既に設定されてしまっているtypeだけは変更出来ない為
typeの内容まで指定しなければならない場合は新規のtrailオブジェクトを作成したほうが良いです。

新規にtrailオブジェクトを生成する場合は以下のように記載します。

$bcnObj->add(new bcn_breadcrumb(設定したいタイトル, null, array('post-clumn-archive'), home_url('post_list/'), null, true));

bcn_breadcrumbの引数

タイトル（文字列）
テンプレート（文字列）
タイプ（配列）
URL（文字列）
ID（文字列）省略するとnull
リンクをつけるかどうか(Boolean)省略するとfalse

パンくずに新たな階層を追加する方法

階層の一番上に新しい階層を追加する場合

階層の一番上に新しい階層を追加する場合、配列の末尾に新規のtrailオブジェクトを生成する事で新しい階層を追加出来ます。
デフォルト投稿のアーカイブページのパンくずリスト　末尾の階層に投稿一覧という文字を出すサンプルコードになります。

function bcn_add($bcnObj) {
	// デフォルト投稿のアーカイブかどうか
	if (is_post_type_archive('post')) {
        	// 新規のtrailオブジェクトを末尾に追加する
		$bcnObj->add(new bcn_breadcrumb('投稿一覧', null, array('archive', 'post-clumn-archive', 'current-item')));
		// trailオブジェクト0とtrailオブジェクト1の中身を入れ替える
		$trail_tmp = clone $bcnObj->trail[1];
		$bcnObj->trail[1] = clone $bcnObj->trail[0];
		$bcnObj->trail[0] = $trail_tmp;
	}
	return $bcnObj;
}
add_action('bcn_after_fill', 'bcn_add');

こちらのコードをfunction.phpに記載する事でパンくずリストは以下の様に変更されます。

サイト名

↓

サイト名 > 投稿一覧

階層の途中に新しい階層を追加する場合

パンくずリストの階層を中間に追加する場合は該当の箇所のtrailオブジェクトをcloneで複製し、該当箇所に新規のtrailオブジェクトを生成する事で新しい階層を追加出来ます。
デフォルト投稿の詳細ページのパンくずリストの間に投稿一覧を出力しリンクを設定するサンプルコードになります。

function bcn_add($bcnObj) {
	// デフォルト投稿の詳細ページかどうか
	if (is_singular('post')) {
		// 新規のtrailオブジェクトを末尾に追加する
		$bcnObj->add(new bcn_breadcrumb('投稿一覧', null, array('post-clumn-archive'), home_url('/post_list'), null, true));
		$trail_tmp = clone $bcnObj->trail[1];
		$bcnObj->trail[1] = clone $bcnObj->trail[0];
		$bcnObj->trail[0] = $trail_tmp;
	}
	return $bcnObj;
}
add_action('bcn_after_fill', 'bcn_add');

こちらのコードをfunction.phpに記載する事でパンくずリストは以下の様に変更されます。

サイト名 > 記事タイトル

↓

サイト名 > 投稿一覧 > 記事タイトル

このコードを応用する事で生成されたパンくずリストを思いのままにカスタマイズする事が出来ます。

まとめ

Breadcrumb NavXTプラグインはプログラムが苦手な方でもWordPressに簡単にパンくずリストを実装する事ができる便利なプラグインです。
しかし、自動的に動作してくれる便利な機能の為、自分の思ったとおりに動作させなければならない場合に困る事もあるでしょう。
今回のカスタマイズ方法を実践する事で、自身の作成するWEBサイトのパンくずがワンランク上のものになるでしょう。
プラグインは使いこなす事でより効果を発揮すると思います。