パラメータでカスタマイズしやすいパンくずナビをプラグインにしてみた

@miya0001 さんに、WordPressでパンくずリストを表示するためのプラグイン９個+1を検証で半ば強引に取り上げてもらったパラメータでカスタマイズしやすいWordPressのパンくずナビを作ってみたのコードを一部デバッグして、さらに簡単に使えるようプラグインにしてみました。

とりあえずプラグイン化しただけなので、国際化とかはまだですし、サンプルとなるCSSなども全然作っていませんが、それについても追って公開していきたいと思います。
ただし、Breadcrumb NavXTとの差別化もあって管理画面などの実装は今のところ考えていません。

Download
Prime Strategy Bread Crumb 1.0.0

フィードバックがあれば、是非お寄せ下さい。

使い方

  1. 上記のダウンロードリンクより、プラグインのアーカイブファイルをダウンロードし、解凍後、プラグインディレクトリにアップロードしてください。
  2. プラグイン管理画面より、Prime Strategy Bread Crumbを有効化してください。
  3. テンプレートファイルのパンくずナビを表示したい箇所に、パンくずナビのテンプレートタグを追加してください。パンくずナビの表示は、テンプレートタグのパラメータで色々と変更ができます。パラメータについては、指定可能なパラメータを参照してください。

テンプレートタグ

デフォルトパターン

<?php if ( function_exists( 'bread_crumb' ) ) { bread_crumb(); } ?>

<ul class="bread_crumb">
	<li class="level-1 top"><a href="http://www.example.com/">トップページ</a></li>
	<li class="level-2 sub"><a href="http://www.example.com/category/honda/">HONDA</a></li>
	<li class="level-3 sub"><a href="http://www.example.com/category/honda/sports/">スポーツ</a></li>
	<li class="level-4 sub"><a href="http://www.example.com/category/honda/sports/coupe/">クーペ</a></li>
	<li class="level-5 sub tail current">インテグラ</li>
</ul>

文字列形式

<?php if ( function_exists( 'bread_crumb' ) ) { bread_crumb( 'type=string' ); } ?>

<a href="http://www.example.com/">トップページ</a> &gt; <a href="http://www.example.com/category/honda/">HONDA</a> &gt; <a href="http://www.example.com/category/honda/sports/">スポーツ</a> &gt; <a href="http://www.example.com/category/honda/sports/coupe/">クーペ</a> &gt; <strong class="current">インテグラ</strong>

指定可能なパラメータ

type
stringを指定すると、リストではなく文字列として出力します。デフォルトはlist
home_label
トップページの表示テキスト。デフォルトは「トップページ」
search_label
検索結果の表示テキスト。デフォルトは「『%s』の検索結果」（%sが検索文字列）
404_label
404ページの表示テキスト。デフォルトは「404 Not Found」
category_label
カテゴリーの表示テキスト。デフォルトは「%s」（%sがカテゴリー名）
tag_label
投稿タグの表示テキスト。デフォルトは「%s」（%sが投稿タグ名）
taxonomy_label
カスタムタクソノミーの表示テキスト。デフォルトは「%s」（%sがタクソノミー名）
author_label
寄稿者の表示テキスト。デフォルトは「%s」（%sが寄稿者名）
attachment_label
アタッチメントの表示テキスト。デフォルトは「%s」（%sがアタッチメント名）
year_label
年の表示テキスト。デフォルトは「%s年」（%sが年の数字）
month_label
月の表示テキスト。デフォルトは「%s月」（%sが月の数字）
day_label
日の表示テキスト。デフォルトは「%s日」（%sが日の数字）
joint_string
typeでstringを指定した場合の結合文字列。デフォルトは「&gt;」（>）
navi_element
ラッパー要素名。divまたはnavを選択可能。デフォルトは空（要素無し）
elm_class
ラッパー要素のクラス名。ラッパー要素がなくタイプがリストの場合は、ulのクラス名となる。デフォルトは、「bread_crumb」
elm_id
ラッパー要素のid名。ラッパー要素がなくタイプがリストの場合は、ulのid名となる。デフォルトは、空。（idなし）
li_class
タイプがリストの場合のliに付くクラス名。デフォルトは空（なし）
class_prefix
各クラスに付く接頭辞。デフォルトは空（なし）
current_class
表示中のページのパンくずナビに付与されるクラス名。デフォルトは「current」
indent
タブでのインデント数。デフォルトは０。
echo
出力を行うか。デフォルトはtrue（出力する）。0またはfalseの指定でPHPの値としてreturnする。

更新履歴

2011.08.08 ver. 1.0.0
カスタム投稿タイプアーカイブ表示時の対応を追加。公式ディレクトリにて公開
2011.07.12 ver. 0.8.1
テンプレートタグでパラメータの指定が無かった場合にNoticeエラーが出ていた問題を修正
デフォルトパーマリンクでmパラメータに対応できていなかった問題を修正
2011.06.30 ver. 0.8.0
プラグイン化

