logo

小さなお店や女性向け店舗等の
ホームページを作成しております

blog

ブログ

Breadcrumb NavXTで階層追加カスタマイズ

ぱんくずイメージ

wordpress案件にて、パンくずリストのプラグインBreadcrumb NavXTを使用して、階層追加のカスタマイズを行いましたので、その時のメモになります。


目次

    1. 1.やりたかったこと
    2. 2.まずはこちらを参考にやってみた
    3. 3.link部分を変更
    4. 4.最終的な記述はこちら
    5. 5.おまけ:カスタム投稿タイプも変更したかった

パンくずリストは、SEO的にも、というより、ユーザー(サイト訪問者)のユーザビリティを考えた時に、絶対にあったほうが良いと思いますので、私はサイトを作成するときは、下層ページには必ずパンくずリストを設置することにしています。
私がいつも使用しているのは、プラグイン「BreadCrumb NavXT」です。
「BreadCrumb NavXT」の詳しい使い方は、他サイトでご確認ください。
今回は、階層追加のカスタマイズについて残しておきます。

1.やりたかったこと

今回は、クッキー商品紹介のページを作成しています。
詳細ページ(single.php)にて商品の一つずつを紹介していきます。
例えば、「クッキー詰め合わせ5種セット」のページ
その詳細ページに行くには、固定ページで、「商品一覧ページ」からクリックして入っていく仕様です。
また、その「商品一覧ページ」は、TOPページからクリックして入っていきます。

つまり、目指すパンくずリストは、詳細ページを表示したときに、
HOME > 商品一覧(固定ページで作成したページ) > 詳細ページ(single.php) 
という感じで表示してほしい、というものです。

なにも設定を変更しないで、single.phpのページのパンくずリストを表示した場合は、
HOME > カテゴリー > 詳細ページ(single.php)
このようになります。

今回は、カテゴリーは使用しないので、「カテゴリー」の部分に「商品一覧」を表示させたいのです。

2.まずはこちらを参考にやってみた


⇑この方のページに、functions.phpへ追記することで、HOMEと詳細ページの間に、他のページを挟むことが出来ました。

できた!
HOME > 商品一覧(固定ページで作成したページ) > 詳細ページ(single.php) 

が、しかし、なぜか、上記のページの通りに記述しても、HOMEと商品一覧ページが表示されたものの、リンクになっていなかったのです。
(コードは上記ページを参考にしてください。完成形は下に記載しています)

3.link部分を変更

恐らく上記コードの中で、ここが怪しいだろう、というところを考える。
$breadcrumb_trail->add(new bcn_breadcrumb(‘お知らせ’, ‘%htitle%’, array(), ‘/news/’));
恐らく⇑この部分。

そして、リンクするなら
new bcn_breadcrumb(‘お知らせ’, ‘%htitle%’, array(), ‘/news/’)
のカッコ内だろうな~と思い、検索したところ、他のサイトで下記を見つけました。

new bcn_breadcrumb( ‘パンくずの名前’, ‘%htitle%‘, array(), ‘**リンクのURL**’)

カッコ内の2つ目にaタグが入ってる!
ここを修正したら、ちゃんとリンクになりました。

4.最終的な記述はこちら

5.おまけ:カスタム投稿タイプも変更したかった

先ほどのクッキーの商品ページは、「投稿ページ」に作成していましたが、
もうひとつ、そのクッキー一つ一つの紹介ページを、「カスタム投稿タイプ」にて作成していました。
クッキーの詳細ページの仕組みも、商品詳細ページとだいたい同じような仕様です。

なので、そちらのページのパンくずリストには、
HOME > クッキー一覧(固定ページで作成したページ) > 詳細ページ(single.php) 

と表示させたかったので、最終的にはコードはこちらになりました。