記事に設定したカテゴリが複数ある場合「パンくず」を全件表示させる

公開日 2014/09/30 更新日 2014/12/28

WordPressのSTINGERテンプレートでは、パンくずリスト(ブレッドクラム / トピックパス)が記事の一番上に表示されています。

しかしながらSTINGERでは、記事に割り当ててあるパンくずリストのうち、1件分しか表示することが出来ません。
今回このパンくずリストとして、記事に割り当ててある全件を表示させる修正についてまとめたいと思います。

Information

こちらの記事(パンくずリストをもっとカッコよくする)で、本記事の改善を含む、さらにたくさんの改善をしています。今のところすべての改善を含んでいます。良かったらこちらも御覧ください。

Contents

1 STINGERにおけるパンくずリストについて
2 パンくずリストを調べてみました
3 STINGERの現在のパンくずリスト表示処理
- 3.1 マーク行の補足
4 変更内容
- 4.1 マーク行の補足
- 4.2 関連修正
5 変更後の感触

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ファイルより以下の様な抜粋箇所になります。

          <!--ぱんくず -->
          <div id="breadcrumb">
            <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">ホーム</span> </a> &gt; </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>
          <!--/ ぱんくず -->

<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ファイル該当箇所を以下のように変更することで複数カテゴリの表示が実現します。

          <!--ぱんくず -->
<?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){ ?>
              &gt;
              <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
} ?>
          <!--/ ぱんくず -->

<?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 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){ ?>

<a href="<?php echo get_category_link($catid); ?>" itemprop="url">

</a>

<?php

}

foreach($allcats as $catid){ ?>

</div>

<?php

} ?>

</div>

<?php

} ?>

マーク行の補足

4行目「foreach($postcats as $postcat){」
記事の所属するカテゴリーすべてを順番にループするように変更しました。
19行目「<div itemprop=“child” ・・・」
参考ページに従い、2つ目以降のパンくずリストの階層ではitemprop=”child”を付加するように変更しました。

変更後の感触

この修正により単一記事のページにおいて、所属する分だけのカテゴリを表示するようになります。
数が多くなるとだいぶデザインが崩れてしまいますが、多くてもせいぜい3件ぐらいかと思いますので、個人的にはギリギリ許容範囲だと思ってます。

ただしGoogleの検索結果としては、残念ながら(おそらく)最初の1つ分しか表示してくれないようです。
これについてはマイナス効果ではなく、あくまでも現状維持であると思えば、まだギリギリセーフじゃないでしょうか…。

記事を読んでみると、カテゴリが一覧されていることで、もともと記事を書いている段階で与えた意味というのが素直に表示されているということに気が付きます。
そのため、貴重な情報が目に入るようになったということから、次回以降もきちんとカテゴリを割り当てるような力が働くので、より一層ブログ内が整理されていく気がしてきました！