「パラメータでカスタマイズしやすいパンくずナビをプラグインにしてみた」への41件のフィードバック

  1. ピンバック: WordPressのパンくずプラグイン「Prime Strategy Bread Crumb」を試してみた | ウェブサイト制作をもっと知る-anque

  2. パンくずナビ使わせていただいておりますが、IE8のみページとページの間の＞が出ません。
    例）：top > style(←>が抜けてしまう)
    CSSは
    #bread-crumb {
    font-size: 95%;
    padding: 1px 0 10px;
    }

    #bread-crumb ul {
    margin: 0;
    }

    #bread-crumb ul:after {
    clear: both;
    content: ” “;
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
    }

    #bread-crumb li {
    float: left;
    }

    #bread-crumb li.sub {
    padding-left: 10px;
    }

    #bread-crumb li.sub:before {
    letter-spacing: 10px;
    content: “>”;
    }

    です。
    safari,firefoxなら問題なく使えています。
    他のプラグインとの絡みでしょうか。。

  3. パンくずリストを入れてみたくて、こちらのプラグインに辿り着きました。
    導入は簡単で、とても便利なのですが、
    パンくずリストにリッチスニペットを入れたいと考えています。

    現在は、記事投稿時に手打ちで入れていますが、
    Breadcrumb NavXTのように管理画面がないので
    ファイルのどこにタグを追加すれば可能なのでしょうか？

    HTMLやCSSは多少理解していますが、
    phpは全くわからず、勝手にいじってみましたがエラーが出てしまいました。

    本来なら自分で勉強しなくてはいけない部分ですが、
    もしご教授いただけたらと思いまして書き込みさせて頂きました。

    リッチスニペットを入れたい部分は、カテゴリーと投稿ページです。
    よろしくお願い致します。

  4. やゆよさん、どうもです。

    以下のページでの、microdata もしくは、​RDFa でのマークアップにしたいということですね。

    http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=185417

    現バージョンですと、多少残念ではありますが、prime-strategy-bread-crumb.php のソースを直接編集してしまうのが、最も近道かもしれません。
    ファイルの107行目から143行目がリストタイプの html を作っている部分で、このうち116行目から140行目までの foreach の括りの部分で、パンくずの各要素を作っています。

    この foreach の開始直後（116行目のあと）に

    $output .= "<!-- item start -->\n";

    を追加すると、li タグの前に追加したコメントが出力されるようになります。この要領で、まずはリッチスニペットのサンプルとなるソースを追加してみて、可変となる箇所を置き換えていけば、実現できるはずです。

    もっとも、この要望はやゆよさん以外にもあると思いますので、次バージョンでは、表示タイプの１つとして採用するか、カスタマイズしやすいようにしたいと考えています。
    以上、概略レベルではありますが、どうぞよろしくお願いします。

  5. 早速のご回答ありがとうございます！

    細かく書いていただいたので、
    まずは自分でmicrodataで入れてみたいと思いますが、
    次のバージョンも楽しみにしております。
    本当にありがとうございました。

  6. stringで出力かつ、div要素で囲みたいため下記のように記述しました。
    すると、閉じタグだけ生成され表示が崩れてしまいました。

    bread_crumb( “navi_element=div&type=string” );

    おこないたい表示は、関数の前後でechoしてやればいいだけの話なのですが、
    バグかもしれませんので念のため報告まで。

  7. 本日何度もすみません。
    投稿の子カテゴリの先頭に漢字をいれると記事ページに表示されませんでした。
    そちらで現象は再現するでしょうか？

    [カテゴリ設置例]
    最新情報（親）　→○
    　　アップデート　→○
    　　雑談　→×
    　　その他　→○
    　　他その　→×

  8. こんにちは。現在「WordPressの教科書」を購入し、WordPressでのコーポレートサイト作成を学んでおります。

    こちらのパンくずナビプラグインをP140の通りに導入致しましたが、IE８では問題なく機能するのですが、chromeとfirefoxでは固定ページの子ページで表示されているパンくずナビをクリックすると、投稿カテゴリーにリンクされてしまいます。（Safariは未検証です。）

    素人質問で申し訳ありませんが、解消方法をご教授いただけると幸いです。
    どうぞよろしくお願い致します。

  9. こんにちは。
    自作でパンくずリストを作ろうとして断念し、こちらにお世話になる事にしました。
    素晴らしい物を作って下さりありがとうございます！

    表示について質問があります。
    —-
    カスタム投稿タイプ　”果物”
    タクソノミー　”南国”
    記事　”バナナ”
    —-
    としている場合、記事のページのパンくずには

    HOME>果物>南国>バナナ

    と表示されるのですが、南国をクリックすると

    HOME>南国

    となってしまいます。これを

    HOME>果物>南国

    とゆう表示にする事はできますか？
    因に、果物のhierarchicalはfalseになっています。
    ご回答宜しくお願いします。

  10. 大変便利なプラグインをありがとうございます。
    質問なのですが、アーカイブで

    トップページ＞2013年＞1月

    と、パン屑が自動で作成されますが、「2013年」を非表示にしたいのですが、可能でしょうか？
    何卒ご教授をお願いもうしあげます。

コメントを残す

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