SEO

カスタム投稿タイプに複数カテゴリーを対応したパンくずリストを作りたい。

カスタム投稿タイプに複数カテゴリーに対応したパンくずリストを作りたい

wordpressのカスタム投稿タイプにパンくずリストを設置したいと思っていろいろと調べていました。せっかく調べたのと、今後もカスタム投稿タイプにパンくずリストを設置する時がくるだろうと思い、記録に残しておきます。

私が5時間かけて調べた内容が、あなたのお役に立てれば幸いです。

パンくずリストを設置するにあたっての条件

  • カスタム投稿タイプに適応したパンくずリスト
  • 1つの記事に複数カテゴリーがあった場合、すべてのカテゴリーを表示したい
  • Googleの検索エンジンに適応したリッチスニペットのパンくずリストがよい
  • プラグインなしでパンくずリストを表示したい
  • コピペでパンくずリストを設置したい

上記の条件を満たすパンくずリストを探していました。
wordpressでパンくずリストを設置することは難しくなく、実は簡単です。「wordpess パンくずリスト設置」などで調べれば簡単に見つかります。

ただ今回は、カスタム投稿タイプで作ったシンプル顔文字というサイトが上手にgoogleの検索エンジンに認識されていませんでした。

サイト名である「シンプル顔文字」で検索したときに、子ページであるsingle.phpのページが表示されていたのです。サイトのトップページで狙っているキーワードなので、内部対策SEOの意味もかねてgoogleの検索エンジンに最も適したパンくずリストを設置したかったのです。

通常のwordpressやhtmlホームページであれば苦労しない問題なのですが、カスタム投稿タイプという条件では1つ手間をかけないといけないみたいです。

複数カテゴリーを表示するパンくずリストを設置したい

上記のキャプチャが今回のコードの完成形です。
黄色のマーカーは画像で付け足していますが、複数カテゴリーを表現していているので訪問者にわかりやすいのではないかと思います。

よくネットショップなどで使われている表現なのですが、それをwordpressでも実現したいと思いました。

  • HOME > 家電 > テレビ > パナソニック
  • HOME > 家電 > テレビ > 40インチ
  • HOME > 家電 > テレビ > 壁掛け

など、1つの記事・商品に対して複数カテゴリーがある場合、少しでも訪問者が該当のページを探しやすくするため、ネットショップでは上記のようなパンくずリストを設置することが多いです。

ただ、SEO的には複数カテゴリーを表示したとしても、意味はありません。

複数カテゴリーを設置したとしてもgoogleの検索エンジンは1つ目のパンくずリストしか見てくれません。SEO的には1つのカテゴリーをパンくずリストで表示してればよいのです。

ただ、SEOにマイナスにならないのであれば、訪問者にとって見やすいサイトにするために必要かなと私は思います。

参考にさせていただいたサイト様。
プラグインは使わない!WordPressサイトに高品質なパンくずナビをコピペで設置する方法

上記のページをコピペするだけで簡単にパンくずリストを設置できます。
少しだけコードを私のサイト仕様に修正したので備忘録として残しておきます。

function.phpに記載するコード

 

修正前コード。
// ベースパンくず(サイト名など)
$base_breadcrumb = '<li itemscope
itemtype="http://data-vocabulary.org/Breadcrumb"><a
href="'.get_home_url().'" itemprop="url"><span
itemprop="title">HOME</span></a></li>';
$top_url = get_home_url(null,'/');

私のサイト仕様に修正後。
// ベースパンくず(サイト名など)
$base_breadcrumb = ‘<li itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”><a href=”http://hikarika.jp/kaomoji/” itemprop=”url”><span itemprop=”title”>顔文字シンプルHOME</span></a></li>’;
$top_url = get_home_url(null,’/’);

カスタム投稿タイプの場合、ホームURLがトップページへのリンクになってしまうため、手動で「<a href=”http://hikarika.jp/kaomoji/” itemprop=”url”>」と直打ちしました。

<span itemprop=”title”>HOME</span>だけでも良かったのですが、サイト名を表示させることによって訪問者によりわかりやすいよう<span itemprop=”title”>顔文字シンプルHOME</span>にしてみました。

上記コードをfunction.phpに書いて、更新しましょう!

パンくずリストを実際に設置

function.phpの更新が終わったら実際にパンくずリストを設置してみましょう。

<div id="pan_out">
<div id="pan">
<?php echo get_breadcrumb_list(); ?>
</div>
</div>

上記のコードをパンくずリストを表示するsingle.phpやpage.php、header.phpに書けばOKです。<?php echo get_breadcrumb_list(); ?>だけでもパンくずリストを設置できますが、CSSの関係上、divタグで囲われています。

CSSコード

私は上記のように少しカスタマイズしています。使用されるサイトデザインに合わせてCSSは調整されるほうが良いのかもしれません。

トップページにはパンくずリストを設置したくない

私はheader.phpにパンくずリストのコードを書くことにしましたが、トップページにはパンくずリストは必要ないのではないかと思いました。

トップページに戻るためのサイト構造であれば、トップページにはいらないですよね。トップページだけには表示されなくて、ほかのページに表示するために少し手を加えてみました。

カスタム投稿タイプの場合、少し面倒な処理をしないといけないのが難しいところです。もっと簡単に実現できる方法があるのだと思いますが、上記のコードだけでも理想とする場所にパンくずリストを設置することができました。

ざっくり解説。
<?php elseif(is_archive()): ?>に所に何も記載しないので、カスタム投稿タイプのトップページにはパンくずリストは出てきません。

ほかのis_pageやis_taxやis_singleにはパンくずリストのコードを入れることで、カスタム投稿内の固定ページやシングルページにはパンくずリストが出てきます。

理想とするパンくずリストを表現するのに苦労しましたが、プラグインを使うことなく理想とした思い通りのパンくずリストを作ることができて満足です。

 

 

 

ABOUT ME
ダイキチ(夫)
ダイキチ(夫)
ダイキチ(夫)です! 夫婦で1つのブログを運営しています。ヨメは主にブログ記事を投稿し、私はサラリーマンをしながら夜な夜なブログの構築したり記事を投稿したりしています。 ブログ収入を増やしてサラリーマンを引退するのが夢。記事を読まれた方、よろしければコメントください。もれなく私が喜びます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です