キャリコ

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

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

      2014/10/11

Photo credit : bluesyemre

Photo credit : bluesyemre

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

マンチェスターからモスクワのドモジェドヴォ国際空港に飛び、トランジット1回で成田空港へ到着するルート。この時期はヨーロッパからだと5~6万円は当たり前で、最安でも4万円台のチケットがドイツであるくらいです。なのにロシア経由だとこんなにも航空券代が安くなるなんて驚きです!さて、本日はパンくずリストについです。それじゃあラテ、よろしくね♪

こんにちは、ラテにゃ。

キャリコでタグを導入したから単一記事のパンくずリストにも表示することにしたにゃ。今までタグの概念がなかったから使い方がいまいちよくわからなかったけど、何となくこれでいいのかなってレベルで使い始めたら意外と便利だったにゃ。今回はキャリコの場合ということでパンくずリストにタグも表示させる方法スタートにゃ。

Ads by Google

パンくずに並べる項目を決める

WordPress はもともと階層が深くないから、よほど子カテゴリを作らない限り、並べる項目は決まってるにゃ。

ホーム

ブログタイトルにリンクしてあるから、なくてもいいような気もするけど、あった方がよりわかりやすいということで採用したにゃ。

親カテゴリ

キャリコでは記事が子カテゴリを持った親カテゴリに属する場合、親カテゴリにチェックは入れずにカテゴライズしてるにゃ。

子カテゴリ

親カテゴリを持っている場合、記事はすべて子カテゴリにカテゴライズしてるにゃ。

タグ

タグでより細かく記事の内容を分けようと思ってるけど、今のところ子カテゴリと同名のタグが存在するにゃ… この辺の使い方がまだ定まってないけど、今はとりあえず気にせず進めるにゃ。

パンくずのデータを取得する

ホーム

PHP でトップページの URL を取得して、ホームというテキストにリンクさせたにゃ。

親カテゴリ

2~11行目で親カテゴリの URL を取得して、12~21行目で親カテゴリ名を取得して、1行目と22行目のリンクで囲ってあげてるにゃ。

子カテゴリ

これは現在のカテゴリの URL をテキスト付きで取得してるにゃ。

タグ

これでタグの URL をテキスト付きで取得してるにゃ。(”,’ ’) の部分はタグの前に何も表示しない、タグの後ろに半角スペースを入れる指定をしてるにゃ。(‘ここが前の部分’,’ここが後ろの部分’) という指定の仕方にゃ。

パンくずをリストで横並びにする

単一記事に追記

CSS に追記する

パンくずリストの項目の間には『 > 』を使って、最後の項目には付けないという指定をしたにゃ。色やフォントサイズなんかは STINGER5 の指定そのままを使ってるにゃ。

キャリコの場合

タグのデザインにだけ背景を付けてるにゃ。なんで?って言われたら何となくとしか答えようがないけど、今のところ子カテゴリとタグに重複してるものがあるから、差別化を図るためにと苦しい言い訳をしてみるにゃ ^^;

HTML

CSS

まとめ

まだまだカテゴリとタグの使い方に迷いがある感じだけど、最良の使い方が見つかるまではこれで行こうと思うにゃ。こうするのがいいよというのがあったら、コメント欄で教えてほしいにゃ。

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

ライター紹介

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

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

 - WordPress

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

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

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

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPress でレスポンシブ対応の無料テーマ【 Point 】を導入して困った5つのこと

他サイト運営で STINGER5 以外のテンプレートを本格的に扱い始めたキャリコ …

1
【 セキュリティ対策 】ロリポップの WordPress に不正なアクセスをされました

もう乗っ取られるのは嫌だ、キャリコ( @calicocatxyz )です。 みな …

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

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