2021.03.14

パンくずリストの作り方｜自作すればデザイン自由！

ホームページの作り方に関係しそうな技術を、ご一緒に習得していければと思っています。今回は「パンくずリスト」を取り上げます

パンくずリストとは？

パンくずリストとは、ホームページの上部にある、

こういうナビゲーションです。このリストを右に行くごとに深い階層につながっていく仕組みです。

パンくずリストは閲覧している人に、今どこにいるのかを明確に知らせ、迷った時にも、上層のリンクを提供します。

ヘンゼルとグレーテルの童話で、落としておいた白いパンくずを拾って、森の中から脱出する、という話がありますが、まさにあれがパンくずリストです。英語でも「breadcrumbs」つまりパン粉です。

そして、ホームページ制作で、このパンくずリストが重要なのは、閲覧者のためだけでなく、Google検索の結果にも影響を与えるためでもあります。

Googleの検索エンジンは、とても賢く、ホームページがどんな階層になっているのか、ということまで調べます。ホームページにパンクズリストがあれば、Googleにこのパンくずリストをたどってもらって、ホームページがきちんとした構造になっていることアピールできます。

また、当然、パンクズりすとにはリンクが表示されることになりますから、ホームページ内部リンクも増え、各ページの結びつきが強化されます。これも、パンくずリストを設置するメリットです。

しかし、当然、このパンくずリストに表示される内容はページによって違います。例えば、

トップページには表示しない
投稿ページ（ブログ）には、そのカテゴリを表示させる
親子関係によって、パンくずリストの内容は変化する

といった、変動する要素がありますので、1ページずつ手で入力するのは困難です。

もちろん、WordPressをお使いの方なら、プラグインで表示させるという手が一番だと思います。

ただ、そのパンくずリストのプラグインのデザインや、今後アップデートとかが心配になることもありますね。

パンくずリストを作ってみる

というわけで、自作してみることにしました。自作すれば、好きな位置に、好きなようにデザインし、設置できますからね。

といっても簡単に作れるんでしょうか。難しそうですが、順番にやっていきたいと思います。

ちなみに、ちょっと長くなりますので、必要でしたら、この先を飛ばして、いきなり、パンくずリストのコード全体ご覧いただくこともできます。よかったらどうぞ。

閲覧者がどのページにいるのかを確認します

閲覧者の側から、どんなパンくずリストが必要か、場合分けをして制作します。閲覧者のいるページはis_〜()という関数の戻り値で判定できます：

トップページ：is_front_page()関数でトップページかどうかを判別します。ちなみに、トップページにパンくずリストは表示しません。
固定ページ：固定ページかどうかは、is_page()で判別できます。
投稿：投稿ページかどうかは、is_single()では判別できます
カテゴリ：is_category()はカテゴリーかどうかを判別できます。
タグ：is_tag()でタグのページかどうかを判別できます。

親子関係を確認します

閲覧者のいるページからトップページ遡れるパンくずリストの構造を考えます。

それぞれのページ同士が親子関係があることがあることを利用していきましょう。

例えば、普通、投稿は、親階層にカテゴリーページを持っています。また、そのカテゴリーにも親子関係があるカテゴリーページがあるかもしれません。カテゴリーも同様です。

また、固定ページにも、親となる固定ページを作成することができます。

上位階層に何があるのかを判断するためには、親を辿っていけば良い、ということです。

これを行うには、

現在の投稿や固定ページなどのオブジェクトを取得する
そのオブジェクトの親を探す
さらに親の親を探す（1. に戻る）

という作業をトップページになるまで繰り返していけば良い、ということです。具体的にこんな方法でできます。

1. 現在のオブジェクトを取得し、その親をたどる

オブジェクトの取得方法はページの種類によって異なります。

