Codeworks Notes

 2020-04-14

 2020-04-25

Wordpress
バックエンド

パンくずリストの作り方

パンくずリストとは

パンくずリストは Web ページの上部（だいたいはヘッダーの直下）に置かれるページナビゲーションのひとつです。

ホーム > カテゴリ > 記事の名称

のような感じで表示されるやつですね。
必ず設置しなければいけないものではありませんが、あると便利さが向上しますし、「きっちりしているサイト」と認知されやすくなります。

パンくずリストの効果

顕著なのは「いま Web サイトのどこに居るか分かる」という点です。
トップページから何のカテゴリの中のどの記事にアクセスしているかを追うことがができ、上の階層へ飛ぶこともできるので、ページ数が多いサイトでも「迷子になりにくい」ことが特徴です。

設置方法

いくつかあります。

  • プラグイン「 Breadcrumb NavXT 」を使う
  • functions.php に記述する

プラグイン「Breadcrumb NavXT」を使う

パンくずリストの金字塔みたいな定番プラグインです。
「 Breadcrumb NavXT 使い方」などで Google 検索すればたくさん出てくるので、急ぎの場合はそれを参考にしても良いでしょう。

functions.php に記述する

仕組みからしっかり理解したい場合は実際にコードを組んでみましょう。
クラスや記載のしかたを自分で決められるのでデザインもしやすいです。

コード記述例

あとで簡単に解説します。
すぐに使いたい場合はこのままコピってください。

<?php
function breadcrumb() {
	$home = '<li><a href="'.get_bloginfo('url').'" >Home</a></li>';
  
	echo '<ul>';
	if ( is_front_page() || is_home() ) {
		// トップページの場合
	}
	else if ( is_category() ) {
		// カテゴリページの場合
		$cat = get_queried_object();
		$cat_id = $cat->parent;
		$cat_list = array();
		while ($cat_id != 0){
			$cat = get_category( $cat_id );
			$cat_link = get_category_link( $cat_id );
			array_unshift( $cat_list, '<li><a href="'.$cat_link.'">'.$cat->name.'</a></li>' );
			$cat_id = $cat->parent;
		}
		echo $home;
		foreach($cat_list as $value){
			echo $value;
		}
		the_archive_title('<li>', '</li>');
	}
	else if ( is_archive() ) {
	// タグページ・月別アーカイブの場合
	echo $home;
	the_archive_title('<li>', '</li>');
	}
	else if ( is_single() ) {
	// 投稿ページの場合
	echo $home;
	$cat = get_the_category();
		if( isset($cat[0]->cat_ID) ) $cat_id = $cat[0]->cat_ID;
		$cat_list = array();
		while ($cat_id != 0){
			$cat = get_category( $cat_id );
			$cat_link = get_category_link( $cat_id );
			array_unshift( $cat_list, '<li><a href="'.$cat_link.'">'.$cat->name.'</a></li>' );
			$cat_id = $cat->parent;
		}
		foreach($cat_list as $value){
			echo $value;
		}
		the_title('<li>', '</li>');
	}
	else if( is_page() ) {
	// 固定ページの場合
	echo $home;
	the_title('<li>', '</li>');
	}
	else if( is_search() ) {
	// 検索ページの場合
	echo $home;
	echo '<li>「'.get_search_query().'」の検索結果</li>';
	}
	else if( is_404() ) {
	// 404ページの場合
	echo $home;
	echo '<li>ページが見つかりません</li>';
	}
	echo "</ul>";
}
?>

呼び出し方法

極めて簡単です。breadcrumb(); で呼ぶだけです。

<div class="breadcrumb">
  <?php breadcrumb(); ?>
</div>

解説・補足

実際の表示はこうなる。
思い描いているのと違うときは理想形に置き換えて考える。

対象パンくずリスト
トップページ表示しない
カテゴリーページHOME > カテゴリー名
月別アーカイブHOME > 日時
タグページHOME > タグ名
投稿ページHOME > カテゴリ名 > タイトル
固定ページHOME > タイトル
検索ページHOME > 「キーワード」の検索結果
404 ページHOME > ページが見つかりません

