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(); ?>

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

まとめ

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

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

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

スポンサードリンク

関連コンテンツ

オススメ記事

Local by Flywheel

一瞬でWordPressローカル環境を作成! Local by Flywheelの使い方

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テ

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。 今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

WordPress

無料で広告なしのWordPressサイトを立ち上げる方法。

猫を飼っています。でも犬派です。何か文句ありますか? …まぁ、最終的に動物全般が好きなんです。爬虫類から哺乳類、鳥類まで好きです。動物を飼っている人、今すぐ写真を@It_is_Rに送り付けて下さい。

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

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

Swift

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

enchant.js

HTML5 と javascript ( enchant.js )を使ったアクションゲーム開発。

以前、Flashを使って、横スクロールアクションゲームを作ろうとしていたのですが、実はAndroid4.xではFlashPlayerがサポートされておらず、最近のAndroidではFlashPlaye

これまでのプログラム全体をクラスを使って作るべ!

小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!

小学生からのプログラミング講座(こうざ)、第13弾です。 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていないかも

コメントをどうぞ!

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