ゆるくはじめるWordPress.

レスポンシブなパンくずリストをプラグイン無しで実装

bread-crumb-top

記事の場所を分かりやすく伝える事ができるパンくずリスト。記事ページにだけでも入れておきたいなと思う事もありますよね。そんな時プラグイン無しで、テンプレートタグを使って実装する方法をメモしておきたいと思います。
さらにレスポンシブデザインにも取り入れやすいよう、ウィンドウサイズが変わってもデザインを崩さないCSSもあわせて載せておきました。参考にどうぞ。

パンくずリストサンプル画像

パンくずリストサンプル パンくずリストレスポンシブ

記号で区切ったシンプルなパンくずリスト。親カテゴリーが設定されている場合は親カテゴリー名も表示されます。
ウィンドウ幅が狭まっても、入りきらないテキスト部分が”…”と省略され表示が崩れないので、レスポンシブデザインでも大丈夫。


単一記事ページ用コード

HTML&テンプレートタグ

<div class="bread">
<a href="<?php echo esc_url( home_url() ); ?>">HOME</a> &gt;
<?php $category = get_the_category(); echo get_category_parents($category[0], true, ' &gt; '); ?>
<?php the_title(''); ?>
</div>

1つの記事に複数カテゴリーが設定されている事も考慮して、get_the_category()で取得した配列の中から最初にあるカテゴリーを$category[0]で表示するようになっています。

CSS

.bread {
  background-color: #fff;
  padding: 0.75em 1.5em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

text-overflowoverflowwhite-spaceをこのように一緒に指定する事で入りきらない文字を省略表示します。
区切り文字の種類や、CSSの装飾部分はお好みで変更してください。HOMEをアイコンに変更するのもいいですよね。


アーカイブページに設置する例

archive.phpに設置する場合のコードを分岐と組み合わせた例です。カテゴリー部分のコードは下記サイトのものを利用させていただきました。
WordPressのカテゴリーアーカイブページでパンくずリストを表示する: 小粋空間

HTML&テンプレートタグ

<div class="bread">
<a href="<?php echo esc_url( home_url() ); ?>">HOME</a> &gt;
<?php if( is_category() ): ?>
<?php
$cat = get_queried_object();
$breadcrumbs = get_category_parents( $cat, true, ' &gt; ' );
echo preg_replace( '/(.*) &gt;/', '$1', $breadcrumbs );
?>
<?php else: ?>
<?php wp_title(''); ?>
<?php endif; ?>
</div>

こうやって分岐を挟んでおけばアーカイブの種類によって表示させる内容をコントロールできます。
タグなどは階層を表示する必要がないので、wp_title()でページのタイトルを出力するだけでも簡単で良いかと思いました。後は自分のサイトの構成に合わせて分岐を追加して使ってみてください。

スポンサーリンク

公開日:2016-2-13