【WordPress】カスタム投稿タイプ、リッチスニペットに対応したパンくずリストを表示する

パンくずリストを表示する関数を自作してみました
新たにリッチスニペットやカスタム投稿に対応した、多様なオプション設定できるパンくずリストを自作してみました。
[WordPress]パンくずリストを表示する関数を自作しました!リッチスニペットやカスタム投稿に対応してます
photo credit: shutterbean via photopin cc
photo credit: shutterbean via photopin cc

プラグインを使わずにWordPressサイトにパンくずリストを表示するソースコードです。

カスタム投稿タイプ、リッチスニペットに対応していますが、カスタム投稿タイプの年月日アーカイブに関してはパーマリンク関係が面倒なため、プラグイン『Custom Post Type Permalinks』を有効化していること前提のソースコードになっているので注意です。(このプラグインを有効化しているとカスタム投稿タイプのパーマリンクを最適化してくれるので便利です)

参考になったページ

ソースコードの前に参考になったページをご紹介。参考になったどころか殆どの部分を流用しているので…。以下のページのソースコードを書き換えさせて頂きました。

僕もWebデザインレシピさんの記事『パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない(コード 付き)』に記述されてあるソースコードを書き換えて使っていたのですが、カスタム投稿タイプに対応したソースコードが無いかと調べていたら見つかった記事です。

Web Design Leavesさん、Webデザインレシピさんに感謝!(地面に頭を付けて土下座しながら)

パンくずを表示するソースコード

それではソースコードについて。以下に表示する3つの関数をfunctions.phpに貼り付けてください。

まずはパンくずリスト表示用の関数です。

次に最下層のカテゴリーを返す関数です。

最後に最下層のタクソノミーを返す関数です。

使い方

上記3つの関数をfunctions.phpに記述し、パンくずリストを表示したいテンプレートに下の1行を貼り付けて使います。

引数に配列でパラメータを渡せる仕組みになっています。指定方法についてはソースコードの参考ページをご覧下さい。

付け加えた4つの機能

参考にしたソースコードに僕が付け加えた機能は

  • セパレータの有無の設定
  • 最下層のliタグのテキストを任意のタグで囲む設定
  • カスタム投稿タイプの年月日アーカイブ時のリンク出力
  • リッチスニペットをタグに追加出来るパラメータ

の4つです。

セパレータの有無の設定

デフォルトだとセパレータ(区切りのタグ)は表示する設定になっていますが、もし区切りタグを表示したくない場合は以下のように記述します。

僕の場合、パンくずリストの区切りはCSSの擬似要素「:before」で表示していたので、パラメータを渡すことでタグを出力しないように出来る機能を付け加えました。

最下層のliタグのテキストを任意のタグで囲む設定

この機能は主にパンくずリストの最下層にstrongタグを追加するか、しないかのために付けました。もしstrongタグで囲まない場合は以下のように記述します。(strongタグ以外にも「em」と書けばemタグでテキストを囲めます)

なぜ最下層のテキストにstrongタグを付けるのかといえば、SEO対策の本を読んで以来僕が盲目的に行っているからです。

この記事を書いている最中に「でもブログだったら記事中にstrongタグ入れたほうが良いのかな?」って思ったので臨時で追加した機能です。(strongタグについてはこちらの記事『【あなたのサイトはスパムです】SEO対策における< strong>タグの使い方』が参考になります)

カスタム投稿タイプの年月日アーカイブ時のリンク出力

カスタム投稿タイプの年月日アーカイブ時にリンクを出力するようにしています。ただし、冒頭でも述べたとおり「Custom Post Type Permalinks」を有効化していなければリンクがおかしくなるので注意して下さい。

インストールは簡単で、管理パネルの「プラグイン > 新規追加」から検索すると見つかるのでこちらからダウンロードします。有効化するだけで年月日アーカイブのパーマリンクを最適化してくれます。(もし有効化してもリンクがおかしい場合はパーマリンクの設定を上書き保存してみて下さい)

カスタム投稿タイプを実装していない場合、このプラグインは入れなくても問題なく動くと思うので大丈夫です。

リッチスニペットをタグに追加出来るパラメータ

リッチスニペットと言ってますが、実際の所リッチスニペット以外の属性を追加出来ます。(全てのli、a、spanタグ各々に属性、というか文字列を追加出来る仕様です。あまり動的な値は指定出来ませんが^^;)

リッチスニペットは「Data-Vocabulary.org」に対応した設定を予め記述してあります(デフォルトのパラメータに指定してあります)。もしリッチスニペットを外したい場合は以下のようにパラメータを渡してください。

Schema.org」用の記述もしてありますが、schema.orgに対応するにはサイトのテンプレートに追加で必要な記述があります。僕の例ですが、bodyタグのソースコードを以下のようにしています。

schema.orgのパンくずリストのリッチスニペットは、「http://schema.org/WebPage」で囲まれた中のパンくずリストのタグに itemprop=”breadcrumb”を記述するだけでOKです(今の所は)。「itemref」にパンくずリストのolタグに指定してあるID「breadcrumbs」を入力することで参照しています。

リッチスニペットについてちょっと余談

余談ですが、Data-Vocabulary.orgは既にサービスが終了していて、現在はschema.orgがそのサービスを引き継いているようです。

何が言いたいかというと、「Data-Vocabulary.org」は既に終了し、役割は「スキーマ」に引き継がれているということです。Googleが今までサポートしてきた「Data-Vocabulary.org」の記法をいきなり無効にするようなことはないでしょうが、今後は「スキーマ」が主流になるはずです。

「だから安心してスキーマ学ぼうぜ!」ってことですねー。

参考: 『初心者向けスキーマ(Schema.org)!マークアップを解説!

しかし、Googleの検索結果ではまだData-Vocabulary.orgが認識されているのが現状です。なのでソースコードでは両方の記述をしています。将来修正する面倒を省くことも考えてパラメータで消せるようにしておきました。

最終更新日:2015年8月3日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

  • ぬるぽん@2合

    初めまして。

    カスタム投稿タイプのパンくずリストを求めてこちらにたどり着きました。
    ありがたく使用させていただいています。

    本題ですが、タームが未選択状態になっている場合にエラーとなるので、一部修正していただければと思います。

    エラー箇所:97行目から
    // タームが未選択だとfalseが返ってきます
    $taxes = get_the_terms($post->ID, $mytax);

    // ここの部分を以下に修正
    $tax = $taxes ? get_youngest_tax($taxes, $mytax ) : null;

    // 条件分岐を追加
    if( !empty($tax) ) {
    if($tax -> parent != 0){
    $ancestors = array_reverse(get_ancestors( $tax -> term_id, $mytax ));
    foreach($ancestors as $ancestor){
    $str.=’‘. get_term($ancestor, $mytax)->name . ‘‘;
    $str.= $separatorHTML;
    }
    }
    $str.=’‘. $tax -> name . ‘‘;
    $str.= $separatorHTML;
    } // !empty($tax)

    ==============
    今のところこれでエラーを回避してます。

    • ぬるぽん@2合さん

      こちらこそ初めまして!また、コード修正のコメントありがとうございますm(__)m
      早速コード内容に反映させていただきました。

      ちなみに自分は今、当記事のコードより簡易的なバージョンの自作パンくずリストを使用しています。(ただコチラはカスタム投稿タイプ&日付アーカイブは対応していないので状況に応じて使い分けてます)
      もし宜しければご一読下さい。こちらもどこか間違っている可能性は否めませんけど…^^;
      https://increment-log.com/wordpress-breadcrumb-function/

トラックバック

    Trackback: https://increment-log.com/wordpress-breadcrumb/trackback/