プラグインを使わずに WordPress でパンくずリストを設置してみた

今更ながらパンくずリストを設置してみました。

パンくずリストっていうのは、よくついてるこういうの。

パンくずリストは、Google などの検索エンジンにサイト構造を理解させるためにも重要で基本の SEO 対策施策のひとつだそうな。

参考：リッチ スニペット – パンくずリスト – ウェブマスター ツール ヘルプ

Wordpress では、簡単にパンくずリストを表示するためのプラグインが沢山ありますが、今回はプラグインを使わずに設置してみました。

設置するにあたり、ACラボさんの記事を参考にさせてもらいました。ホームアイコンなどの画像も使わせてもらってます。

Thanx！パンくずリストの正しい使い方

共通の CSS

パンくずリストは、記事ページ（single.php）、アーカイブページ（archive.php）、個別ページ（page.php）、トップページ（home.php）へ設置しますが、共通の CSS として以下のソースを、style.css へ貼付けます。

/* ---------------------------------------------*/
/* パンくずリスト　*/

/* ---------------------------------------------*/

/* リスト */
ol.topic-path {
　margin: 0;
　padding: 7px 5px;
　list-style-type: none; /* リストマーク非表示 */
　font-size: 100%;
}

/* リスト項目 */
ol.topic-path li {
　padding-left: 5px;
　display: inline;
}

/* リスト項目（最初の項目） */
ol.topic-path li.first {
　padding-left: 25px;
　background: url(images/pankuzu/topic-path-home-black.png) no-repeat left; /* ホーム記号（※） */
}

/* リンクエリア */
ol.topic-path li a {
　padding-right: 18px; /* 右パディング */
　background: url(images/pankuzu/topic-path-gray.gif) no-repeat right; /* 矢印記号（※） */
}

/* リンク色 */
　ol.topic-path li a {
　color: #4682b4;
}

/* リンク色（マウスオーバー） */
　ol.topic-path li a:hover {
　color: #79a7cc;
}

必要に応じて適時修正しちゃってください。

記事ページ（single.php）への設置

記事ページへパンくずリストを設置するためには single.php を修正します。

パンくずリストを表示したい場所へ以下のソースを貼付けます。一応サブカテゴリにも対応していますが、3階層以上のサブカテゴリには対応してませんので、適時修正を。

cat_ID;
　$cat_name = $cat_info->name;
　$cat_url = get_category_link( $cat_id );

　$parent_id = $cat_info->parent;
　if( $parent_id <> 0 ) {
　　$parent_info　= get_category($parent_id, false);
　　$parent_name = $parent_info->cat_name;
　　$parent_url　= get_category_link( $parent_id );
　}
?>


　
HOME
　 0 ) {
　　　echo '
'.attribute_escape($parent_name).'
';
　　}
　　echo '
'.$cat_name.'
';
　　echo '
'.get_the_title().'
';
　?>

single.php では、

で、カテゴリ情報を取得出来ないので、

$cat = get_the_category();
$cat = $cat[0];

でカテゴリ情報を取得します。


関連記事：WordPress のテンプレートファイルで、カテゴリ情報（カテゴリ名とかカテゴリIDとか）を取得する方法

アーカイブページ（archive.php）への設置

カテゴリー別ページや日付別ページなどのアーカイブページへパンくずリストを設置するためには archive.php を修正します。

パンくずリストを表示したい場所へ以下のソースを貼付けます。一応サブカテゴリにも対応していますが、3階層以上のサブカテゴリには対応してませんので、適時修正を。

name;

　$parent_name　= 0;
　if ($cat_info->parent) {
　　$parent_name　= get_category($cat_info->parent, false);
　　$parent_url　　= get_category_link( $cat_info->parent );
　}
?>


　
HOME
　parent ) {
　　　　echo '
'.attribute_escape($parent_name->cat_name).'
';
　　　}
　　　echo '
'.$cat_name.'
';
　　} else if( is_tag() ) {
　　　echo '
タグ（'.trim(wp_title('', false)).'）
';
　　}
　?>

archive.php では、

で、カテゴリ情報が取得出来ます。$cat_info はオブジェクトなので、$cat_info[name] ではなく $cat_info->name で変数にアクセスしてください。

関連記事：WordPress のテンプレートファイルで、カテゴリ情報（カテゴリ名とかカテゴリIDとか）を取得する方法

個別ページ（page.php）への設置

個別ページへパンくずリストを設置するためには archive.php を修正します。

パンくずリストを表示したい場所へ以下のソースを貼付けます。一応サブカテゴリにも対応していますが、3階層以上のサブカテゴリには対応してませんので、適時修正を。

cat_ID;
　$cat_name = $cat_info->name;
　$cat_url = get_category_link( $cat_id );
　
　$parent_id = $cat_info->parent;
　if( $parent_id <> 0 ) {
　　$parent_info　= get_category($parent_id, false);
　　$parent_name = $parent_info->cat_name;
　　$parent_url　= get_category_link( $parent_id );
　}
?>


　
HOME
　

個別ページ（page.php）では、記事ページ（single.php）と同様に、

　　$cat_id = get_query_var(‘cat’);
　　$cat_info = get_category( $cat_id, false );
?>

で、カテゴリ情報を取得出来ないので、

$cat = get_the_category();
$cat = $cat[0];

でカテゴリ情報を取得します。

関連記事：WordPress のテンプレートファイルで、カテゴリ情報（カテゴリ名とかカテゴリIDとか）を取得する方法

トップページ（home.php）への設置

トップページへパンくずリストを設置するためには home.php を修正します。

トップページは、読んで時のごとくトップ階層なので、特に難しい事はありません。

　　
HOME

これだけです。

まとめ

今回プラグインを使わずにパンくずリストを設置してみた訳ですが、テンプレートファイル（single.php や archive.php など）によって、カテゴリー情報の取得方法が微妙に違ってたりしますので、注意してください。

プラグインで設置すればお手軽なんだと思いますが、PHP や WordPress に慣れる意味でも自力で設置にチャレンジする事をお勧めします。

パンくずリスト設置すると、WordPress の雰囲気が色々分かって、後々のカスタマイズする際の良い勉強になると思いますよ。

是非是非チャレンジしちゃってください。

でわでわ。

[amazonjs asin=”479736758X” locale=”JP” tmpl=”Small” title=”本格ビジネスサイトを作りながら学ぶ WordPressの教科書”] [amazonjs asin=”4797370963″ locale=”JP” tmpl=”Small” title=”【Amazon.co.jp限定】本格ビジネスサイトを作りながら学ぶ WordPressの教科書2 オリジナルステッカー付き”]