[WordPress]パンくずリストを表示する関数を自作しました!リッチスニペットやカスタム投稿に対応してます

  • 更新日:
  • 公開日:

以前に「【WordPress】カスタム投稿タイプ、リッチスニペットに対応したパンくずリストを表示する」といった記事を書きましたが、今回新たに自作で関数を用意しました。

ちなみになんで既にある関数を新たに自作したかというと、どうやら現在地を示すパンくずにもaタグでリンクを指定してリッチスニペットを記述しないとWebマスターツールでエラーがでる、という情報を何かの記事で見たことが発端でした(すみません、情報源の記事がどっか行ってしまいました)。ですので今回作成したパンくずリスト関数では現在地にもaタグとURL用リッチスニペットが指定され出力されます。

自分はWordPressやその他アプリ開発などで使用する独自関数やクラスはGistにメモし、それを「Code Snippet Manager | Gisto | Snippets made awesome | Manage your github gists on desktop」というソフトウェアでスニペットとして管理し、必要な場面でコピー&ペーストして効率化を測っています。

ですが、基本的にGistにメモしたスニペット群は非公開にしています(Gistの非公開はURLが漏れたら他人も見れる仕様です)。なので、今回のパンくずリスト関数は公開設定にすることにしました。また、Gistで管理しているので修正する度に以下のソースコードは新しくなります。

自作したパンくずリストはこちら

自作したパンくずリスト関数のオプションはカスタムメニューを実装するwp_nav_menu()のように連想配列で設定できるようにしています。(オプション内容もwp_nav_menuと似ています)

オプションはデフォルト設定しているのでサクッと使うのであれば

<?php breadcrumb(); ?>

の1行でOKです。オプション設定してパンくずリストのHTML構造を変更する例は

<?php
$args = array(
    'container'         => 'div',
    'container_id'      => 'breadcrumb',
    'crumb_tag'         => 'ol'
);
breadcrumb();
?>

こんな感じになります。オプションは他にもいくつかありますが、詳細はコードの頭でコメント記述しているので、こちらを参考にお願いします。

以下のコードをfunctions.phpに追記するとテンプレート上で使えるようになります。

現在地のパンくずにaタグでパーマリンクを設定するため入れ子(ネスト)した関数があります。ちょっとこれはプラクティスとしてどうなのか疑問に思ったのですが、一つの関数にまとめたかったので中に収めることにしました。

「現在地のパンくずをクリックして結局同じページに飛ぶのは何かイヤ!」という場合はCSSプロパティで”current-crumb”クラスにpointer-events: none;を指定するとクリック出来ないようにできます。(このプロパティはIEは11から対応ですが、モダンブラウザは対応してます)

あと、カスタム投稿タイプでかつ日付アーカイブの場合は上手く動作しない可能性があるかもです…。この辺りはアップデート予定ですね。


今回のパンくずリスト関数を公開した理由には2つありまして、1つは単純に記事を更新したかった、そしてもう1つは本命の「PHP上級者の誰か様がコードレビュー的なコメントをgistにしてくれたら嬉しいな」という卑しい気持ちからです。

photo credit: Sparrow via photopin(license)

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone