Yoast SEOパンくずリスト出力項目をカスタマイズ【wpseo_breadcrumb_links】

- WordPress -
2023.03.19
WordPress/ワードプレス

Yoast SEOのパンくずリスト表示機能を使ってるけど、デフォルトのままではパンくずリストの出力項目が思い通りにならない...。カスタマイズできないものか?

そんなかたへ向けて。

たとえば、こんな風にパンくずリストを表示したいのに、

ホーム > 会社情報 > 支店一覧 > 〇〇支店

こう↓なってしまうなどがYoast SEOのパンくずあるあるでした("会社情報"が出てない)。

ホーム > 支店一覧 > 〇〇支店

そんなとき、Yoast SEOのwpseo_breadcrumb_linksフィルターフックを使うと思った以上に自由にカスタマイズできたので、カスタマイズ方法をメモしておきます。

日本語で情報があまりなかったので役立てば幸いです。

Yoast SEOパンくずリストの表示カスタマイズ → wpseo_breadcrumb_linksフック

前提として、Yoast SEO公式ドキュメントにある通りに以下パンくずリスト出力コードをheader.php(など)に書いてあり、パンくずリストの表示自体はすでにできていることとします。

PHPif ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}

もしまだパンくずリストの表示できていない場合は、以下手順で表示できるようにしておいてください。

  1. Yoast SEOのインストール・有効化
  2. 上記コードをパンくずリストを表示したいソースコードの位置へコピペ

まず、var_dump でパンくずリスト生成に必要な情報の構造を確認

いきなりパンくずリストの操作は難しいので、まずは「Yoast SEOでパンくずリストがどのように構成されているか?」の情報を把握することから始めます。

functions.phpへ以下をまるっとコピペしてみてください。

functions.phpfunction override_yoast_breadcrumb( $links ) {
    // $linksの構造を確認する
    var_dump( $links );
    return $links;
}
add_filter( 'wpseo_breadcrumb_links', 'override_yoast_breadcrumb' );

その後に「このページでパンくずリストの出力を調整したい」というページにアクセスします。

すると、↑3行目でvar_dumpした変数$linksの中身が以下のようにずらっと表示されます。

この段階ではまだパンくず出力の処理は加えておらず、単純に$linksの中身を把握しただけです。

現在表示されているパンくずリストと見比べながら$linksの中身を眺めてみると、なんとな~くどういう構造でパンくずが成り立っているかを感じ取れるかと思います。

配列0, 1, 2, 3の中身がパンくずリストの最初・2番目・3番目・4番目に対応しているっぽいな

ということが分かれば次から試行錯誤しまくるだけなので、この段階でvar_dumpの結果に圧倒される必要はありません。

$linksの配列を加工して、消したり足したりする

上記の例で、後ろから2つめの「子カテゴリー >>」をパンくずには表示したくない=消したいとします。

その場合、以下3行目で$links配列の4番目(index 3)を削除してしまえばOK。ここではarray_splice()を使っています。

function override_yoast_breadcrumb( $links ) {
    // $links配列の4番目("子カテゴリー"に関するパンくず情報)を削除
    array_splice( $links, 3, 1 );
    var_dump( $links );
    return $links;
}
add_filter( 'wpseo_breadcrumb_links', 'override_yoast_breadcrumb' );

すると、以下のように「子カテゴリ-」がダンプ結果から消えたと同時にパンくずリストからも消えたことが分かります。

Yoast SEOのパンくずリストカスタマイズ

削除だけでなく、例えば以下3, 4行目のように書けば追加することもできます(実際にはあり得ない構造だけど、あくまでも何でも好きなように追加できるよ、という例)。

function override_yoast_breadcrumb( $links ) {
    // $links配列の2番目に'会社情報'を追加
    $add_link[] = array('text' => '会社情報', 'url' => '/company/');
    array_splice( $links, 1, 0, $add_link );
    return $links;
}
add_filter( 'wpseo_breadcrumb_links', 'override_yoast_breadcrumb' );

Yoast SEOのパンくずリストカスタマイズ

アーカイブページを加えたい場合は、以下3, 4行目のように書くと、アーカイブページURLを直書きをせずともよくなります。以下は「投稿」のアーカイブページを加えたい場合(これもあくまでも例)。

function override_yoast_breadcrumb( $links ) {
    // 投稿アーカイブページを2番目に追加
    $add_link[] = array('ptarchive' => 'post');
    array_splice( $links, 1, 0, $add_link );
    return $links;
}
add_filter( 'wpseo_breadcrumb_links', 'override_yoast_breadcrumb' );

"投稿"ではなくカスタム投稿タイプのアーカイブページなら、↑3行目の'post'をカスタム投稿タイプのスラッグに置き換えます。以下はカスタム投稿タイプ"product"の例。

$add_link[] = array('ptarchive' => 'product');

このままだと全てのページのパンくずリストに反映されてしまうので、if分岐で特定のページにのみ表示させることを忘れないようにしてください。

以下は"news"というカスタム投稿タイプのアーカイブページ&個別ページに表示させる例です。

function override_yoast_breadcrumb( $links ) {
    // newsアーカイブページ、news詳細ページでのみ処理
    if (is_post_type_archive( 'news' ) || is_singular( 'news' )) {
        array_splice( $links, 3, 1 );
    }
    return $links;
}
add_filter( 'wpseo_breadcrumb_links', 'override_yoast_breadcrumb' );
↑TOP