WordPressでパンクズリストを実装する

タロスカイ社内文書共有シリーズです。今回はWordPressでパンクズリストを実装するための方法を紹介します。その前に、パンクズリストとはなんであり、なぜ必要か、ということを説明しましょう。

パンクズリストとは、Webサイトで「現在のページ」を階層構造で表現したものです。テキストベースにすると、ホーム > ブログ一覧 > カテゴリー「技術」 > この記事 のようになります。このユーザーインターフェースによって、ユーザーは現在地を把握してサイトのどこにいるかを瞬時に判断できるようになる、と言われています。Webサイトは必ずしもトップページから閲覧を始めるわけではない（例・検索エンジン経由）ので、こういうインターフェースがあると便利ですよね……という風に私は教わりました。

Amazonのパンクズリスト

で、実際のところこのUIをユーザーがそんなに使っているかというと、ヒートマップなどでクリック率を見ればわかるのですが、そんなに使われていないことが多いです。パンクズリストというUIパーツに対する私の印象は次の通り。

• 基本的にあまり使われない。「Webサイトが構造を持つ」というアイデア自体が専門家やインテリの考え方なので、目にしても意味がすぐにはわからないのでは。
• ECサイト、カタログサイト、データベース型サイトでは、ユーザーが能動的に何かを探しているので、けっこう使われている。
• ニュース・ブログなどでは「意味のあるカテゴリーアーカイブ（例・仮想通貨というカテゴリー）」がある場合、そこに関心が集まる傾向があるが、パンクズは使われないかも？

こう書くと「あってもなくてもいいのなら、なくてもいいのでは？」というメッセージとして受け取ってしまうかもしれませんが、Gooleなどの検索エンジンにとってはこのパンクズリストが提供する構造情報が非常に重要なので、Webサイトを作るなら必ずパンクズリストは実装しましょう。

特に大事なのは構造化データに対応したパンクズリストを作ることです。構造化データに対応しているパンクズはリッチリザルトとしても表示されますし、なにより、検索エンジンが正しくサイトを理解するための手助けになります。

構造化データの対応方法は以下の2種類があります。

• JSON-LD（headタグなどにJSON-LDを書く）
• microdataやRDFaなどを属性として書く

どちらでもよいですが、似たような処理を別々の場所に行うのは面倒なので、後者の方法をとることをお勧めします。

実装が終わったら、リッチリザルトテストツールで確認を忘れないようにしましょう。

WordPressでパンクズリストを実装する方法

WordPressでパンクズリストを表示する方法はたくさんあります。

• SEOプラグイン（Yoastなど）のパンクズリスト機能を使う。
• パンクズ専用プラグインを使う
• テーマについているパンクズ機能を使う（プレミアムテーマには大体ついています）
• 自分で実装する（おすすめしません）

タロスカイでは次のような理由から、パンクズ専用プラグインを使っています。

1. SEOプラグインは多機能すぎる。また、カスタマイズのために知らなければならないことが多すぎる。
2. テーマはクライアントごとに作成する（オリジナルデザイン）がほとんどなので、カスタマイズ方法がわかりやすいものがよい。
3. 自作もしたことはあるが、汎用性を持たせるためには結構面倒＆メンテナンスが大変なので、プラグインを利用することにした。

タロスカイが使っているのは Breadcrumb NavXT です。人気もあり、非常に長いあいだメンテナンスされていることが選定理由です。ブロックにも対応しているので、ブロックテーマであっても大丈夫です。

他のパンクズ専用プラグインとして有名どころはFlexy Breadcrumbなどがありますが、使ったことないです。

パンクズリストをカスタマイズする

プラグインを使えば構造化データの問題はクリアーできており、「普通の構造」であれば見栄えを整えるだけでクリアーです。

では、「普通の構造ではない」ケースのためにカスタマイズする方法を覚えておきましょう。Breadcrumb NavXTはいくつかの出力方法が用意されています。

• クラシックテーマの場合: 専用の関数（bcn_display()）を使う
• ブロックテーマの場合: パンクズブロックを使う
• ショートコード（いまはもう使わない？）

