1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. WordPress
  6. »
  7. 【WordPress】パンくずリストをプラグイン無しで自作する方法

【WordPress】パンくずリストをプラグイン無しで自作する方法


※追記(2018/2/12)
もっと高機能になるように、改良修正しました。


人生で3回ほど死にそうになったことがある@It_is_Rです。

WordPressのパンくずリストを作るにはプラグインを使えば簡単ですが、あまりプラグインばかりに頼りたくないので、自作してみました。
今回はその方法を書いていきたいと思います。

パンくずリストとは

まずパンくずリストを知らない方の為に、パンくずリストとはなんなのかを軽く説明したいと思います。

パンくずリストは、ユーザーが今開いているページが一体どこなのかを表示してくれるものです。
例えばブログの記事を開いている場合、

home > カテゴリー > 記事タイトル

といったふうに、ヘッダーの下辺りに表示されることが多いです。

どのようなパンくずリストを作るか

まず、どのようなパンくずリストを作りたいか考えてみます。

  • トップページにはパンくずリストは必要ない
  • カテゴリーページには、「HOME > (カテゴリー名)」と表示
  • 月別アーカイブページには「HOME > (日時)」と表示
  • タグページには「HOME > (タグ名)」と表示
  • 投稿記事ページには「HOME > (カテゴリー名) > (記事タイトル)」と表示
  • 固定ページには「HOME > (固定ページタイトル)」と表示
  • 添付ファイルページには「HOME > (記事タイトル) > (ファイルの名前)」と表示
  • 検索ページには「HOME > 検索 : (検索ワード)」と表示
  • 404ページには「HOME > ページが見つかりません」と表示

ざっと思いつくものをあげてみました。
こんな感じで作っていきましょう。

パンくずリストを作成する方法

では、パンくずリストを作成してみましょう。
パンくずリストを呼び出すmytheme_breadcrumb()という関数をfunctions.phpに作り、それぞれのページからそれを読み込むという方法にします。

もしもトップページにパンくずリストを表示させたくない場合、if ( !is_front_page() && !is_home() ) を使います。

functions.php

function mytheme_breadcrumb() {
	if ( !is_front_page() && !is_home() ) :

	endif;
}

このようにしておくと、トップページからパンくずリストを呼んでしまった場合に表示されなくなるので便利です。
が、トップページから呼び出さなければいいという考えもあると思います。

この条件分岐を使うか使わないかは自由です。

区切り文字の指定とトップページへのリンク

次に、それぞれのページを区切る文字を指定し、トップページへのリンクも作成します。
$sepには、区切り文字に使用したい文字を代入します。

functions.php

$sep = '>';
echo '<a href="'.get_bloginfo('url').'" >HOME</a>';
echo $sep;

この状態で実行すると、以下のようになります。

HOME>

ちょっとパンくずリストっぽくなってきましたね。

投稿記事ページ、固定ページ、添付ファイルページ

投稿記事ページ、固定ページ、添付ファイルページのタイトルは、どれもthe_title();で取得出力できるので、まとめて書いてしまいましょう。

全てのカテゴリーを取得してみる

まず、全てのカテゴリーを取得してみましょう。ちょっとパンくずリストっぽくなります。

functions.php

if( is_singular() ) {
	if ( is_single() ) {
		the_category(', ');
		echo $sep;
	}
	the_title();
}

1行目のis_singular()は、閲覧者が開いているページが投稿記事ページ、固定ページ、添付ファイルページだった場合の条件分岐に使えます。

2〜5行目で、閲覧者が見ているページが投稿記事ページだった場合に、カテゴリー名と区切り文字を表示します。

6行目で、閲覧者が見ているページタイトルを表示します。

投稿記事ページの場合のみ、カテゴリー名を表示します。
固定ページの場合はタイトルのみです。

先ほど、トップページへのリンクと区切り文字は作成したので、それと合わせて実行すると以下のようになります。
(投稿記事ページで実行した場合)

HOME>カテゴリー名,カテゴリー名,カテゴリー名...>記事タイトル

これで良ければ一番簡単な方法かもしれません。ただ、この方法では、記事が属するカテゴリーが全て表示されてしまうのでかっこ悪いです。

get_category_parents を使う方法

この方法ならば、親子関係もしっかりと表示されます。

functions.php

if( is_singular() ) {
	if ( is_single() ) {
		$cat = get_the_category();
		echo get_category_parents($cat[0], true, $sep);
	}
	the_title();
}

