1. TOP
  2. WordPress
  3. パンくずリストをプラグイン無しで作成 - 解説付き - 構造化データ対応 - 【WorePress】
詳しくはこちら
WordPress
 | 

パンくずリストをプラグイン無しで作成 - 解説付き - 構造化データ対応 - 【WorePress】

WordPressでパンくずリストを作成するのは一苦労ですよね。

プラグインを使うでも良いですが、プラグインだとクラスを自由に設定出来なかったり、地味に不便です。

プラグイン無しでパンくずリストを作成する系の記事やサイトも色々ありますが、どういう仕組みで作成しているのかがイマイチわかりませんでした。

なので、私が自身で作成したパンくずリストのコードをサンプルとして掲載して、丁寧に解説していきたいと思います。

 

また、今回のパンくずリストはGoogleの構造化データに対応しています。

私自身、構造化データというものを最近知りました。

この、構造化データ自体の解説は今回は控えますので、詳しく知りたい方は下記記事をご覧下さい。

https://webliker.info/29643/

こちらのサイトの文章を引用すると、構造化データというものは以下のようなものです。

schema.orgに基づいてパンくずリストを構造化データでマークアップする方法を解説します。

構造化データを用いてマークアップすることでGoogleやYahooの検索結果にパンくずリストが表示されるいわゆる「リッチスニペット」に対応することができます。

ここで初めて「構造化データ」について触れる人のためにその概要をわかりやすく説明した後に、マークアップの２つの記法である「microdata」「JSON-LD」のそれぞれの書き方を具体的に解説していきます。

目次

サンプルコード

まず、下記コードをfunctions.phpに貼り付けます。

その後、パンくずリストを使いたい箇所で、<?php create_breadcrumb(); ?>を実行するだけで、そのページのパンくずリストが出力されます。

※TOPページではパンくずリストを出力しない前提のコードです

/**
 * パンくず生成関数
 */
function create_breadcrumb() {

  // wpオブジェクト取得
  $wp_obj = get_queried_object();

  // パンくずのどのページでも変わらない部分を出力
  echo
    '<div class="p-breadcrumb">'.
      '<ol class="p-breadcrumb__lists" itemscope itemtype="http://schema.org/BreadcrumbList">'.
        '<li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem" class="p-breadcrumb__item">'.
          '<a itemprop="item" href="' . home_url() . '">'.
            '<span itemprop="name">TOP</span>'.
          '</a>' .
          '<meta itemprop="position" content="1">'.
        '</li>';

  // 固定ページ（page-○○.php）
  if(is_page()){
    echo
      '<li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem" class="p-breadcrumb__item">'.
        '<a itemprop="item" href="' . home_url($_SERVER["REQUEST_URI"]) . '">'.
          '<span itemprop="name">' . single_post_title('', false) . '</span>' .
        '</a>' .
        '<meta itemprop="position" content="2">'.
      '</li>';
  }

  // カスタム投稿 TOPページ（archive-○○.php）
  if(is_post_type_archive()){
    echo
      '<li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem" class="p-breadcrumb__item">'.
        '<a itemprop="item" href="' . home_url($wp_obj->name) . '">'.
          '<span itemprop="name">' . $wp_obj->label . '</span>'.
        '</a>' .
        '<meta itemprop="position" content="2">'.
      '</li>';
  }

  // カスタム投稿 タクソノミー一覧ページ（taxonomy-○○.php）
  if(is_tax()){
    $post_slug = get_post_type();
    $post_label = get_post_type_object($post_slug)->label;
    echo
      '<li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem" class="p-breadcrumb__item">'.
        '<a itemprop="item" href="' . home_url($post_slug) . '">'.
          '<span itemprop="name">' . $post_label . '</span>'.
        '</a>' .
        '<meta itemprop="position" content="2">'.
      '</li>'.
      '<li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem" class="p-breadcrumb__item">'.
        '<a itemprop="item" href="' . home_url($post_slug . '/' . $wp_obj->slug) . '">'.
          '<span itemprop="name">「' . $wp_obj->name . '」カテゴリー一覧</span>'.
        '</a>' .
        '<meta itemprop="position" content="3">'.
      '</li>';
  }

  // カスタム投稿 詳細ページ（single-○○.php）
  if(is_singular() && !is_page()){
    $post_slug = get_post_type();
    $post_label = get_post_type_object($post_slug)->label;
    $post_id = $wp_obj->ID;
    $post_title = $wp_obj->post_title;
    echo
      '<li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem" class="p-breadcrumb__item">'.
        '<a itemprop="item" href="' . home_url($post_slug) . '">'.
          '<span itemprop="name">' . $post_label . '</span>'.
        '</a>' .
        '<meta itemprop="position" content="2">'.
      '</li>'.
      '<li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem" class="p-breadcrumb__item">'.
        '<a itemprop="item" href="' . home_url($post_slug . '/' . $post_id) . '">'.
          '<span itemprop="name">' . $post_title . '</span>'.
        '</a>' .
        '<meta itemprop="position" content="3">'.
      '</li>';
  }

  // 404（404.php）
  if(is_404()){
    echo
      '<li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem" class="p-breadcrumb__item">'.
        '<a itemprop="item" href="' . home_url($_SERVER["REQUEST_URI"]) . '">'.
          '<span itemprop="name">404 Not Found</span>' .
        '</a>' .
        '<meta itemprop="position" content="2">'.
      '</li>';
  }

  // パンくずのどのページでも変わらない部分を出力
  echo
    '</ol>'.
  '</div>';

}

