【長いパンくずリストを短くさせたい】WordPress SEO by Yoastプラグインで表示しているパンくずリストの文字数を調節する方法

WordPressで作ったサイトに施すSEO施策として人気の高いプラグイン「WordPress SEO by Yoast」を使うと、パンくずリストを表示させることができます。

プラグインを使ったパンくずリストの設定

下の画像はプラグインを有効化した後、設定画面から「内部リンク」をクリックした先の画面です。

「パンくずリストを有効にする」にチェックを付けて、指定された表示コードを貼り付けるだけで表示させることができます。

パンくずリストの区切り方など、表示ルールのカスタマイズもできます。

プラグインのインストール方法などについては、以下のリンク先を読むとおおよそ理解できると思います。是非ともご参考ください。

というわけで、前提はここまで・・・以下が本題です。

長いタイトル名の場合のパンくずリストってどうする

とても便利なパンくずリストなんですが、例えば閲覧しているページのタイトル名が長いと下のような感じになります。

長いタイトル名

実際に上のようなタイトル名をつけることがあるかどうかは置いといて・・・こんなに長いタイトル名の場合は、パンくずリスト全体が長くなってしまいます。

この状態を避けたい・・・パンくずリストはもうちょっとシュッとさせたい!その時に便利なのが「フィルターフック」を使う方法です。

フィルターフックを使って文字数を変更する

「wp_seo_get_bc_title」というフィルターフックを使います。

幸いにもこちらのページ「Truncate WordPress SEO breadcrumb length | Kieran Barnes」でコードを公開して頂いているので、少し変更させていただいて、何をやっているのか説明を加えてご紹介します。

add_filter('wp_seo_get_bc_title', 'truncate_bc_title'); //フィルターフック
function truncate_bc_title() {
 $title = esc_attr( strip_tags( get_the_title() ) ); //タイトル名取得

 $title_length = mb_strlen( $title ); //タイトル名の文字数を取得
 $limit = 30; //表示させる最大文字数を指定。この場合は30文字
 $truncated = mb_substr( $title, 0, $limit ); //タイトル名の最初の文字から30文字目までを取得

 if ( $title_length > $limit ) { //最大文字数よりタイトル名の文字数が多い時
  $truncated .= '...'; //30文字目までタイトル名を表示させて、後に続くという意味でよく使われる'...'を加える
 }

 $link['text'] = $truncated; //$link['text']に格納する

 return $link['text']; //$link['text']の値を返す
}

上のコードを、ご使用のテーマフォルダ内にある「functions.php」の最後尾などに追記します。

コードがやっていること

とてもシンプルで、表示しているページのタイトル名の文字数によって、あらかじめ指定した文字数まで表示させて、文字数を超えた場合は’…’を加えてあげる、という処理をしています。

フィルターフックを適用させると、こうなる

短くなりました。31文字目以降は’…’になっています。

応用:今見ているページのタイトル名を表示させない

先ほど紹介したコード応用すると、タイトル名を表示させないこともできます。「$link[‘text’]」に格納する値を空にします。

add_filter('wp_seo_get_bc_title', 'no_bc_title');
function no_bc_title() {
 $link['text'] = '';  //$link['text']に格納する
 return $link['text'];
}

すると、下のようにタイトル名が表示されなくなります。

今見ているページのタイトル名がなくなった

これはこれで、スマートになっていいかも。

まとめ

表示されるパンくずリストの文字数を調節する方法をご紹介しました。

  • タイトル名が長いページのパンくずリストの表示を変更したい
  • パンくずリストで、今見ているページのタイトル名は表示しなくてもいい

など、今回ご紹介した方法を使えば思った通りのことができるかもしれません。

以上、何かのご参考となりましたら幸いです。

追記

コメント欄でもっとコードを短くできる方法を教えてもらったので、ご参考ください。

著者:bouya Imamura