Wordpressのプラグイン「Yoast SEO」のパンくずリストをBootstrap仕様に変更 | ポータルサイトHack

2020/7/21

WordPressのSEOプラグインで定番の「Yoast SEO」ですが、うれしいことにパンくずリストも自動生成してくれます。

区切り線なども設定できるのですが、デザインを整えるとなるとスタイルシートで編集する必要がでてきます。
またよく利用するフレームワークがあればそちらに合わせた形で出力したいという考えも自然とわいてきます。

そこで今回は Yoast SEO のパンくずリストをフレームワークの定番であるBootstrap仕様にカスタマイズしてみようと思います。

Yoast SEOの追加はお済ですか？

何はともあれYoast SEOが追加されていないと話になりません。
プラグインの新規追加ページでYoast SEOを検索して追加してください。

wordpress プラグイン Yoast SEO パンくずリスト bootstrap

パンくずリストを有効化

Yoast SEO が追加できたら次は「検索での見え方」ページのパンくずリストを選び有効にします。これで下準備は終了です。

テーマにパンくずリストを挿入

さていよいよパンくずリストを出力する段階になりましたが、ヒントがわかりにく所に書いてあるので見逃してしまいます。

パンくずリストを有効化したページの真ん中らへんにちょこっと書いてあるので見逃してはいけません。
使い方はリンク先の記事を見ないといけないようですね。

■ ナレッジベース記事
「How to implement Yoast SEO breadcrumbs」

記事を見てもよくわかんないやという方のために該当部分を下記に書き出してみました。

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

上記をテーマのどこか（グローバルメニューの下ですね）に挿入すればとりあえずパンくずは表示されます。

Bootstrap仕様に改良

いよいよBootstrap仕様にしていくわけですが、ここからは力技です。
上記のコードで出力されたパンくずリストのソースを確認し、タグやクラス名を書き換えてしまうという素敵な方法で解決したいと思います。
というわけで3分クッキングのごとく出来上がりがこちら↓

<?php
$breadcrumb = null;

if(function_exists('yoast_breadcrumb')){
    $yoast_breadcrumb = yoast_breadcrumb( '<ol class="breadcrumb">','</ol>',false );
    $yoast_breadcrumb = preg_replace('/span/', 'li', $yoast_breadcrumb);
    $yoast_breadcrumb = preg_replace('/<li><li>/', '', $yoast_breadcrumb);
    $yoast_breadcrumb = preg_replace('/<\/li><\/li><\/li>/', '', $yoast_breadcrumb);
    $yoast_breadcrumb = preg_replace('/<a/', '<li class="breadcrumb-item"><a class="text-dark"', $yoast_breadcrumb);
    $yoast_breadcrumb = preg_replace('/<\/a>/', '</a></li>', $yoast_breadcrumb);
    $yoast_breadcrumb = preg_replace('/breadcrumb_last/', 'breadcrumb-item', $yoast_breadcrumb);
    $yoast_breadcrumb = preg_replace('/<li><li class="breadcrumb-item">/', '<li class="breadcrumb-item">', $yoast_breadcrumb);
    $breadcrumb = '<div class="container">';
    $breadcrumb .= $yoast_breadcrumb;
    $breadcrumb .= '</div>';
}
echo $breadcrumb;
?>

ポイントとしてはyoast_breadcrumb( ”,”,false )とすることで即出力するのではなくデータとして格納できるように設定することです。
これさえ押さえておけばBootstrap以外のフレームワークを利用してても応用できます。

まとめ

Yoast SEOは使い始めたころは若干扱いにくいイメージでしたが理解を深めると痒いところに手が届きすぎるプラグインで導入が必須になってしまいました。
入れておいて損はないのでWordpressを利用するときははじめに入れておきましょう。