解説

この関数の仕組みは至ってシンプルで、下記のような処理を行っているだけです。

  1. 今いるページの種類（固定ページやカスタム投稿ページなど）を判断
  2. 種類に応じて、パンくずリストに必要なページURLとページタイトルを取得
  3. 取得した情報をもとにタグを作成

今いるページの種類（固定ページやカスタム投稿ページなど）を判断

今いるページの種類を判断する方法は、ページごとの条件分岐で行っています。

if(is_page())は「固定ページ」かどうか、if(is_post_type_archive())は「カスタム投稿のアーカイブページ」かどうかを判断して、そのページであれば、タイトルなどを取得してタグを出力しています。

 

なので、条件分岐のif(is_○○())の条件に当てはまるページでのみ、パンくずリストは正しく動きます。

 

今回のサンプルコードでは、下記ページの条件分岐のif文があります。

  • 固定ページ：is_page()
  • カスタム投稿のアーカイブページ：is_post_type_archive()
  • カスタム投稿のタクソノミー一覧ページ：is_tax()
  • カスタム投稿の投稿詳細ページ：is_singular() && !is_page()
    ※is_singular()だけだと、固定ページでもこの条件にマッチしてしまうので、AND条件で!is_page()を追加しています
  • 404ページ：is_404()

なので、上記以外のページ、例えばカテゴリーページやタグページなどではパンくずリストは正しく作成されません。

上記以外のページでも対応したい場合は、ご自身で対応させたい条件分岐を追加して下さい。

ページごとの条件分岐は下記記事が参考になります。

https://webdesignday.jp/inspiration/wordpress/4765/

種類に応じて、パンくずリストに必要なページURLとページタイトルを取得

ページのタイトルやURLを取得する方法は、ページの種類によって違います。

例えば、「固定ページ」のタイトルを取得するにはsingle_post_title('', false) を使いますが、「カスタム投稿の詳細ページ」のタイトルを取得するには$wp_obj->post_titleを使用しています。

なので、それぞれのページの種類に応じて適切な方法でタイトルやURLを取得しています。

固定ページの親子関係について
固定ページは親子関係を設定することが出来ますが、今回のコードでは対応していません。
例えば、「会社情報」を親、「アクセス」を子とした場合、アクセスページのパンくずリストは下記のように出力されるのが正しいでしょう。
TOP＞会社情報＞アクセス
しかし、今回のコードのでは下記のようになってしまいます。
TOP＞アクセス
なので、親子関係に対応させたい場合はカスタマイズが必要です。

取得した情報をもとにタグを作成

タグの中のテキストやaタグのhref属性の値に、取得した情報を出力させます。

関数の最初と最後では、どのページでも変わらないタグを出力しています。

どのページでも変わらないタグというのは、パンくずリストで使用しているolタグの開始タグや終了タグなどです。

まとめ

WorePressでパンくずリストを作成するには、ついついプラグインや全ページベタ書きなどで対応してしまいがちですが、今回のように自作で作成することも十分可能です。

仕組みも至ってシンプルで、今いるページを条件分岐で判断して、それそれのページに応じてタイトルやURLを取得して出力しているだけです。

開発するサイトによって、使用する条件分岐の種類が変わると思うので、このコードをベースにどんどんカスタマイズしてみて下さい。

関連記事