Yoast SEO のパンくずリストからタイトルを正しく削除する

WordPressのプラグイン Yoast SEO のパンくずリスト機能は、標準でページの投稿タイトルまで出力されてしまいます。サイト内のナビゲーションという意味では表示中の投稿タイトルが表示されるのが適切なのは分かりますが、このサイトのようにパンくずリストの真下とかに投稿タイトルを配置しているテーマの場合、パンくずリスト側の投稿タイトルは消したいと思う方も多いでしょう。

今回はそんな時に便利なコードスニペットの紹介です。コードを子テーマの functions.php に記述するか、Code Snippets プラグインを使って実装します。

基本のコード

基本となるコードは、YoastのナレッジベースからリンクされているGitHubで紹介されています。

このコードは、パンくずリストの表示とあわせて、構造化データ(JSON-LD)のbreadcrumb を変更します。

add_filter( 'wpseo_breadcrumb_links', 'wpseo_breadcrumb_remove_postname' );
function wpseo_breadcrumb_remove_postname( $links ) {
  if( sizeof($links) > 1 ){
    array_pop($links);
  }
  return $links;
}

2行目から登場する $links には表示中のページに関するパンくずリストの情報が格納されています。例えば、

  • ホーム
  • カテゴリー名
  • サブカテゴリー名
  • 投稿タイトル

といった具合です。

3行目の sizeof 関数を使って、$links の中にある パンくずリストの数(階層)が、先頭のホームを含めて1より多い(=2つ以上)かを判定し、2つ以上ならば、4行目の array_pop 関数で パンくずリストの最後を除去しています。

したがって、3行目の数字部分を変更すれば、パンくずリストが一定数以上の階層になった時だけ、パンくずリストのタイトルを削除するといったカスタマイズが可能です。

投稿・固定ページのみ、パンくずリストのタイトルを削除する

基本のコードでは、Yoastのパンくずリストが表示されるページの種類に関わらず、パンくずが2つ以上になる時に最後のひとつを削除するので、アーカイブページでの表示には適用したくないケースもあります。その場合は、上記のコードに替えて以下のコードを使います。

add_filter( 'wpseo_breadcrumb_links', 'yoast_breadcrumb_remove_postname' );
function yoast_breadcrumb_remove_postname( $links ) {
  if( is_singular() && ( count($links) > 1 ) ){
    array_pop($links);
  }
  return $links;
}

基本のコードとほとんど同じですが、3行目の適用条件に、 is_singular() を追加することで、投稿および固定ページを表示する時のみ、パンくずリストのタイトルを削除するようになります。

ここでは sizeof 関数 に代えて count 関数を使用していますが、機能は同じです。お好みでどうぞ。

他の条件を追加したい場合は、以下のページを参考にカスタマイズしてください。

(参考)条件分岐タグ

タイトルではなくホームの文字を削除したい時

パンくずリストの先頭に来るホームの文字を削除したい時は 基本のコード4行目 の array_pop 関数を array_shift 関数に変えてやると、パンくずリストの最後ではなく先頭(すなわちホームの部分)が削除されます。

add_filter( 'wpseo_breadcrumb_links', 'yoast_breadcrumb_remove_home' );
function yoast_breadcrumb_remove_home( $links ) {
  if( is_singular() && ( count($links) > 1 ) ){
    array_shift($links);
  }
  return $links;
}

パンくずリストの最後のカテゴリーをリンク付きにしたい場合

前述のパンくずリストから投稿タイトルを削除するコードを使用すると、最後のカテゴリー(すなわち表示中の投稿から見て直接の親カテゴリー)へのリンクが有効になりません。最後のカテゴリーをリンク付きにしたい場合は以下のコードを試してください。

このコードは、構造化データ(JSON-LD)のbreadcrumb を変更しません。

function remove_breadcrumb_title( $link_output) {
  if (is_singular()){
    if(strpos( $link_output, 'breadcrumb_last' ) !== false ) {
      $link_output = '';
    }
    $link_output = str_replace('<span>', '', $link_output);
    return $link_output;
  }
}
add_filter('wpseo_breadcrumb_single_link', 'remove_breadcrumb_title' );
  • $link_output にはパンくずリストの各要素(「ホーム」とか「投稿タイトル」とか)が入っています。
  • 2行目で、投稿・固定ページに処理を限定します。
  • 3~5行目では、strpos 関数を使い、 breadcrumb_last が含まれる 要素を空にします。
  • 6行目で、str_replace 関数を使い、各パンくずリストの要素から span の開始タグを削除します。
  • 7行目で 整形後の パンくずリストを出力します。

strpos 関数を用いてYoastのパンくずリストのタイトルを削除するコードは、海外のサイトで見かけますが、Yoastのパンくずリストは階層が一つ増えるごとに span タグで入れ子になる仕様で、そのままだと、の閉じタグが欠落しておかしくなります。

<span><span><a href="http://test.local/" >ホーム</a> » <span><a href="http://test.local/category/parent/" >親カテゴリー</a> » <span><a href="http://test.local/category/parent/child/" >子カテゴリー</a></span>

このコードでは、パンくずリスト内で各要素を囲っている 余分な span の開始タグを削除することで、閉じタグが欠落する問題を、やや強引に回避しています。出力結果は以下のとおり。

<span><a href="http://test.local/" >ホーム</a> » <a href="http://test.local/category/parent/" >親カテゴリー</a> » <a href="http://test.local/category/parent/child/" >子カテゴリー</a></span>

CSSでパンくずリストのタイトルを隠す方法について

上記のコードを使わず、CSSを使ってパンくずリストのタイトルを隠すことも可能です。

.breadcrumb_last {display:none;}

PHPのコードスニペットを使いたくない方にはお手軽な方法ですが、この方法だとパンくずリストの末尾の区切り記号を消すことは出来ません。jQueryを使って末尾の区切り記号を消すことも可能でしょうが、そこまでするくらいなら、PHPのコードスニペットを使う方がスマートです。