開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

WordPress のパンくずリスト実装方法と、SEOについて

最終更新:2017-07-10 by Joe

ワードプレスを使った「パンくずリスト」のSEOにおける実装方法についてまとめました。

WordPress とパンくずリスト

特定のワードプレスのテーマは、パンくずリストが実装されていないか、希望通りのパンくずではない場合が多いです。そんなときのために、さくっと「パンくずリスト」を出力できる実装方法をご紹介します。

パンくずリスト実装方法

パンくずリストを実装するには、大きく2つの方針があります。

  1. 自分で実装する
  2. プラグインを利用する。

もちろん、プラグインの利用のほうが、詳しいWordpressコーディングの知識がなくて、素早く簡単に利用できるでしょう。逆に、自分で実装すると、すこしPHPコードを取り扱う必要がありますが、細かく変更が可能で、拡張性があります。SEO観点で柔軟にサイト構造をカスタマイズしたいのであれば、実装してしまったほうができることが多いと思います。

目的とスキルレベルに合わせて選べば良いと思います。

1)パンくずリストを自分で実装する

説明の簡単のために、最もシンプルなケースで、コード例を紹介します。

「breadcrumbs.php」を作成する

テーマファイル内に、「breadcrumbs.php」を作成し、下記を書き込みます。もちろん名前は好きにつけてだいじょうぶです。

あとは呼び出したい箇所で場所に「get_template_part( ‘breadcrumbs’ ); 」と記載すればテンプレートを呼び出せます。

WordPressの仕様や、関数にある程度知っている人であれば、理解は難しくないと思います。

<?php
/**
 * Generate the breadcrumbs
 */

// ">" をセパレータとして利用
$sep  = '<span class="sep">&rsaquo;</span>';

// トップページ
$text = '<a class="element root" href="' . get_bloginfo('url') . '">ホーム</a>';

if ( is_category() ) {

  // カテゴリーページのパンくず
  $cat    = get_queried_object();
  $name   = $cat->name;
  $text  .= $sep . '<span class="element">' . $name . '</span>';

} else if ( is_month() ) {

 // 月間アーカイブページのパンくず
 $y     = get_query_var('year');
 $m     = get_query_var('monthnum');
 $link  = get_month_link( $y, $m );
 $name  = "{$y}年{$m}月";
 $text .= $sep . '<a href="' . $link . '" class="element">' . $name . '</a>';  

} else if ( is_singular('post') ) {

  // シングル投稿ページのパンくず
  $category = get_the_category();
  if ( $category ) ) {
    // 取得したカテゴリ配列の先頭のカテゴリをパンくずに採用する
    $name  = $category[0]->cat_name;
    $id    = $category[0]->cat_ID;
    $slug  = $category[0]->slug;
    $link  = get_category_link( $id );
    $text .= $sep . '<a href="'. $link .'" class="element">'. $name .'</a>';
  }
  $text .= $sep . '<span class="element">'. get_the_title() .'</span>';

} else if ( is_search() ) {

  $text .= $sep . '<span class="element">検索結果</span>';

} else if ( is_page() ) {

  $link  = get_the_permalink();
  $title = get_the_title();
  $text .= $sep . '<span class="element">' . $title . '</span>';

} else if ( is_404() ) {

  $text  .= $sep . '<span class="element">不明なページ(404)</span>';

}

// 生成したしたパンくずHTMLを出力。
echo '<div class="breadcrumbs">';
echo $text;
echo '</div>';

このコードスニペットでは、簡単のため、サポートしているケースを以下に限定してます。

  • カテゴリーアーカイプ
  • 月間アーカイブ
  • シングル投稿
  • 固定ページ
  • 検索ページ

記載されていないケースは例えば、is_author(), is_post_type_archive(), is_tax(), .., などは、必要に応じて、自分でで拡張してください。後述のget_queried_object()関数をうまく使えば、それほど苦労しないと思いますよ。

さて以下、すこし解説します。

カテゴリーページのパンくずの出力

get_queried_object()関数をうまく利用してスッキリ

スマートに書くポイントは「get_queried_object()」です。細かい説明ははしょりますが、便利なやつで、カテゴリーアーカイブであれば、カテゴリオブジェクトが、など、メインループがクエリに利用したカテゴリobjectをそのまま取得できます。(この説明、よくわかんない人は、ごめんなさい。長くなるので別の機会に)

別の方法では、「global $cat; 」で、全く同じカテゴリオブジェクト「$cat」にアクセスできますが、すぐglobal しちゃうのはあまりかっこよくないですので、上記ほうがオススメです。

必読:get_queried_object、日本語版ドキュメント:
http://wpdocs.osdn.jp/関数リファレンス/get_queried_object

シングル投稿ページのパンくず出力

もし一つの記事に、複数のカテゴリー名が適応するような場合で、

もし階層的に、カテゴリ名の下にシングル投稿をおきたいのであれば、いったいその記事が、どのカテゴリーに属するようにするか(ように訪問者に見せるのか)という点は、考える必要があります。

上記のコードでは、これをシンプルな仕様を採用しており、get_the_category() で記事にひも付けられたカテゴリをすべて取得したのち、「取得したカテゴリ配列の先頭」をその記事にカテゴリとしてパンくずに表示しています。

どのカテゴリが先頭に来るのかは、おそらく、DBのテーブルにストアされた順番かと思いますが、あまり意図してコントロールできるものではないでしょう。

参考、Wordpress Developers:
https://developer.wordpress.org/reference/functions/get_the_category/

「それじゃ困る、記事ごとに、任意のカテゴリを表示したい」という人もいると思いますが、追加で独自の実装が必要になります。今回はふれません。

2)パンくずリストのプラグインを利用する

WordPressのパンくず実装で、最もメジャーと言って良いプラグインだと思いますので、これでだいたいOKだと思います。とくにここでは深追い説明しません。ありからず。

Breadcrumb Navxt:
https://wordpress.org/plugins/breadcrumb-navxt/

初心者はこちらで問題ないですが、SEO観点で、調整をかけていきたいとき、自分で実装しているほうがコントロールしやすいのは間違いないかと思います。

以上になります。

参考サイト

閉じる