記事に設定したカテゴリが複数ある場合「パンくず」を全件表示させる
公開日 更新日 2014/12/28
WordPressのSTINGERテンプレートでは、パンくずリスト(ブレッドクラム / トピックパス)が記事の一番上に表示されています。
しかしながらSTINGERでは、記事に割り当ててあるパンくずリストのうち、1件分しか表示することが出来ません。
今回このパンくずリストとして、記事に割り当ててある全件を表示させる修正についてまとめたいと思います。
Information
こちらの記事(パンくずリストをもっとカッコよくする)で、本記事の改善を含む、さらにたくさんの改善をしています。今のところすべての改善を含んでいます。良かったらこちらも御覧ください。
Contents
STINGERにおけるパンくずリストについて
STINGERのパンくずリストとは、記事が所属するカテゴリについての、サブカテゴリのネストで表される階層構造に対応しています。
ここでカテゴリやサブカテゴリの階層構造とは、WordPressの標準機能で提供されるカテゴリ機能そのものに対応しています。
そしてWordPressのカテゴリ機能では、記事が2つ以上のカテゴリに所属することを許可しています。
通常、カテゴリは記事に対して1つ割り当てるものと思いますが、2つ以上割り当てたい場合も当然あります。
ここで記事が2つ以上のカテゴリに所属してあった場合、STINGERでは一覧のうちの(おそらく)最初に検索できた1件分のみをパンくずリストとして表示しているようです。
パンくずリストを調べてみました
Googleで識別できるパンくずリストにはtitle, url, childの3つのプロパティで表現される情報を提供すれば良さそうです。
STINGERはこの内、titleとurlの2つを使っているようです。
ページ内にパンくずリストが1つだけだった場合は、STINGERと同じ形式でtitleとurlだけで表現することが可能なようです。
ページ内にパンくずリストが2つ以上ある場合は、childを使った所属関係を表現する必要があるようで、この場合は参考ページにある「パンくずリストがページ内に複数ある場合」の例の通りの出力となれば良さそうだとわかりました。
STINGERの現在のパンくずリスト表示処理
変更内容が多めになってしまうので、まず現在のSTINGERにおけるパンくずリストの表示処理についてですが、こちらはsingle.phpファイルより以下の様な抜粋箇所になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!--ぱんくず --> <div id="breadcrumb"> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">ホーム</span> </a> > </div> <?php $postcat = get_the_category(); ?> <?php $catid = $postcat[0]->cat_ID; ?> <?php $allcats = array($catid); ?> <?php while(!$catid==0) { $mycat = get_category($catid); $catid = $mycat->parent; array_push($allcats, $catid); } array_pop($allcats); $allcats = array_reverse($allcats); ?> <?php foreach($allcats as $catid): ?> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_category_link($catid); ?>" itemprop="url"> <span itemprop="title"><?php echo get_cat_name($catid); ?></span> </a> > </div> <?php endforeach; ?> </div> <!--/ ぱんくず --> |
マーク行の補足
- 4行目 「$postcat = get_the_category();」
テンプレートタグ/get the category
オブジェクト(カテゴリー)の配列を返します。各オブジェクトは現在の投稿が属するカテゴリーを表します。WordPressテンプレートタグのドキュメントより、get_the_categoryは記事が属するすべてのカテゴリーを取得して、これを$postcat変数に代入します。
- 5行目 「$catid = $postcat[0]->cat_ID;」
4行目で得られたカテゴリー一覧(配列)のうち0番目に格納されているカテゴリオブジェクトのみをパンくずリストの表示対象にしています。
ここを配列内のすべてのカテゴリを対象にすることで改善することが可能なようです。
変更内容
single.phpファイル該当箇所を以下のように変更することで複数カテゴリの表示が実現します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!--ぱんくず --> <?php $postcats = get_the_category(); foreach($postcats as $postcat){ $catid = $postcat->cat_ID; $allcats = array($catid); while(!$catid==0) { $mycat = get_category($catid); $catid = $mycat->parent; array_push($allcats, $catid); } array_pop($allcats); $allcats = array_reverse($allcats); ?> <div id="breadcrumb"> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">ホーム</span> </a> <?php foreach($allcats as $catid){ ?> > <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_category_link($catid); ?>" itemprop="url"> <span itemprop="title"><?php echo get_cat_name($catid); ?></span> </a> <?php } foreach($allcats as $catid){ ?> </div> <?php } ?> </div> </div> <?php } ?> <!--/ ぱんくず --> |
マーク行の補足
- 4行目 「foreach($postcats as $postcat){」
記事の所属するカテゴリーすべてを順番にループするように変更しました。 - 19行目 「<div itemprop=“child” ・・・」
参考ページに従い、2つ目以降のパンくずリストの階層ではitemprop=”child”を付加するように変更しました。
関連修正
こちらの記事(パンくずリストの最後の”>”を削除するカスタマイズ)で対策したパンくずリスト表示処理と、この記事の修正がほぼ同じ箇所を変更しています。
そのため、この記事で提示した修正コードにはリンク先の修正内容も(若干修正方法が異なりますが)含めています。
これは15行目と18行目で実現しています。
変更後の感触
この修正により単一記事のページにおいて、所属する分だけのカテゴリを表示するようになります。
数が多くなるとだいぶデザインが崩れてしまいますが、多くてもせいぜい3件ぐらいかと思いますので、個人的にはギリギリ許容範囲だと思ってます。
ただしGoogleの検索結果としては、残念ながら(おそらく)最初の1つ分しか表示してくれないようです。
これについてはマイナス効果ではなく、あくまでも現状維持であると思えば、まだギリギリセーフじゃないでしょうか…。
記事を読んでみると、カテゴリが一覧されていることで、もともと記事を書いている段階で与えた意味というのが素直に表示されているということに気が付きます。
そのため、貴重な情報が目に入るようになったということから、次回以降もきちんとカテゴリを割り当てるような力が働くので、より一層ブログ内が整理されていく気がしてきました!
レスポンシブ広告
関連記事
-
スクロールしても記事タイトルをずっと画面に固定表示するカスタマイズ(V3用)
WordPressのSTINGERテンプレートに対して、記事タイト …
-
スクロールしても記事タイトルをずっと画面に固定表示するカスタマイズ(V5用)
はじめに STINGER V3からV5にバージョンアップしたのが2014/9/ …
-
記事の幅を広げるカスタマイズ(V3用)
STINGERをインストールした状態だと、記事の幅が550pxになっています。 …
-
記事の幅を広げるカスタマイズ(V5用)
以前STINGER v3にて、こちらの記事(記事の幅を広げるカスタマイズ)で記事 …
-
記事一覧に表示する各記事の抜粋を綺麗に整形表示する
STINGERのホーム画面や月まとめ等のアーカイブ系のページに表示される記事一覧 …
-
CSSファイル数を減らしてページ表示時間を最適化
STINGERテンプレートの場合、ダウンロード対象のCSSファイルは2つあります …
-
記事一覧に表示する各記事の概要を「続きを読む」タグまでにする
Information この記事はSTINGER v3用のカスタマイズ方法です。 …
-
WordPressテーマをSTINGER5にバージョンアップ
STINGER配布サイトにて、STINGERのV5メジャーアップのアナウンスを発 …
-
パンくずリストをもっとカッコよくする
STINGERテンプレートは、WordPressサイトのテーマとし …
-
「続きを読む」ボタンのデザインをカスタマイズ
WordPressの醍醐味の一つ?であるだろうカスタマイズに着手しました。 巷で …
- PREV
- 記事の幅を広げるカスタマイズ(V5用)
- NEXT
- パンくずリストをもっとカッコよくする