(投稿記事ページで実行した場合)

HOME>親カテゴリー名>子カテゴリー名>記事タイトル

では、生成されるコードを見てみましょう。

<a href="http://url.com" >HOME</a>
>
<a href="http://url.com/category/親カテゴリー/">親カテゴリー名</a>
>
<a href="http://url.com/category/親カテゴリー/子カテゴリー/">子カテゴリー名</a>
>
記事タイトル

一つ一つのカテゴリーが、aタグに入っている感じです。
ここで思うのは、このaタグをliタグに入れたい場合はどうすればいいんだということでしょう。

PHPで、文字を置き換えたりして実現する方法もあると思いますが、あまり気持ちのいい方法ではないですね。

get_the_category を使う方法

get_category_parents()は簡単にパンくずリストが作れて便利なのですが、思うようなタグが生成されないので、不便な部分もあります。
そこで、get_the_category()を使う方法を紹介します。

functions.php

function mytheme_breadcrumb() {
	$sep = '>';
	echo '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>';
	echo $sep;
	if( is_singular() ) {
		if ( is_single() ) {
			$cats = get_the_category();
			if( isset($cats[0]->term_id) ) $cat_id = $cats[0]->term_id;
			$cat_list = array();
			while ($cat_id != 0){
				$cat = get_category( $cat_id );
				$cat_link = get_category_link( $cat_id );
				array_unshift( $cat_list, '<a href="'.$cat_link.'">'.$cat->name.'</a>' );
				$cat_id = $cat->parent;
			}
			foreach($cat_list as $value){
				echo '<li>'.$value.'</li>';
				echo $sep;
			}
		}
		the_title('<li>', '</li>');
	}
}

7行目 : get_the_category()を使っています。これで投稿記事ページのカテゴリーを取得します。
8行目 : isset()を使い、$cats[0]->term_idがNULLでなかった場合、$cat_idに$cats[0]->term_idを代入します。
9行目 : ループに入る前に、配列を使う宣言をしておきます。
10行目 : $cat_idが0でない時、つまりカテゴリーが存在する場合はループします。
11行目 : get_category( $cat_id )で、カテゴリーIDから、カテゴリーの情報を取得します。
12行目 : get_category_link( $cat_id )で、カテゴリーIDから、カテゴリーページへのリンクを取得します。
13行目 : array_unshift()で、ループ前に宣言しておいた配列の一番前に、カテゴリーページへのリンクを入れていきます。
14行目 : 親カテゴリーIDを、$cat_idに代入します。こうすることで、ループごとに順番に親カテゴリーに登っていくことができます。
16〜19行目 : 配列に入れたリンクを、liタグ付きで出力します。

生成されたコード

<li><a href="http://url.local" >HOME</a></li>
>
<li><a href="http://url.local/category/親カテゴリー/">プログラミング・Web</a></li>
>
<li><a href="http://url.local/category/親カテゴリー/子カテゴリー/">WordPress</a></li>
>
<li>記事タイトル</li>

liタグ付きで生成してくれました。この場合、olやulタグから呼び出す必要があるので注意しましょう。

カテゴリーページや、月別アーカイブページ、タグページ

さて、カテゴリーページ、日時のページ、タグページのパンくずリストを作っていきます。

しかし、これらのページを一つずつ作っていく必要はありません。これらは全部アーカイブです。

functions.php

if ( is_archive() ) the_archive_title();

これで、現在のカテゴリー名、月別アーカイブ名、タグ名が取得できます。簡単ですね。

ただ、カテゴリーページに関しては、現在のカテゴリー名に加えて、その階層を表示させる必要があります。
つまり、現在のカテゴリーよりも上のカテゴリーを表示しなくてはなりません。

そこで、get_queried_object()を使います。

get_queried_object を使う方法

get_queried_object()を使い、現在のカテゴリーの情報を取得した後、その親のIDを取得します。

方法としては、現在のカテゴリーからの情報を取得するか、現在の親カテゴリーからの情報を取得するかの違いで、投稿記事ページで作ったものとほぼ同じです。

functions.php