投稿：get_the_category()関数で、その投稿が属しているカテゴリーオブジェクトを取得できます。ちなみに戻り値は、その投稿が属しているカテゴリー全てを配列で返してくるので、その0番目を親カテゴリーと考えます。つまりget_the_category()[0]がその投稿が属しているになります。
カテゴリーページ：get_queried_object()関数で親カテゴリーを取得できます
タグページ：get_queried_object()関数で親タグを取得できます
固定ページ：get_post_ancestors(<投稿のID>)関数で、親や先祖のIDが全て入っている配列を取得できます。固定ページについては、この配列さえ取得できれば、親をたどっていく必要はありません。便利ですね

2. 親の親を探す

上記で取得された親オブジェクトに対して「object -> parent」と記述すると親のオブジェクトが帰ってきます。

1. のように、それぞれのページの種類に合わせた関数で、いったん親を取得すれば、そのあとは、「<object名> -> parent」で辿れるようになります。ここがポイントですね。

3. 親オブジェクトのさらに親を探す（1. に戻る）

繰り返し構文を用いて、object -> parentがなくなるまで、1. に戻って、繰り返します。この一連の親子関係を配列などに代入しておきます。この一連の配列こそが、パンくずリストです。

パンくずリストを表示させる

今までの流れをコードにしてみます。

$sep = ' | '; /*パンくずリストの項目を分けるセパレーター*/

if(is_front_page()){
    /*フロントページは何もしない*/
}
else{
    /*カテゴリーページもしくは投稿もしくはタグの場合*/
    if(is_category() || is_single() || is_tag()){
        
        $cat = null; /*オブジェクトを格納する*/
        $cat_list = array(); /*出力用のhtmlを格納する配列*/

        /*投稿ベージの場合*/
        if(is_single())
        {
            $cat = get_the_category();
            if(isset($cat[0] -> cat_ID)){
                array_unshift($cat_list, $sep . '<li>' . get_the_title() . '</li>');
                $cat_id = $cat[0] -> cat_ID;
                $cat = $cat[0]; 
                $cat_link = get_category_link($cat_id);
                array_unshift($cat_list, $sep . '<li><a href="' . $cat_link . '">' . $cat -> name. '</a></li>');
            }
        }

        /*カテゴリーページの場合*/
        if(is_category()){
            $cat = get_queried_object();
            array_unshift($cat_list, $sep . '<li>' . $cat -> name . '</li>');
        }

        /*タグページの場合*/
        if(is_tag()){
            $cat = get_queried_object();
            array_unshift($cat_list, $sep . '<li>' . $cat -> name . '</li>');
        }

        /*固定・カテゴリー・タグのいずれの種類でもこのコードで親を遡っていける*/
        while($cat -> parent != 0){     
            $cat_id = $cat -> parent;
            $cat = get_category($cat_id);
            $cat_link = get_category_link($cat_id);
            array_unshift($cat_list, $sep . '<li><a href="' . $cat_link . '">' . $cat -> name. '</a></li>');
        }

        /*出来上がったhtmlコードを出力する*/
        foreach($cat_list as $value){
            echo $value;
        }
    }


    /*固定ページの場合*/
    elseif(is_page()){
        $post_this_title = $sep . '<li>' . get_the_title() .' </li>';
        $ances_list = array();
        /*この処理だけで、親を含む先祖のオブジェクト全てを配列に格納できる*/
        $ances_id_list = array_reverse(get_post_ancestors($post -> ID));
        /*親や先祖のオブジェクトから必要な情報をhtmlコードとして書き出す*/
        foreach($ances_id_list as $ances_id){
            echo $sep . '<li><a href="' . get_page_link($ances_id) . '">'. get_page($ances_id) -> post_title .'</a></li>';
        }
        echo $post_this_title;
    }
}

出力はこんな感じのリスト構造にしておけば、CSSで整形するだけでパンクズリストができます。

<ul>
    <li><a href="https://iyyoto.jp">ホーム</a></li> | 
    <li><a href="https://iyyoto.jp/category/code/">コード</a></li> |
    <li>ホームページの作り方（1）「パンくずリストとは？」</li>
</ul>

パンくずリストができたなら、Googleからどう評価されるのか、というところも次回以降取り上げたいと思っています。

ちょっと文字ばっかりですみませんでしたが、ありがとうございました。