どの方法を使うにせよ、「パンクズとして表示されるリンクのリストをカスタマイズする」が基本方針になります。このカスタマイズ方針はおそらく、SEOの方針できまるでしょう。よくあるのはトピッククラスタの形成でしょうか。

例として『僕のヒーローアカデミア』のようなヒーロー（特殊能力者）がいる世界を想定しましょう。たとえば、あなたがヒーローのデータベースサイトを長く運用してきた結果、特定のアーカイブに需要があることがわかったとします。そうですね……ヒーローの中には磁力と電力を扱うヒーローがいて、このヒーローの力で発電を行う事業がめちゃくちゃ流行った、みたいな想定です。「エレクトリック・ヒーロー」みたいな言葉も流行り始めます。

そこであなたはブロックテーマのテンプレート機能を使って、以下のページをカスタマイズします。

• ヒーローにつけられたタクソノミー「能力」 ability のうち、「電気」「磁力」のテンプレートをカスタマイズする。
• 固定ページで「世界のエネルギー危機を救うエレクトリック・ヒーロー」というページを作る。

このとき、パンクズリストは次のようになってほしいです。

• ヒーロー一覧 > ヒーロー名 👉 エレクトリック・ヒーロー > 電気 > ヒーロー名（ヒーローのシングルページ）
• ヒーロー一覧 > 電気 👉 エレクトリック・ヒーロー > 電気（タクソノミーアーカイブ）

つまり、特定のタームの場合だけ、パンクズリストの構造が変わるわけです。これを実装するのが以下のコード。

add_action( 'bcn_after_fill', function( bcn_breadcrumb_trail $bcn ) {
  $terms = [ 'electricity', 'magnetism' ];
	if ( ! ( is_singular( 'hero' ) && has_term( $terms, 'ability', get_queried_object() ) ) || ! is_tax( 'ability', $terms ) ) {
		// 該当するページではないので、何もしない
		return;
	}
	// カスタマイズした新しいパンクズリストを定義する。
	// $bcn->trailsはbcn_breadcrumbのリスト。
	// 配列のときと表示するときで順序が逆になることに注意。
	$trails = [];
	foreach ( $bcn->trail as $item ) {
		/** @var bcn_breadcrumb $item */
		if ( in_array( 'post-hero-archive', $item->get_types(), true ) ) {
			// これはどちらにもくっつくヒーローのアーカイブ「ヒーロー一覧」なので、置き換える
			if ( is_singular( 'hero' ) ) {
				// シングルページならタクソノミーを追加。bcn_breadcrumbをインスタンス化する
				$terms = get_the_terms( 'ability', get_queried_object() );
				if ( $terms && ! is_wp_error( $terms ) ) {
					foreach ( $terms as $term ) {
						// 引数はラベル、ID、タイプ、リンク、クラス名、リンクするかどうか、だった気がします。
						$trails[] = new bcn_breadcrumb( $term->name, null, [ 'post-hero-archive' ], get_term_link( $term ), 'hero-ability', true );
					}
				}
			}
			// 「エレクトリック・ヒーロー」の固定ページを追加
			$page = get_page_by_path( 'electric-hero' );
			$trails[] = new bcn_breadcrumb( get_the_title( $page ), null, ['electric-hero'], get_permalink( $page ), 'electric-hero', true );
		} else {
			// 既存のパンクズを追加する
			$trails[] = $item;
		}
	}
	// 新しいパンクズを追加
	$bcn->trail = $trails;
} );

上記でパンクズの構造をカスタマイズすることができました。SEO対策をする場合、必要な構造は世の中の需要（＝外部要因）によって変わってしまうので、継続的にメンテナンスしていく必要があります。

そうそう、Breadcrumb NavXTなのですが「構造化データに対応している」と書きましたが、実は書き方が古いようで、そのままだとGoogle Search Consoleでエラーになります。このGistのように、出力を修正する必要があることを忘れずに。この問題、なにやら修正する予定がなさそうなので、困っちゃいますね。

なにはともあれ、パンクズリストはWebサイトに必ず実装するにも関わらず自分で作ると結構めんどくさいので、やり方をきめておきましょう。