【Breadcrumb NavXT カスタマイズ】複数カテゴリーから指定表示する方法

パンくずリストを自動で表示してくれるWordPressプラグイン「Breadcrumb NavXT」。
とても便利で私もよく使うのですが、表示内容について細かいカスタマイズができないケースもあります。

例えば、複数カテゴリーを持つ投稿の場合、パンくずリストにどのカテゴリーを表示するか、設定することはできません。表示させたい形で表示される場合もありますが、違うカテゴリーを表示したい場合もあるでしょう。

今回は、少し前に担当させていただいた案件でこの問題が発生したとき、実際に行ったカスタマイズの方法についてご紹介いたします。

Breadcrumb NavXTでやりたいこと

まず、下記のような形でカテゴリーが表示されるよう設定しているパンくずリストを例に挙げます。

TOPページ > カテゴリー > 記事タイトル

投稿に設定されているカテゴリーが複数ある場合、どれかひとつのカテゴリーがパンくずリストに表示されます。

例えば、カテゴリーA・カテゴリーBが設定されている投稿の場合、
下記のどちらかで表示されますが、どちらを表示するか指定することはできません。

TOPページ > カテゴリーA > 記事タイトル
TOPページ > カテゴリーB > 記事タイトル

パンくずリストをカテゴリーAで表示したかったのですが、実際にはカテゴリーBで表示されてしまいました。
そこで今回は、独自のカスタマイズを行いました。

Breadcrumb NavXTのカスタマイズ

それでは本題に移りましょう。実は、「Breadcrumb NavXT」が用意しているフックを使えば、パンくずリストの表示内容を編集することができます。
今回はbcn_after_fillというフックを使います。パンくずリストの内容が作られた後に実行されるフックなので、表示される内容を確認したうえで、好きな内容に変更できます。

今回の案件では、下記のコードをWordPressテーマ内のfunction.phpに追加しました。

function change_breadcrumbs($bcnObj) {
  // 投稿詳細ページかどうか
  if(is_single()) {
    // パンくずリストに「カテゴリーB」が含まれる場合、パンくずリストを作り直す
    $isHit = false;
    foreach ($bcnObj->trail as $bread) {
      if ($bread->get_title() == "カテゴリーB") {
        $isHit = true;
        break;
      }
    }

    if ($isHit) {
      // 最初の要素(投稿タイトル)と最後の要素(TOPページ)を取得する
      $postBread = $bcnObj->trail[0]; 
      $topBread = $bcnObj->trail[count($bcnObj->trail) - 1];

      // パンくずリストをいったんすべて削除
      array_splice($bcnObj->trail, 0);

      // 投稿のカテゴリーのデータを取得
      $categories = get_the_category();
      $cat = null;
      foreach( $categories as $category ){
        // カテゴリーB以外を取得
        if( $cat->cat_name != "カテゴリーB" ){
          $cat = $category;
          break;
        }
      }

      // パンくずリストに投稿タイトルを追加
      array_push($bcnObj->trail, $postBread);

      // カテゴリーをパンくずリストに追加
      if ($cat) {
        $breadcrumb = new bcn_breadcrumb(
          $cat->cat_name, 
          null, 
          array('archive'), 
          get_category_link($cat->cat_ID), 
          null, 
          true
        );
        $bcnObj->add($breadcrumb);
      }
      
      // パンくずリストにTOPページを追加
      array_push($bcnObj->trail, $topBread);
    }
  }
}
add_action('bcn_after_fill', 'change_breadcrumbs');

このコードで行っていることについて、ひとつずつ解説いたします。
コードを見ながらご覧いただけると幸いです。

if(is_single())

この案件では、パンくずリストは投稿詳細ページ以外の固定ページなどでも使用していました。

しかし、今回のカスタマイズは投稿詳細ページのみに行いたかったため、
WordPressが用意している関数「is_single()」を使い、投稿詳細ページのときにのみ、下記に記載している内容の処理を行うようにしています。

この部分については、カスタマイズしたい内容にあわせて変更してみてください。

「カテゴリーB」が含まれる場合、パンくずリストを作り直す

パンくずリストの内容は、$bcnObj->trailの中に配列として入っています。
その中に、「カテゴリーB」という名前のパンくずがある場合、パンくずリストを作り直すようにしました。

$bread->get_title()で、パンくずリストに表示される名前を取得できます。
これは、カテゴリー名で特定のカテゴリーかどうかを判定しています。

最初と最後の要素を取得

さて、今回ご紹介しているのは、このような表示のパンくずリストを…

TOPページ > カテゴリーB > 記事タイトル

以下のような表示に変えたい、というときに行うカスタマイズです。

TOPページ > カテゴリーA > 記事タイトル

方法はいくつかありますが、今回は、パンくずリストをいったんすべて削除して作り直す形にしました。
具体的に言うと、array_splice()で配列内の要素をすべて削除しています。

あとから使用するため、パンくずリストを削除する前に「TOPページ」「記事タイトル」の部分はコピーしておきましょう。

投稿のカテゴリーのデータを取得

投稿のカテゴリーはget_the_category()で取得できます。
戻り値は配列の形になっています(投稿はカテゴリーが複数設定されている場合があるため)。
foreachを使ってひとつずつカテゴリー名を確認し、パンくずリストに使いたいカテゴリー名を取得します。

カテゴリーをパンくずリストに追加

カテゴリー情報をもとに、パンくずリストへ追加します。

bcn_breadcrumbというクラスが、パンくずリストひとつ分の項目です。
new bcn_breadcrumb()で、パンくずリストひとつ分の項目を作成し、引数に必要な情報を設定していきます。

今回のカスタマイズで使用したのは、下記の引数です。

• 1つ目の引数：パンくずリストに表示される階層名
• 3つ目の引数：項目のタイプ(post、archiveなど)
• 4つ目の引数：クリックしたときに遷移するリンク先URL
• 6つ目の引数：trueにするとリンクあり、falseだとリンクなしの項目になる

作ったパンくずリストの項目は、$bcnObj->add()でパンくずリストに追加します。
これで、パンくずリストに表示されるようになります。

後に追加された項目ほど、パンくずリストの左側（先祖側）に追加されていきます。
最終的に表示したいパンくずリストの階層を考えながら、追加していきましょう。

まとめ

Breadcrumb NavXTによるパンくずリストは自動生成されるため、意図しない表示になることがあります。
しかしフックを使えば、表示内容を自由にカスタマイズすることが可能です。

今回のような形以外にも、カテゴリー一覧ページや、特定の1ページだけ表示を変えることも可能です。
パンくずリストに困ったときは、この記事を参考にカスタマイズしてみてください。