WordPress: パンくずリストを作成
※当サイトにはプロモーションが含まれています。
公開日:
更新日:
このブログ(WordPress)に、パンくずリストを表示してみた。
テーマ内のfunctions.phpに breadcrumb()関数を追加して、index.php 等から呼んでいる。
HTML構成
div と a タグで表現することにした。
<div id="breadcrumb">
<a href="aaa">AAA</a>›
<a href="bbb">BBB</a>›
<a href="ccc">CCC</a>
</div>
呼び出し側
$breadcrumb という変数がグローバルになっているのが気になるが、とりあえず気にしないでおく。
<?php if (($breadcrumb = breadcrumb($post)) != ''): ?>
<div id="breadcrumb"><?php echo $breadcrumb; ?></div>
<?php endif; ?>
functions.php
内部では処理を2つ(「パンくずリストの各階層を配列にセットする関数」と、「配列をHTMに変換する関数」)に分け、最後にまとめて実行している。
/**
* パンくずリストHTMLを返す。
*
* HTMLのフォーマットは以下を想定している。
* 但し、<div>は呼び出し側で追加すること。
* <div>
* <a>AAA</a>›
* <a>BBB</a>›
* <a>CCC</a>
* </div>
*
* @param object $post
* @rerutn string
*/
function breadcrumb($post=null) {
/*
* パンくずリストの各階層を配列にセットする関数
* Format: array(array( 'text' => 'A', 'href' => 'yyy'),
* array( 'text' => 'B', 'href' => 'zzz'));
*/
$make_bc_arr = function($post) {
// 戻り値
$ret_arr = array();
if (is_home()) { // トップページ
// パンくずリストはいらない
} else if (is_single()) { // 投稿記事
$categories = get_the_category(get_the_ID());
// カテゴリは複数保持している可能性があるが、最後のカテゴリを使用する(改善の余地あり)
$cat = $categories[count($categories)-1];
if($cat->parent != 0){
$ancestors = array_reverse(get_ancestors( $cat->cat_ID, 'category' ));
foreach($ancestors as $ancestor){
$ret_arr[] = array('text' => get_cat_name($ancestor), 'href' => get_category_link($ancestor));
}
}
$ret_arr[] = array('text' => $cat->cat_name, 'href' => get_category_link($cat->term_id));
$ret_arr[] = array('text' => get_the_title(), 'href' => get_permalink());
} else if (is_page()) { // 固定ページ
if ($post->post_parent != 0){
$ancestors = array_reverse(get_post_ancestors( $post->ID ));
foreach($ancestors as $ancestor){
$ret_arr[] = array('text' => get_the_title($ancestor), 'href' => get_permalink($ancestor));
}
$ret_arr[] = array('text' => get_the_title(), 'href' => get_permalink());
}
} else if (is_category()) { // カテゴリーアーカイブ
$cat = get_queried_object();
if($cat->parent != 0){
$ancestors = array_reverse(get_ancestors( $cat->cat_ID, 'category' ));
foreach($ancestors as $ancestor){
$ret_arr[] = array('text' => get_cat_name($ancestor), 'href' => get_category_link($ancestor));
}
}
$ret_arr[] = array('text' => $cat->name, 'href' => get_category_link($cat->cat_ID));
} else if (is_tag()) { // タグアーカイブ
$tag_obj = get_queried_object();
$ret_arr[] = array('text' => $tag_obj->name, 'href' => get_tag_link($tag_obj->term_id));
} else if (is_date()) { // 日付アーカイブ
if (get_query_var('day') != 0){ //年別アーカイブ
$ret_arr[] = array('text' => get_query_var('year') . '年', 'href' => get_year_link(get_query_var('year')));
$ret_arr[] = array('text' => get_query_var('monthnum') . '月', 'href' => get_month_link(get_query_var('year'), get_que< $ret_arr[] = array('text' => get_query_var('day') . '日', 'href' => get_day_link(get_query_var('year'), get_query_var(<
} else if (get_query_var('monthnum') != 0){ //月別アーカイブ $ret_arr[] = array('text' => get_query_var('year') . '年', 'href' => get_year_link(get_query_var('year')));
$ret_arr[] = array('text' => get_query_var('monthnum') . '月', 'href' => get_month_link(get_query_var('year'), get_que<
} else { //年別アーカイブ
$ret_arr[] = array('text' => get_query_var('year') . '年', 'href' => get_year_link(get_query_var('year')));
}
} else if (is_author()) { // 投稿者アーカイブ
$ret_arr[] = array('text' => get_the_author_meta('display_name', get_query_var('author')), 'href' => '');
} else if (is_search()) { // 検索結果
$ret_arr[] = array('text' => '検索結果:' . get_search_query(), 'href' => '');
} else if (is_404()) { // 404 Not Found
$ret_arr[] = array('text' => '404 Not Found', 'href' => '');
} else if (is_attachment()) { // 添付ファイルページ
$ret_arr[] = array('text' => $post->post_title, 'href' => '');
} else { // 上記以外
$ret_arr[] = array('text' => wp_title('', true), 'href' => '');
}
// Home
if (count($ret_arr) > 0) {
array_unshift($ret_arr, array('text' => 'Home', 'href' => home_url()));
}
return $ret_arr;
};
/*
* 配列をHTMLに変換する関数
*/
$arr2html = function($arr) {
$html = '';
foreach ($arr as $a) {
if ($html != '') $html = $html . '›';
$html .= '<a href="' . $a['href'] . '">' . $a['text'] . '</a>';
}
return $html;
};
return $arr2html($make_bc_arr($post));
}
CSS
#breadcrumb {
padding: 5px 5px 5px 0;
display: inline-block;
}
#breadcrumb a {
padding: 0 10px;
}