お問い合わせ

Arkhe カスタマイズ|パンくずリストの構造化データ出力をする

  • URLをコピーしました!

Arkheの無料版では、パンくずリストの構造化データが出力されません。有料テーマでは当たり前の機能なのですが、無料テーマなので仕方ありません。

Arkhe作者がリリースしているSEO SIMPLE PACKというプラグインを導入すれば解決するでしょうか?

いえ、SEO SIMPLE PACKは、パンくずリストの構造化データを出力する機能はありません。

自分でカスタマイズするか、プラグインを追加する必要があります。

Arkheには、有料版のArkhe Tool Kitプラグインがあります。

有料プラグインを追加することで、パンくずリストの構造化データ出力があるのかどうかは存じ上げておりませんが、今回カスタマイズした時にパンくずリストの構造化データ出力周りにテーマの不具合があったので、恐らくないのではないかと思います。

Arkheはパンくずリストの構造化データを出力する直前までの機能がある

パンくずリストの構造化データを出力する機能は、SWELLにすでにある機能ですので、Arkheでも当然実装されています。

しかし、有料プラグインとの組み合わせを想定しているのか、実際にパンくずリストの構造化データを出力するコードはテーマにはありませんでした。

パンくずリストの構造化データを出力するコードを用意する

本来であれば、子テーマが無くてもカスタマイズできる内容なのですが、Arkheのテーマテンプレートパーツに不具合があるので、子テーマで上書きする必要があります。

Arkheのフックで上書きしてもいいのですが、子テーマでやる場合で説明します。

breadcrumb.phpを子テーマで修正

親テーマのtemplate-parts/other/breadcrumb.phpを子テーマにコピーします。

breadcrumb.phpにある『JSON LD用の配列にも追加』という部分をif文の条件分岐によっては通らないのでJSONデータが取得できない不具合があります。

$json_array[] = $data;をif文の外に出します。

コードの一部です。

/**
 * 出力処理
 */
$list_html  = '';
$json_array = array(); // JSON-LD用の配列
$list_data  = apply_filters( 'arkhe_breadcrumbs_data', $list_data );
foreach ( $list_data as $data ) {
	// JSON LD用の配列にも追加
	$json_array[] = $data; //ここに移動

	// urlの有無で処理を分ける
	if ( $data['url'] ) {

		// JSON LD用の配列にも追加
		//$json_array[] = $data;

		$list_html .= '<li class="p-breadcrumb__item">' .
			'<a href="' . esc_url( $data['url'] ) . '" class="p-breadcrumb__text">' .
				'<span>' . esc_html( wp_strip_all_tags( $data['name'] ) ) . '</span>' .
			'</a>' .
		'</li>';

	} else {

		$list_html .= '<li class="p-breadcrumb__item">' .
			'<span class="p-breadcrumb__text u-color-thin">' . esc_html( wp_strip_all_tags( $data['name'] ) ) . '</span>' .
		'</li>';

	}
}

パンくずリストの構造化データを出力するコード

function get_bread_data( $bread_json_data ) {
	if ( empty( $bread_json_data ) ) return [];

	$pos       = 1;
	$item_json = [];
	foreach ( $bread_json_data as $data ) :
	$item_json[] = [
		'@type'    => 'ListItem',
		'position' => $pos,
		'item'     => [
			'@id'  => $data['url'],
			'name' => wp_strip_all_tags( $data['name'] ),
		],
	];
	++$pos;
	endforeach;

	$bread_json = [
		'@type'           => 'BreadcrumbList',
		'@id'             => home_url( '/#breadcrumb' ),
		'itemListElement' => $item_json,
	];

	return $bread_json;
}


function generate($json_lds) {
	if ( ! is_array( $json_lds ) || empty( $json_lds ) ) return '';

	// @graph 使わない書き方
	// $json_ld = wp_json_encode( array_values( $json_lds ), JSON_UNESCAPED_UNICODE );

	// @graph 使う書き方
	$output_lds = [];
	foreach ( $json_lds as $data ) {
		if ( empty( $data ) ) continue;
		$output_lds[] = wp_json_encode( $data, JSON_UNESCAPED_UNICODE );
	}

	if ( empty( $output_lds ) ) return '';

	return '{"@context": "https://schema.org","@graph": [' . implode( ',', $output_lds ) . ']}';
}

add_action('wp_footer',function(){

	$json_lds[] = get_bread_data(\Arkhe::$bread_json_data);
	$ld = generate($json_lds);
	if ( $ld ) {
		echo PHP_EOL . '<!-- JSON-LD @SWELL -->' . PHP_EOL;
		echo '<script type="application/ld+json">' . $ld . '</script>'; // phpcs:ignore WordPress.Security
		echo PHP_EOL . '<!-- / JSON-LD @SWELL -->' . PHP_EOL;
	}
});

参考リソース

パンくずリストの構造化データ出力に対応しているプラグイン

有名なSEOプラグインはほぼ対応していると思います。そう考えるとSEO SIMPLE PACKは惜しいです。

  • All in ONE SEO
  • Yoast SEO
  • RankMath

自前でパンくずリストの構造化データ出力する

まとめ

SWELLにある機能でArkheにはないと思っている機能も、コードを調べるとほとんど使えるところまで実装されているケースがあります。

Arkheの有料プラグインでも対応して無い機能もコードとして存在するものもありますので、いろいろ調べて見ると楽しいと思います。

他の人にもシェアしてね
  • URLをコピーしました!
  • URLをコピーしました!
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次