基本構造はこうなってる

「 breadcrumb 」という関数を作ります。
表示ページの種類ごとに表示する内容を合わせていきます。
同時に、条件分岐に使用される WP 関数をおさらいしましょう。

<?php
function breadcrumb() {
	$home = '<li><a href="'.get_bloginfo('url').'" >Home</a></li>';
  
	echo '<ul>';
	if ( is_front_page() || is_home() ) {
		// トップページの場合
	}
	else if ( is_category() ) {
		// カテゴリページの場合
	}
	else if ( is_archive() ) {
	// タグページ・月別アーカイブの場合
	}
	else if ( is_single() ) {
	// 投稿ページの場合
	}
	else if( is_page() ) {
	// 固定ページの場合
	}
	else if( is_search() ) {
	// 検索ページの場合
	}
	else if( is_404() ) {
	}
	echo "</ul>";
}
?>

トップページ表示時の処理

何もしません。
トップにも表示したい場合は Home と表示できるようにします。

カテゴリーページ表示時の処理

親カテゴリが存在した場合は「 親カテゴリ > 子カテゴリ 」と表示される設計にします。

$cat = get_queried_object();
$cat_id = $cat->parent;
$cat_list = array();
while ($cat_id != 0){
  $cat = get_category( $cat_id );
  $cat_link = get_category_link( $cat_id );
  array_unshift( $cat_list, '<li><a href="'.$cat_link.'">'.$cat->name.'</a></li>' );
  $cat_id = $cat->parent;
 }
 echo $home;
 foreach($cat_list as $value){
  echo $value;
 }
 the_archive_title('<li>', '</li>');

最初に親カテゴリを拾い、リンク付きでパンくずリスト表示できるようにします。拾われた親カテゴリを 1 つないし複数表示させるには foreach 文を使います。

foreach(展開したい配列 as $value){
    echo $value;
}

配列に入った値は個別に表示されます。このとき、親子関係のカテゴリーが 1 つも存在しなければ、the_archive_title() のみで出力します。

タグページ、月別アーカイブ表示時の処理

月別アーカイブとタグページは the_archive_title() で取得します。

echo $home;
the_archive_title('<li>', '</li>');

投稿ページ表示時の処理

「ホーム → カテゴリ → 記事タイトル」という表記されます。

echo $home;
$cat = get_the_category();
if( isset($cat[0]->cat_ID) ) $cat_id = $cat[0]->cat_ID;
$cat_list = array();
while ($cat_id != 0){
  $cat = get_category( $cat_id );
  $cat_link = get_category_link( $cat_id );
  array_unshift( $cat_list, '<li><a href="'.$cat_link.'">'.$cat->name.'/a></li>');
  $cat_id = $cat->parent;
}
foreach($cat_list as $value){
	echo $value;
}
the_title('<li>', '</li>');

固定ページ表示時の処理

「 Home > 固定ページ名 」と表記されます。

echo $home;
the_title('<li>', '</li>');

検索結果の表示時の処理

「 Home > 「○○」の検索結果」 と表記されます。
文体や調子は好きなように決めてください。

echo $home;
echo '<li>「'.get_search_query().'」の検索結果</li>';

404エラー表示時の処理

「 Home > ページが見つかりません」というように、ページが見つからない時にも表記させることができます。

echo $home;
echo '<li>ページが見つかりません</li>';

スタイルシートで整形する

リスト内の記号「 > 」は直接書かず、CSSの擬似要素で書きます。

ul{
  list-style: none;
  font-size: 84%;
}
li{
  display: inline;
}
li a{
  color: inherit;
  text-decoration: none;
}
li + li:before{
  content: ">";
  margin-right: .3em;
}

カテゴリやタグ名の表記について

ここまでの状態だと、カテゴリやタグ、月別アーカイブが以下のように表記されます。

  • カテゴリー：カテゴリ名
  • タグ：タグ名
  • 月別：2020年○月

この余計な「○○：」を表示させないようにしたいときは「カテゴリーやタグページの接頭語を削除する」をお試しください。