パンくずを操作してみよう – Snow Monkey カスタマイズ

Snow Monkey は、プラグインで簡単にパンくずをカスタマイズできるようになっている為、自由にパンくずの構造を書き換える事が可能になっています。
本記事は、パンくずの操作について解説します。

パンくずって何だろう?

ブリエ

ウェブサイトで言っているパンくずって何なんだろう?何でパンくずって言うんだろう?

テネーブル

ウェブサイトで言っているパンくずとは、ページへの道しるべのことです。トップページ(ホームページ)から、現在アクセスされているページまでをリストや階層などで表示したものを、特にそう呼んでいます。何故、パンくずと呼ばれるようになったのかについては、グリム童話である「ヘンゼルとグレーテル」が語源になっているからです。

ヘンゼルは小石の代わりに弁当として与えられたパンをポケットの中で粉々に砕き、道しるべとして道々落としていった。

ヘンゼルとグレーテル – Wikipedia
ブリエ

でも、ヘンデルとグレーテルのパンくずって…目印として役に立たなかったような話ですよね?

ヘンゼルは目印となるはずのパンのかけらを探したが、パンのかけらは森の何千もの鳥がついばんでしまったため、見つけることができなかった。
ヘンゼルとグレーテルは野いちごで飢えをしのぎながら3日間森の中をさまよった。

ヘンゼルとグレーテル – Wikipedia
テネーブル

それを言われると…そうなんですよね。

ウェブサイトでは元々「ナビゲーションルート( Navigation Root )」「トピックパス( topic path )」「パンくずリスト( breadcrumb list )」と言う形で、どんどん名称が変わりながら自然と定着した語です。

現在は単純に「パンくず(breadcrumb)」と呼ばれていますね。

ルミェール

本記事のページを例にすると、記事上部の

ホーム > 記事 > パンくずを操作してみよう – Snow Monkey カスタマイズ

と書かれている部分が、パンくずだよ。

Snow Monkey の場合、パンくずの操作もフック

テネーブル

パンくずの操作もフックで行えます。
パンくずを操作する為に、Snow Monkeyのテーマにある独自フックである snow_monkey_breadcrumbs が、パンくずを操作するためのフィルターフックになります。

試しに次のように「My Snow Monkey プラグイン」などにコードを記述して、パンくずの表示を確認してみてください。

add_filter(
  'snow_monkey_breadcrumbs',
  function( $items ) {
    print_r( $items );
    return $items;
  }
);
テネーブル

コードの記述後にページを読み込むと、print_r 関数を用いている為、パンくずを表示する部分に $items 配列の詳細も表示されます。次に例を表示してみました。

Array (
[0] => Array (
[title] => ホーム
[link] => http://not-wiz.net/
)
[1] => Array (
[title] => 記事
[link] => https://not-wiz.net/articles/
)
[2] => Array (
[title] => パンくずを操作してみよう – Snow Monkey カスタマイズ
[link] => https://not-wiz.net/articles/snow-monkey/breadcrumb-customize/
)
)

テネーブル

$itemsの詳細は、titlelink の要素が定義された連想配列の配列になっています。title は、パンくずに表示される要素のタイトルになっており、link は、パンくずの要素のリンク先 URL になっています。

テネーブル

パンくずに表示される各要素は return で返却する連想配列です。パンくずは、返却値を基に表示されますので、通常の配列操作同様に、要素の追加や削除、並び替えを行うことで変更できます。カスタマイズは配列操作だけなんです。簡単ですよね。

まとめ:操作サンプル例

記事一覧ページの「○○」を「○○の書いた記事」にする

add_filter(
	'snow_monkey_breadcrumbs',
	function( $items ) {
		if ( is_author() ) {
			$items[ count( $items ) - 1 ] = [
				'link' => $items[ count( $items ) - 1 ]['link'],
				'title' => sprintf( '%1$sの書いた記事', get_the_author_meta( 'display_name', get_query_var( 'author' ) ) ),
			];
		}
		return $items;
	},
	10,
	1
);
ルミェール

is_author() は、投稿者アーカイブページが表示されているかどうかをチェックする WordPress の関数だよ。投稿者アーカイブページの場合に最後の要素の title を書き換える事で表示を変更しているんだ。

get_the_author_meta 関数は、管理者などの情報を取得する関数。この場合は display_name で表示する名前を取得しているよ!

カテゴリー要素を消して「ホーム > 記事 > 記事タイトル」にする

add_filter(
	'snow_monkey_breadcrumbs',
	function( $items ) {
		global $post;
		if ( is_single() || is_page() ) {
			if ( get_post_type( $post ) === 'post' ) {
				// 新しい要素を追加
				$new_item = [
					[
						'link' => 'パーマリンクURLの/以降の部分を設定',
						'title' => '記事'
					]
				];
				array_splice( $items, 1, 0, $new_item );
				// 元から存在しているカテゴリー要素の削除
				array_splice( $items, 2, 1 );
			}
		}
		return $items;
	},
	10,
	1
);
ケミ

この例では、要素をそのまま書き換えてもできますが、array_splice 関数を使うことで要素間に新しい要素を追加したり、既存の要素を削除したり…要素を自由に切り替えできることのご紹介として、意図的にこう言う書き方をしています。

様々な記述方法がありますので、是非、パンくずをカスタマイズすることで閲覧者を確実に導くことにも挑戦してみてください(笑)

この記事の筆者

Kmix39(ケミ)

電子の妖精。当ウェブサイトの記事制作などを行なっています。
金融・不動産・医療・教育などの数々の業種のシステム開発を経験を積み、スマートフォンアプリケーションと WordPress などのウェブアプリケーションを日々勉強中。