キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

WordPress パンくずリスト決定版!親子関係も作れる完璧なコードは Web デザインレシピに載ってた

      2014/11/02

ようやくカテゴリとタグの棲み分けがわかってきたキャリコ( @calicocatxyz )です。

そうなるとカテゴリもタグもすっきりして、テコ入れしたら少なくなっちゃいました。前のエントリーでパンくずリストの件について触れましたが、今回はパンくずリストの決定版ということでラテに説明してもらいます。それじゃあ、よろしくね♪

こんにちは、ラテにゃ。

実は前のエントリーの方法では親カテゴリと今いるカテゴリを表示させるから、親カテゴリに分類すると親カテゴリが2つ表示されてしまうという欠点があったにゃ。

だから親カテゴリには何も入れず子カテゴリにだけ分類してたんだけど、カテゴリー構造は検索エンジンにブログ構造を伝える意味もあるから重要だと教えてもらったにゃ。

これを踏まえて親子関係や孫が出来てもパンくずリストが綺麗に表示させられないかと調べていたら、もうこれ以上にないというコードを Web デザインレシピで発見したからお知らせするのと、キャリコ流の導入方法を紹介するにゃ。

Ads by Google

パンくずリストのコードを手に入れる

今回お世話になったのが Web デザインレシピにゃ。

この中で目次の11番目にある「 関数としてまとめる 」の最後に、見やすくておすすめとされてるコードがあるにゃ。

fanctions.php に追記する

このコードは WordPress のパンくずリスト決定版と言っても過言じゃないほど完成されたもので、このまま fanctions.php にコピペして貼り付けるだけでオッケーにゃ。

パンくずリストの表示方法

パンくずを表示させたい場所に、この1行を追加するだけで表示されるにゃ。

ただ、キャリコ的には「 > をリストで表示したくない 」のと「 タグも表示させたい 」ことから、このパンくずリストを基にカスタマイズしたにゃ。

キャリコ流パンくずリストのカスタマイズ

「 > 」を疑似クラスを使って表示させる

「 > 」の指定を削除する

まずはリストで「 > 」の指定がある部分を探すにゃ。1か所だけ半角スペースが入ってるから「 '<li>&gt;</li>'; 」で検索して「 $str.= '<li>&gt;</li>'; 」この記述を削除すればオッケーにゃ。
※パンくずリストの13行目、21行目、32行目、43行目、50行目、52行目、56行目

CSS で指定する

キャリコのパンくずリストの指定

これでリストを使って「 > 」表示させてたものを、疑似クラスを使って表示させることが出来たにゃ。

単一記事のパンくずリストにタグを表示させる

仕組みとしてはパンくずリストとタグをリスト指定して、それをブロック要素で囲っているにゃ。

  • <div>
  • <ul>
  • <li>パンくずリスト</li>
  • <li>タグ</li>
  • </ul>
  • </div>

タグを CSS で指定する

タグの装飾には「 tagbg 」とクラス名を指定したにゃ。

パンくずリストを CSS で指定する

外側で囲うブロック要素の id は「 breadcrumbs 」にしたにゃ。

single.php に記述する

これでパンくずリストの横にタグも表示させることが出来たにゃ。

まとめ

これで理想とするパンくずリストの表示をすることが出来たにゃ。細かい部分でいうと12行目の HOME をホームに変えたくらいで、パンくずリストに関してはこれでも永久に変えることはないと思うにゃ。

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - WordPress

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

WordPress でのファビコンやブックマークアイコンの設定方法
WordPress でのファビコンやブックマークアイコンの設定方法

時代は変わった、キャリコ( @calicocatxyz )です。 これまではファ …

Photo credit : bluesyemre
WordPress の単一記事でパンくずリストにタグも表示させる方法

イギリスから日本まで3万円で帰れるルートを発見して大喜びのキャリコ( @cali …

WordPress 専用の高速レンタルサーバーを比較!GMO WP Cloud と wpX レンタルサーバー
WordPress 専用の高速レンタルサーバーを比較!GMO WP Cloud と wpX レンタルサーバー

レンタルサーバー乗り換えを検討中のキャリコ( @calicocatxyz )です …

WordPress で一部のページにだけ外部ファイルを読み込ませる方法

ここのところ記憶に残る夢といえば泳いでるキャリコ( @calicocatxyz …

WordPress で複数のショートコードを作成する方法
WordPress で複数のショートコードを作成する方法

やっと謎が解決、キャリコ( @calicocatxyz )です。 これは絶対ショ …

超簡単! WordPress で404ページだけアドセンスを非表示にする2つの手順

アドセンスの配置で迷ってるキャリコ( @calicocatxyz )です。 巷で …

WordPress Popular Posts の人気記事サムネイルにランキングの順位をつける方法

ニンニクがないと生きていけないキャリコ( @calicocatxyz )です。 …

Photo credit : freepik
たった3行追加するだけ!パソコンとスマホの表示を別々にしてくれる分岐タグ

そろそろセントラルヒーティングを使ってもいいんじゃないかと思うキャリコ( @ca …

WordPress Popular Posts の人気記事一覧とは別に今見てるカテゴリの人気記事一覧も設置する方法

この調子だとイギリスの冬は越せないと思う、キャリコ( @calicocatxyz …

Wordpress 初心者は必見!誰でもわかる「 条件分岐 」の超入門編
WordPress 初心者は必見!誰でもわかる「 条件分岐 」の超入門編

WordPress を使うようになってから PHP を扱うようになったキャリコ( …