今週のWordPressの社内勉強会では、WordPressのフルサイトエディッティング（FSE）における階層ナビゲーション、俗に言う「パンくずリスト」の話をしました。

FSEとパンくずリスト

バージョン6.6.2の時点では、WordPressが公式で提供しているブロックに「パンくずリスト」はありません。パンくずリストをブロックテーマ向けに自作しようとすると工数がかかるので、サイトで必要になった場合は第三者が提供しているプラグインを検討することになります。

ありがたいことに著名なものはフルサイトエディッティングに対応しています。プラグインをインストールすると追加されるブロックを任意のテンプレートに配置するだけで機能します。

私個人は、パンくずリストプラグインは「Breadcrumb NavXT」か「Yoast SEO」の二択かなと思っています。細かい違いは以下に書きますが、単に設置するだけであればどちらでもよいです。

Breadcrumb NavXT

「Breadcrumb Navigation XT」プラグインの後継にあたります。旧版と変わらず詳細なカスタマイズができるだけでなく、各種フックが用意されているので、一般的なパンくずリストのデザインではないときにはこちらを選ぶことになります。

構造化データはspan要素に属性値での埋め込みとなります。ブロックテーマでのテンプレート編集画面では、構造化データを埋め込むか、埋め込む場合はどの文書形式を使用するのか等のオプションがあります。

Yoast SEO

SEOプラグインとして知られていますが、パンくずリストブロックを提供する機能もあります。既にYoast SEOを導入していればこちらにするとプラグインを節約できます。

SEOがメイン機能なだけあって構造化データはパンくずの有無に関係なくhead内に書き出されます。その分ぱんくずのHTMLがすっきりしています。

サブ機能なので設定画面の場所がややわかりにくいです。Yoast SEOの「詳細」メニューを展開して「パンくずリスト」を選択すると移動できます。パンくずリストのHTMLはすっきりしすぎていて、属性なしのspan要素となっているためCSSでの調整がしんどいです。

勉強会で話さなかったこと

勉強会では、先述の2つのプラグインと違いについて、画面共有で設置するところまで見せて説明しましたが、話さなかったことがあります。

それは「今のWebデザインで、パンくずリストって必要なの？」という私個人の疑問です。

WordPressは公式でのパンくずリストブロックを提供していません。そもそも公式テーマがブロックテーマではなかった頃から、パンくずはありませんでした。機能的に提供しづらいというのもあると思いますが「WordPressで作成するサイトの規模や方向性では、必要ない場合が多いから、対応しない」のだと推測します。

そもそもスマートフォンではパンくずリストは激しく使いづらいですし、本文の前に表示すると高さの分だけ本文がファーストビューから遠くなります。SEOプラグインなどを利用して構造化データをheadに埋め込めば、HTMLにおいてパンくずリストは必須ではありません。

冒頭のパンくずリストを設置したイメージでは、3層のページがあります。ですが、パンくずが4階層になって嬉しい状況はほとんどないはずです。ブログの記事などで途中の階層を年別アーカイブにすることもありましたが、近年のSEOではアーカイブをクロールさせない傾向があります。

学術系、省庁関係のサイトであれば階層が深くなるケースはありますが、本文の下に同じ傾向のページをおすすめとして表示してあげる方がわかりやすく、やはり必要な状況が考えにくいです。

パンくずリストは高度なナビゲーションの提供ができなかったPCサイト時代に作られたものであって、デザイナー・ディレクターはサイト構成を考えるときに慣習的にパンくずリストを入れるのをやめなければいけないのです。クライアントが「いいから入れてくれ」と言ったとしたら上記の説明をしたうえで、それでも必要なのですか、というディスカッションをせねばならないのです。

PHPを書いてなんとかしてた時代は終わった

私も10年くらい前までは、できるだけプラグインを使用せず、functions.phpにコードを書いて解決していた時期がありました。ですがGutenbergが実装され、FSEに本格的に移行したことで、だいぶ考えが変わってきています。年齢的、立場的に無茶ができなくなったというのもありますが。

とにかく、PHPを書いてなんとかしてた時代は終わったようです。プラグインも闇雲に入れるのではなく、必要なのかを考えなくてはいけないと思います。