WordPress プラグインなしでパンくずリストを表示

スポンサーリンク
スポンサーリンク

パンくずリスト パン
最近のWordPress用ブログテンプレートは、いわしブログでも使用しているStinger3を始め、最初からパンくずリスト出力が標準装備されるようになってきました。

でも、企業向けのWordPressサイトを一から作る場合は、やはり自前でパンくずリストを設置する必要があります。

WordPressにはパンくずリスト表示用プラグインがたくさんありますが、今回はプラグインを使わずにパンくずリストを設置する方法を紹介します。

スポンサーリンク

パンくずリストとは?

パンくずリスト

パンくずリストとは、webサイトやブログ内での位置を視覚的にわかりやすくするために、滞在中のページを階層順にリスト化して表示したものです。このブログにもタイトルの上にパンくずリストが表示されていますね。

規模の大きいサイトだと、現在どの階層のページを見ているのかがわかりにくいのですが、パンくずリストがあれば、サイト内の現在位置が直感でわかるようになります。

また、パンくずリストは、ユーザビリティの向上だけではなく、SEOにも重要な役割を果たしています。

検索エンジンにサイトの構造を正しく認識させることは、SEOの重要なポイントの一つなのですが、パンくずリストを表示させることで、検索エンジンにサイトの階層や構造を正確に把握させることができます。

ちなみに、「パンくず」という名称の由来ですが、童話「ヘンゼルとグレーテル」の中で、主人公が森の中で迷わないように、パンくずを落としながら歩いたというお話から来ています。英語では「breadcrumbs」と表記します。

プラグインなしでパンくずリストを設定

WordPressには、パンくずリストを表示するためのプラグインがたくさんありますが、今回はプラグインを使わずにパンくずリストを表示させることにしました。

パンくずリスト表示コードは、bl6.jpさんの記事から引用させていただきました。ありがとうございます。

Screenshot of bl6.jp

WordPressでパンくずリストをmicrodataを使ってマークアップするやり方 | bl6.jp

こちらのコードをそのまま使った場合、階層化されたパンくずリストが横一列ではなく、改行されて縦に並びます。パンくずリストの横にある「>」マークも下層では表示されないので、独自に改良を加えました。

パンくずリスト 階層化

改良後のコードで表示させたパンくずリストです。ちゃんと横一列に並び、「>」マークも付くようになりました。

パンくずリスト 横一列並び

パンくずリスト表示コード functions.php記載用

まずはfunctions.phpに以下のコードを記載します。このコードは投稿ページだけでなく、カテゴリや固定ページにも対応、固定ページが親子構造になっている場合でもパンくずリストを出力させることができます。

また、microdata形式による構造化マークアップにも対応しています。自動的にmicrodataコードがパンくずと共に生成されるので、検索結果にパンくずを表示させることができます。

※ functions.php は WordPress を動作させるための重要なファイルです。変更すると WordPress が動作しなくなる可能性があるので、このコードを記述する前に functions.php をバックアップしておいてください。

// パンくずリスト
function breadcrumb(){
    global $post;
    $str ='';
    if(!is_home()&&!is_admin()){
        $str.= '<div id="breadcrumb" class="cf"><div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;">';
        $str.= '<a href="'. home_url() .'" itemprop="url"><span itemprop="title">ホーム</span></a> &gt;&#160;</div>';
        if(is_category()) {
            $cat = get_queried_object();
            if($cat -> parent != 0){
                $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                foreach($ancestors as $ancestor){
$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;"><a href="'. get_category_link($ancestor) .'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor) .'</span></a> &gt;&#160;</div>';
                }
            }
$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a> &gt;&#160;</div>';
        } elseif(is_page()){
            if($post -> post_parent != 0 ){
                $ancestors = array_reverse(get_post_ancestors( $post->ID ));
                foreach($ancestors as $ancestor){
                    $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;"><a href="'. get_permalink($ancestor).'" itemprop="url"><span itemprop="title">'. get_the_title($ancestor) .'</span></a> &gt;&#160;</div>';
                }
            }
        } elseif(is_single()){
            $categories = get_the_category($post->ID);
            $cat = $categories[0];
            if($cat -> parent != 0){
                $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                foreach($ancestors as $ancestor){
                    $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;"><a href="'. get_category_link($ancestor).'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor). '</span></a>→</div>';
                }
            }
            $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a> &gt;&#160;</div>';
        } else{
            $str.='<div>'. wp_title('', false) .'</div>';
        }
        $str.='</div>';
    }
    echo $str;
}

