Arkhe｜パンくずリストの表示をカスタマイズする方法まとめ

2023年3月25日

masu

WordPressテーマのArkheにはパンくずをカスタマイズするフックが用意されており、簡単にカスタマイズすることができます。

今回はフックを使ってパンくずを上書きする方法をご紹介します。

パンくずに投稿一覧を入れるだけであれば、外観＞カスタマイズ＞全体設定＞パンくずリスト設定>その他の「投稿ページ」を表示するにチェックを入れるだけで実装可能です。

投稿詳細ページ

カテゴリー名を投稿一覧に変更するカスタマイズです。functions.phpに追加してください。

変更前：ホーム＞カテゴリー名＞投稿タイトル
変更後：ホーム＞投稿一覧＞投稿タイトル

function my_arkhe_breadcrumbs_data_customize( $data ) {
	$post_type = get_post_type_object(get_post_type());

	if(is_single()) {
		$data[0] = array(
			'url'  => get_post_type_archive_link(get_post_type()),
			'name' => $post_type->labels->name. '一覧',
        );
    }
    return $data;
}
add_filter( 'arkhe_breadcrumbs_data', 'my_arkhe_breadcrumbs_data_customize', 10, 1 );

カテゴリーページ

ホームとカテゴリー名の間に投稿一覧を入れるカスタマイズです。外観＞カスタマイズからも実現可能です。

変更前：ホーム＞カテゴリー名
変更後：ホーム＞投稿一覧＞カテゴリー名

function my_arkhe_breadcrumbs_data_customize( $data ) {
	$wp_obj = get_queried_object();
	$post_type = get_post_type_object(get_post_type());

	if(is_category()) {
		$term_name = $wp_obj->name;
		$data[0] = array(
			'url'  => get_post_type_archive_link(get_post_type()),
			'name' => $post_type->labels->name. '一覧',
        );
		$data[1] = array(
			'url'  => '',
			'name' => $term_name,
        );
	}
    return $data;
}
add_filter( 'arkhe_breadcrumbs_data', 'my_arkhe_breadcrumbs_data_customize', 10, 1 );

月別アーカイブページ

年＞月となっているのを「年月」にまとめ、ホームと年月の間に投稿一覧を入れるカスタマイズです。

変更前：ホーム＞年＞月
変更後：ホーム＞投稿一覧＞年月

function my_arkhe_breadcrumbs_data_customize( $data ) {
	$post_type = get_post_type_object(get_post_type());

	if(is_archive() && is_month()) {
		$y_title = get_the_date( _x( 'Y', 'yearly archives date format' ) );
		$m_title = get_the_date( 'F' );

		$data[0] = array(
			'url'  => get_post_type_archive_link(get_post_type()),
			'name' => $post_type->labels->name. '一覧',
        );
		$data[1] = array(
			'url'  => '',
			'name' => $y_title. $m_title,
		);
	}
    return $data;
}
add_filter( 'arkhe_breadcrumbs_data', 'my_arkhe_breadcrumbs_data_customize', 10, 1 );

Arkheでのパンくずカスタマイズの基本

パンくずリスト用のデータ配列を上書きできるarkhe_breadcrumbs_dataを使用しています。

ポイントはarkhe_breadcrumbs_dataを使用することで配列を上書きできるという点です。

arkhe_breadcrumbs_dataの書き方

基本的な書き方は以下の通りです。

function my_arkhe_breadcrumbs_data_customize( $data ) {
	// 条件分岐で書き換えたいページテンプレートを指定
	if(is_home()) {
		// 書き換えたい配列の番号を指定
		$data[0] = array(
			// 上書き後のurlとnameを指定
			'url'  => 'パンくずのurl',
			'name' => 'パンくずで表示したいテキスト',
		);
	}
	// 変更した$dataを返す
    return $data;
}
add_filter( 'arkhe_breadcrumbs_data', 'my_arkhe_breadcrumbs_data_customize', 10, 1 );

引数として$dataを使用することができます。

この$dataが配列形式でそのページで表示するパンくずのデータを持っています。試しに以下のコードをfunctions.phpに追加して投稿ページをご覧ください。

function my_arkhe_breadcrumbs_data_customize( $data ) {
	var_dump($data);
    return $data;
}
add_filter( 'arkhe_breadcrumbs_data', 'my_arkhe_breadcrumbs_data_customize', 10, 1 );

下記のように$dataの中身がページの上部に表示されるかと思います。このページの配列0番目のurlは空で、nameが「お知らせ一覧」であるということを示しています。

この配列の中身をarkhe_breadcrumbs_dataを使って上書きすることにより、希望通りのパンくずを表示することができます。

上書きの形式

配列の形式で上書きします。$dataの後に上書きしたい配列の番号を指定し、任意のurlとnameを書きます。urlとnameは固定値で書くことができますが、動的に記載しておいた方が保守性が上がります。

$data[0] = array(
	'url'  => 'https://www.yahoo.co.jp/',
	'name' => 'Yahoo',
);