function mytheme_breadcrumb() {
	$sep = '>';
	echo '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>';
	echo $sep;
	if ( is_category() ) {
		$cats = get_queried_object();
		$cat_id = $cats->parent;
		$cat_list = array();
		while ($cat_id != 0){
			$cat = get_category( $cat_id );
			$cat_link = get_category_link( $cat_id );
			array_unshift( $cat_list, '<a href="'.$cat_link.'">'.$cat->name.'</a>' );
			$cat_id = $cat->parent;
		}
		foreach($cat_list as $value){
			echo '<li>'.$value.'</li>';
			echo $sep;
		}
	}
	if ( is_archive() ) the_archive_title('<li>', '</li>');
}

検索ページ

検索ページのパンくずリストは、次のように入力します。

functions.php

if( is_search() ) echo '検索 : '.get_search_query();

これで検索したワードが出力されます。

404ページ

ページが見つからなかった場合の表示です。

functions.php

if( is_404() ) echo 'ページが見つかりません';

完成

とりあえずこれで完成ですので、全体をまとめます。
今回紹介したやり方をまとめる場合、一応elseでif文を繋いでおくことにします。

functions.php

function mytheme_breadcrumb() {
	//HOME>と表示
	$sep = '>';
	echo '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>';
	echo $sep;

	//投稿記事ページとカテゴリーページでの、カテゴリーの階層を表示
	$cats = '';
	$cat_id = '';
	if ( is_single() ) {
		$cats = get_the_category();
		if( isset($cats[0]->term_id) ) $cat_id = $cats[0]->term_id;
	}
	else if ( is_category() ) {
		$cats = get_queried_object();
		$cat_id = $cats->parent;
	}
	$cat_list = array();
	while ($cat_id != 0){
		$cat = get_category( $cat_id );
		$cat_link = get_category_link( $cat_id );
		array_unshift( $cat_list, '<a href="'.$cat_link.'">'.$cat->name.'</a>' );
		$cat_id = $cat->parent;
	}
	foreach($cat_list as $value){
		echo '<li>'.$value.'</li>';
		echo $sep;
	}

	//現在のページ名を表示
	if ( is_singular() ) {
		if ( is_attachment() ) {
			previous_post_link( '<li>%link</li>' );
			echo $sep;
		}
		the_title( '<li>', '</li>' );
	}
	else if( is_archive() ) the_archive_title( '<li>', '</li>' );
	else if( is_search() ) echo '<li>検索 : '.get_search_query().'</li>';
	else if( is_404() ) echo '<li>ページが見つかりません</li>';
}

また、パンくずリストを呼び出す命令は以下の通り。

<?php mytheme_breadcrumb(); ?>

あとはお好みでスタイルを適用して、かっこいいパンくずリストを作ってください。

まとめ

いかがだったでしょうか。

今回はパンくずリストを作ってみました。もしバグ等あればご報告お願いいたします。
今現在、私はパンくずリストの表示にプラグインを使っていますが、そのうちに自作のものに切り替えるつもりでいます。

以上、プラグイン無しでパンくずリストを自作する方法でした。

スポンサードリンク

関連コンテンツ

オススメ記事

Swift

【Xcode7】Swift2使ってみた。playgroundで遊びながら覚える。

最近は押入れの中で寝るのが日課の@It_is_Rです。 押入れは寝心地がいいです。部屋も押入れ分だけ広くなるし。 SwiftはAppleが出しているプログラミング言語です。Swiftを使うこと

小学生から始めるプログラミング入門。プログラミングってなぁに?

2020年から小学校でプログラミングが必修(ひっしゅう)となりますが、「プログラミングなんてやったことないし、何から初めていいのか分からない」といった方も多いのではないでしょうか。 プログラミン

キャラクター

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、ブラウザ上でのアニメーションはJavaScriptが多く使われるように

Homebrew

Homebrewのインストール&使い方。すぐに使える詳しい解説!

※追記 この記事は2018/04/30に最新の情報に書き直しました。 人生をもう一度やり直したいとつくづく思う@It_is_Rです。 今回はHomebrewについての記事を書いて

【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

JavaScriptを使ってWebページなどの開発をしていると、Google ChromeやSafariなどのブラウザでうまく開けない場合が稀にあります。 そんな時、ローカルにWebサーバを立ち上げ

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した T

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

HTML CSS

Google Fontsの使い方。サイトをカッコよくしよう。

Webページを作るのは結構好きな@It_is_Rです。 WordPress、もしくは他のホームページやブログをやっていると、フォントを変えたいなと思うことも多いと思います。 そこで、Googl

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

コメントをどうぞ!

メールアドレスが公開されることはありません。