このブログのテーマを再度リニューアル中です。
テーマを変えてからアクセスが大きく落ちたというのもあり、また、スマホ対応をきちんとしたいというのもあり。で、以前導入し、効果がなくて断念した「Stinger2」の後継である「Stinger3」をカスタマイズ中です。
いろいろあるのですが、その中でもいちばん気になった「パンくずリストの表示がおかしい」件を修正してみました。
カテゴリの下にサブカテゴリがあるような場合、例えば、このブログだと「Apple」-「iPhone/iPad」のような場合、「Apple」カテゴリを選ぶと、本来ならパンくずリストは
[bash]ホーム > Apple[/bash]
と表示されるはずですが、Stinger3の場合、
[bash]ホーム > Apple > iPhone/iPad >[/bash]
と表示されます。
ちなみに、このパンくずリストの「iPhone/iPad」というのは、指定したカテゴリ一覧で最初に表示されている記事のサブカテゴリです。
さて、このパンくずリストのコードを見てみます。
閲覧するファイルは”archive.php”です。
[php]
<div class="kuzu">
<?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> > </div>
<?php /*— カテゴリーが階層化している場合に対応させる — */ ?>
<?php $postcat = get_the_category(); ?>
<?php $catid = $postcat[0]->cat_ID; ?>
<?php $allcats = array($catid); ?>
<?php
while(!$catid==0) { /* すべてのカテゴリーIDを取得し配列にセットするループ */
$mycat = get_category($catid); /* カテゴリーIDをセット */
$catid = $mycat->parent; /* 上で取得したカテゴリーIDの親カテゴリーをセット */
array_push($allcats, $catid);
}
array_pop($allcats);
$allcats = array_reverse($allcats);
?>
<?php /*— 親カテゴリーがある場合は表示させる — */
$allcount = count($allcats);
$cnt = 0;
foreach($allcats as $catid): ?>
<?php if($allcount-1 == $cnt ) $arr = "";
else $arr = " >"; ?>
<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> <?php echo $arr; ?> </div>
<?php
$cnt++;
endforeach; ?>
</div>
</div>
<!–/kuzu–>
[/php]
“カテゴリーが階層化している場合に対応させる”とコメントしてある次の行から2行で、恐らく表示されているカテゴリのカテゴリIDを取得しているのではないか？と思います。
次のコードの下にデバッグ用のコードを入れてみましょう。
※ここで紹介するデバッグ用のコードはサイト上に変数や配列の値を表示させるものですので、本番環境では極力やらないようにして下さい。
(たまにうちのサイトではやってますが・・・)
[php]
<?php $catid = $postcat[0]->cat_ID; ?>
<?php echo "catid: " . $catid; ?>
[/php]
これで”$catid”の内容が分かります。やはり表示されているカテゴリのカテゴリIDを拾ってきているようですね。
しかし、WordPressの場合、グローバル変数の一つである”$cat”に同様の値が入っています。ので、この処理丸ごと不要です。
そうするとコードはこのように。
[php]
<div class="kuzu">
<?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> > </div>
<?php /*— カテゴリーが階層化している場合に対応させる — */
$catid = $cat;
$allcats = array($catid); ?>
<?php
while(!$catid==0) { /* すべてのカテゴリーIDを取得し配列にセットするループ */
$mycat = get_category($catid); /* カテゴリーIDをセット */
$catid = $mycat->parent; /* 上で取得したカテゴリーIDの親カテゴリーをセット */
array_push($allcats, $catid);
}
array_pop($allcats);
$allcats = array_reverse($allcats);
?>
<?php /*— 親カテゴリーがある場合は表示させる — */ ?>
<?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>
</div>
<?php endforeach; ?>
</div>
</div>
[/php]
“$cat”はグローバル変数のため、直接触るのが少々危険です。なので、念のために”$catid”に代入し、こちらを使います。
上記は少しだけphpコードの一部分を私が分かりやすく変更しています。
変更はこれだけです。
元のコードの場合、カテゴリ一覧に表示される最初の記事のカテゴリIDを引っ張ってきているため、実際に表示したいカテゴリよりも深いカテゴリ名がパンくずリストに表示されてしまいます。
これを、実際に表示されているカテゴリのカテゴリIDに変更することで、正常に表示されるようになりました。
更に個人的に気になっているのが、最後の”>”です。これ、本来ならいらないでしょう。
ロジックを見ると、カテゴリ名の最後には必ず”>”が付くようになっていますので、これを修正してみます。
[php]
<?php /*— 親カテゴリーがある場合は表示させる — */
$allcount = count($allcats);/* $allcats内の配列の数を$allcountへ代入 */
$cnt = 0;/* フラグの初期化 */
foreach($allcats as $catid): ?>
<?php if($allcount-1 == $cnt ) $arr = "";/* 最後のカテゴリ名だったら、$arrを空にする */
else $arr = " >"; /* 最後でなければ、$arrに">"を代入 */ ?>
<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> <?php echo $arr; ?> </div>
<?php
$cnt++; /* フラグを+1する */
endforeach; ?>
[/php]
元のコードから一部だけ抜いて、修正したコードを入れ込んでいます。
実際にarchive.phpに設置する場合はコメント(“/* 〜 */”の中)は消してもらった方がいいかもしれません。
single.phpにも同様のコードがあるかと思いますが、こちらはカテゴリではなく記事の表示となりますので、”$cat”変数は生きていません。ですので、カテゴリ名については変更の必要はありません。
最後の”>”については変更可能です。
(記事のパンくずリストについては、一番最後に記事のタイトルを表示させたいのですが、そこまでやるとかなり規模が大きくなりそうなので、まだそこまでカスタマイズしてません)
ちなみに、カスタム投稿タイプなどには対応出来てないと思います。
今のところ自分自身でそのような用途に使ってないので、対応方法は未定です。
プラグインを使う方法などもあるかと思いますので、参考にされて下さい。
WordPressテーマ「Stinger」をカスタマイズ #3 パンくずナビをちゃんと表示する | のぶろぐ
[tmkm-amazon]4844335677[/tmkm-amazon]
