できる!Snow Monkey カスタマイズ – パンくず操作編

この記事は、不定期連載「できる!Snow Monkey カスタマイズ 」の第4回目です。

今回の記事のテーマ

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

パンくずの構造操作をプラグインでします

My Snow Monkeyプラグインを使用してパンくずの構造を細かく設定する方法を解説します。前回(第3回)の記事までの続きではなく、今回はsnow_monkey_breadcrumbsフックを使用した単独でカスタマイズ可能なフックを使用しています。

パンくずって何だろう?

ルミェール

パンくずって言っているけど、Webサイトで言うパンくずって何なんだろう?何でパンくずって言うの?

ルミェール(アイコン05)
テネーブル

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

テネーブル(アイコン01)

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

ヘンゼルとグレーテル – Wikipedia
ルミェール

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

ルミェール(アイコン05)

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

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

それを言われると…そうですね。
Webサイトでは元々「ナビゲーションルート(Navigation Root)」「トピックパス(topic path)」「パンくずリスト(breadcrumb list)」と言う形でどんどん名称が変わりながら、自然と定着した語です。現在は単純に「パンくず(breadcrumb)」と呼ばれています。

テネーブル(アイコン04)
テネーブル

この記事ページを例にしますと、記事上部の

ホーム > 記事 > できる!Snow Monkey カスタマイズ – パンくず操作編

と書かれている部分がパンくずです。

テネーブル(アイコン01)

パンくずを操作してみよう

プラグインでパンくず操作を行う方法

パンくずの操作を体験する為に、テスト環境でMy Snow Monkeyプラグインに練習用のコードを書いてみましょう。

まずは、パンくずを操作する為に、Snow Monkeyテーマフックであるsnow_monkey_breadcrumbsのフック処理を定義しましょう。

add_filter(
  'snow_monkey_breadcrumbs',
  function( $items ) {
    print_r( $items );
    return $items;
  }
);

と記述を加えます。

テネーブル

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

テネーブル(アイコン01)
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/it-can-customize-004/
  )
)
ルミェール

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

ルミェール(アイコン01)
テネーブル

パンくずに表示される各要素は連想配列ですので、その要素を配列操作と同様の処理を行えば変更が可能です。
また、順番に関しましても、配列操作で追加や削除、並び替えを行う事で変更できますね!

そうした変更結果をreturnで返却を行う事で、パンくずがカスタマイズできます。

テネーブル(アイコン03)

いくつかの操作サンプル例をご紹介

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

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()は投稿者アーカイブページが表示されているかどうかをチェックする関数。投稿者アーカイブページの場合に最後の要素のtitleを書き換える事で表示を変更しているよ!get_the_author_meta関数は管理者などの情報を取得する関数。この場合はdisplay_nameで表示する名前を取得しているよ!

ルミェール(アイコン01)

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

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関数を使う事で要素間に新しい要素を追加したり、既存の要素を削除したり…要素を自由に切り替え出来る!
色々試してみよう!

ルミェール(アイコン01)

第4回の記事に向けて

記事アンケート(第4回に向けて)

回答いただき、ありがとうございました!
回答結果は、次回の記事制作の参考にさせていただきます。

このアンケートは終了しました。