WordPressでパンくずリストを設定

Sponsored Link


結果表示


2013-11-29_155045

トップページ以外の各ページに「パンくずリスト」を導入します。

プラグイン「Yoast WordPress SEO」の導入


このプラグインを導入することで、後ほどテーマテンプレートに挿入するタグを有効動作するようにします。

プラグイン新規導入で「Yoast WordPress SEO」を検索して有効にします。
管理画面左サイドメニュー「SEO – Internal Links」を設定します。
2015-02-14_014432

  • 「Enable Breadcrumbs」にチェック
  • 「Taxonomy to show in breadcrumbs for:」をカテゴリーにする
  • 「Post type archive to show in breadcrumbs for:」にチェック
  • 一番下の挿入タグは後で使うので覚えておく

管理画面左サイドメニュー「SEO – パーマリンク」を設定します。
2015-02-14_014153

  • 「Strip the category base」にチェック
  • 「Enforce a trailing slash on all category and tag URL’s」にチェック

「Strip the category base」にチェックを入れるとURL表示が変わります。Wordpressでカテゴリーを表示する時に「category/」と含まれていた部分が削除されますので、すでにGoogle検索に登録している場合はチェックはしない方が良いかもしれません。

http://example.com/category/xxxxx

http://example.com/xxxxx

「Enforce a trailing slash on all category and tag URL’s」にチェックすると、URLがディレクトリ名で終わる場合は最後にスラッシュがつくようになります。

http://example.com/xxxxx

http://example.com/xxxxx/

テーマファイルの編集


管理画面左サイドメニュー「設定 – Breadcrumbs」の「Try to add automatically:」にチェックする方法で問題ないならよいのですが、今回は「テーマファイル」で希望の場所に挿入しました。

今回使用したテーマ「Crimson Lite」の場合、「content-banner.php」を編集しました。

  • 管理画面左サイドメニュー「外観 – テーマ編集」
  • 表示されたソースのidが「home-banner」のdivの下(子要素として)に下記タグを挿入

<style>
.breadcrumb{margin:0}
.breadcrumb a:link{
  color:#ffffff
}
.breadcrumb a:visited{
  color:#ffffff
}
.breadcrumb a:hover{
  color:#ffffff
}
.breadcrumb a:active{
  color:#ffffff
}
</style>
<div class="inner-banner breadcrumb wrap clearfix" style="margin:0 auto">
<div id="banner-content">
ここにYoast WordPress SEOのパンくずのタグを挿入する。
</div></div>

最初の「php」のif文でトップページ以外にタグを挿入するように指定しています。最後の「endif」文までの間に書かれたソースがトップページ以外に表示されます。

最初の「style」タグではリンク文字の色をすべて白色にしています。
最初の「div」タグ内に先ほどのパンくずリスト挿入タグを記述しています。
最初の「div」タグにはclass指定をしています。

  • breadcrumb → リンク文字の色を変更するためのスタイル

基本的に、そのテーマに合ったソースを記述する必要があります。

不具合


パンくずリスト側の問題と思われますが、2バイト文字で孫階層にカテゴリを作成すると、記事中に表示されるパンくずリストに孫階層カテゴリ名が表示されないという問題点があります。

この問題は孫カテゴリ名の先頭が英数字であれば一時的解消されます。(カテゴリ名に2バイト文字を使う場合は工夫が必要になってきます)

しかし、孫カテゴリが8以上くらいになってくるとまた同様に孫階層の上下関係が記事編集画面でわからなくなるようです。

プラグイン「Yoast Breadcrumbs」は不要


このプラグインを導入しなくてもパンくずリストは表示可能です。また、このプラグインを導入するとGoogleの検索結果にリッチスニペットでパンくずリストが表示されなくなるので注意が必要です。

リッチスニペットでパンくずリストが有効になっている例
2013-12-01_202211

無効になっている例
2013-12-01_202347

どのように表示されるかは「Googleウェブマスターツール」の「構造化データテストツール」で確認できます。

Sponsored Link

最新記事はトップページで!

京都発・地方が盛り上がるグルメや観光に撮影ロケ地の話題を提供!


購読するならRSSをご利用ください!

RSSはこちらをご利用ください。


マスコミ各社様の記事使用規約についてはこちらをご覧ください。

当ブログでは掲示板やSNSなど他メディアでURLや記事を紹介することはございませんので、掲示板などで記事を紹介されていても一切無関係です。誤解なきようお願いいたします。
当ブログで転載しているTweetはTwitter社の規約(2013/10)に準じた形式(API利用)によって許可された範囲で行われています。また、Tweet内容の所有権はTwitter社の規約によりTweet元のアカウント所有者にあります。そのため、当ブログでその所有権を主張するものではありません。Tweet内容については責任は負いませんので予めご了承ください。