パンくずリスト表示コード single.php page.php記載用

続いて、パンくずリストを表示させたい場所に以下の呼び出し用コードを貼り付けてください。

<?php breadcrumb(); ?>

ダッシュボード左側のメニューから「外観」→「テーマ編集」と進み、右側に表示されるテンプレートの中からsingle.php・page.phpを選択してコードを貼り付けます。パンくずリストはそのページのタイトル前後に表示させるのが一般的ですね。

また、archive.phpに貼り付けると、カテゴリや月別アーカイブでもパンくずリストを表示させることができます。カテゴリやアーカイブはテーマによって該当するテンプレートが違うので注意してくださいね。

スポンサーリンク

Googleウェブマスターツール 構造化データテストツール

パンくずリストがきちんと認識されているかどうかは、Googleウェブマスターツールの構造化データテストツールにURLを入力することで確認できます。

Screenshot of www.google.com

Google Structured Data Testing Tool

URLを入力して「プレビュー」をクリックしてください。このようにパンくずが表示されていれば、microdataコードがきちんと認識されています。

Googleウェブマスターツール 構造化データテストツール パンくず確認

「抽出された構造化データ」にも、ちゃんとパンくずが表示されていますね。

Googleウェブマスターツール 構造化データテストツール パンくず認識

WordPress パンくずリスト設定プラグイン

WordPressには、パンくずリストを表示するためのプラグインがたくさんあります。「wordpress プラグイン パンくず」で検索してみると、Breadcrumb NavXTというプラグインの情報がたくさん出てきました。パンくずリスト表示ならこれが定番のようです。

こちらにBreadcrumb NavXTの詳しい使い方が掲載されています。プラグインを使ってパンくずリストを表示させたい方は、この記事がオススメです。

Screenshot of www.adminweb.jp

Breadcrumb NavXTプラグイン(パンくずリストの表示) – WordPressプラグインの一覧

ちょっと古い記事(3年前)ですが、FIREGOBYさんがパンくずリスト表示用プラグインをいろいろと検証されています。パンくずリスト用プラグイン選びの参考にしてください。

Screenshot of firegoby.jp

WordPressでパンくずリストを表示するためのプラグイン9個+1を検証 | firegoby

コメント

  1. […] 参考:WordPress プラグインなしでパンくずリストを表示 | いわしブログ […]

  2. だいき より:

    こちらに掲載してある、コードでパンくずリストを追加さえて頂きました!
    ありがとうございます。

    一つ質問なのですが
    階層が3階層、4階層と増えた場合、「>」のマークが出なくなってしまうんですが
    その場合どう修正したらよろしいのでしょうか?

    よろしくお願いいたします。

    • wind-mill_iwashiblog より:

      だいき様
      ブログ内のコードを改良して、階層ごとに「>」のマークが出るようにしました。パンくずリストも縦に並ぶのではなく、横一列に並ぶように変更しています。
      ぜひ新しいコードを使ってみてください。

  3. けんけん より:

    参考にさせていただきました。ありがとうございます。

    ひとつ質問です。
    階層の中にカテゴリがある場合、→で表示されるのですが、スマホで見た場合、→が下の表にあったり、文字がおかしくなったりしてしまうのですが、どのように解決すればよいでしょうか?
    別途スマホ用に調整しないとダメですか?
    教えていただけると幸いです。よろしくお願いします。

    • けんけん より:

      現象がわかりましたので補足します。
      「ホーム>カテゴリ1 →カテゴリ1内のカテゴリ>」となるのですが、>や→で区切って、それぞれで折り返してしまっていたようです。文字の長さによってはそれで意味が分かる場合もあるのですが、
      ホーム カテゴリ1 カテゴリ1内のカテゴリ
      >    →     >
      のような感じになってしまってわかりにくいです。
      パン屑リストを普通の文字列として折り返したいのですが、アドバイスをよろしくお願いします。

      • wind-mill_iwashiblog より:

        CSS等で調整するのがよいかと思いますが、ソースに余計な改行コードが挿入されているのであれば、functions.php をいじらないとダメですね。
        ただ、phpの書き換えはリスクがあるので、手に余るようならプラグインを使ったほうがよいかもしれません。

        • けんけん より:

          やはり、そういうことですね。
          かしこまりました。ご返信、ありがとうございました。

タイトルとURLをコピーしました