勉強がてらパンくずリストを自力で実装してみるテスト

と、いってもこのブログはパンくず入れてないんですがｗ
よく企業ホームページとかで見かけるパンくずリスト。
ブログでも当たり前のように付いていますが、それ以外でも最近では普通のサイトにもついてること多いですよね。
WordPressでもBreadcrumb NavXTのようなプラグインを利用すると簡単に導入出来ます。
このプラグイン、ちょっと設定すれば全部自動でやってくれるので非常にお手軽な反面、細かい調整が難しかったりします。
更に、これはうちの環境だけなのかもしれませんが、新しいバージョンではナビゲーションをリストタグでマークアップすることができなくなってしまいました。
何度やっても入力しても<li>と</li>が勝手に外されてしまいます…X(
と、いうことで、勉強がてらこちらのサイトをみながら自分で書いてみました。
（といってもほとんど同じですけど…）

PHPコード

/* Breadcrumb
---------------------------------------- */
function breadcrumb($divOption = array("id" => "breadcrumb", "class" => "cf")){
	global $post;
	$str ='';
	if(!is_admin()){					// 管理画面で動作しないように
		$tagAttribute = '';
		foreach($divOption as $attrName => $attrValue){
			$tagAttribute .= sprintf(' %s="%s"', $attrName, $attrValue);
		}
		$str.= '<div'. $tagAttribute .'>';
		$str.= '<ul>';
		$str.= '<li><a href="'. home_url() .'/" >HOME</a></li>';
		if (is_search()) {				// 検索結果
			$str.= '<li>"'.the_search_query().'"の検索結果</li>';
		} elseif (is_404()) {			// 404 not found
			$str.= '<li>404 not found</li>';
		} elseif (is_tag()){			// タグアーカイブ
			$str.= '<li>タグ：'.single_tag_title().'</li>';
		} elseif (is_date()) {			// 日付アーカイブ
			if (is_day()) {				// 日別
				$str.= '<li><a href="'.get_year_link(get_query_var('year')).'">'.get_query_var('year').'年</a></li>';
				$str.= '<li><a href="'.get_month_link(get_query_var('monthnum')).'">'.get_query_var('monthnum').'月</a></li>';
				$str.= '<li>'.get_query_var('day').'日</li>';
			} elseif (is_month()) {		// 月別
				$str.= '<li><a href="'.get_year_link(get_query_var('year')).'">'.get_query_var('year').'年</a></li>';
				$str.= '<li>'.get_query_var('monthnum').'月</li>';
			} elseif (is_year()) {		// 年別
				$str.= '<li>'.get_query_var('year').'年</li>';
			}
		} elseif (is_category()) {		// カテゴリーアーカイブ
			$current_cat = get_queried_object();
			if ($current_cat -> parent !=0) {
				$ancestors = array_reverse(get_ancestors( $current_cat -> cat_ID, 'category' ));
				foreach ($ancestors as $ancestor) {
					$str.= '<li><a href="'.get_category_link($ancestor).'">'.get_cat_name($ancestor).'</a></li>';
				}
			}
			$str.= '<li>'.$current_cat -> cat_name.'</li>';
		} elseif (is_author()) {		// 投稿者アーカイブ
			$str.= '<li>投稿者：'.the_author_meta( 'display_name',get_query_var( 'author' ) ).'</li>';
		} elseif (is_page()) {			// 固定ページ
			if ($post -> post_parent != 0) {
				$ancestors = array_reverse ($post -> ancestors);
				foreach ($ancestors as $ancestor) {
					$str.= '<li><a href="'.get_permalink($ancestor).'">'.get_the_title($ancestor).'</a></li>';
				}
			}
			$str.= '<li>'.$post -> post_title.'</li>';
		} elseif (is_attachment()) {	// 添付ファイルページ
			if ($post -> post_parent != 0) {
				$str.= '<li><a href="'.get_permalink($post -> post_parent).'">'.get_the_title($post -> post_parent).'</a></li>';
			}
			$str.= '<li>'.$post -> post_title.'</li>';
		} elseif (is_single()) {		// 投稿ページ
			$current_cats = get_the_category($post -> ID);
			$current_cat = $current_cats[0];
			if ($current_cat -> parent != 0) {
				$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
				foreach ($ancestors as $ancestor) {
					$str.= '<li><a href="'.get_category_link($ancestor).'">'.get_cat_name($ancestor).'</a></li>';
				}
			}
			$str.= '<li><a href="'.get_category_link($current_cat -> cat_ID).'">'.$current_cat -> cat_name.'</a></li>';
			$str.= '<li>'.$post -> post_title.'</li>';
		} else {						// それ以外
			$str.='<li>'. wp_title('', false) .'</li>';
		}
		$str.='</ul>';
		$str.='</div>';
	}
	echo $str;
}

/* Breadcrumb

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

function breadcrumb($divOption = array("id" => "breadcrumb", "class" => "cf")){

global $post;

$str ='';

if(!is_admin()){ // 管理画面で動作しないように

$tagAttribute = '';

foreach($divOption as $attrName => $attrValue){

$tagAttribute .= sprintf(' %s="%s"', $attrName, $attrValue);

}

$str.= '<div'. $tagAttribute .'>';

$str.= '<ul>';

$str.= '<li><a href="'. home_url() .'/" >HOME</a></li>';

if (is_search()) { // 検索結果

$str.= '<li>"'.the_search_query().'"の検索結果</li>';

} elseif (is_404()) { // 404 not found

$str.= '<li>404 not found</li>';

} elseif (is_tag()){ // タグアーカイブ

$str.= '<li>タグ：'.single_tag_title().'</li>';

} elseif (is_date()) { // 日付アーカイブ

if (is_day()) { // 日別

$str.= '<li><a href="'.get_year_link(get_query_var('year')).'">'.get_query_var('year').'年</a></li>';

$str.= '<li><a href="'.get_month_link(get_query_var('monthnum')).'">'.get_query_var('monthnum').'月</a></li>';

$str.= '<li>'.get_query_var('day').'日</li>';

} elseif (is_month()) { // 月別

$str.= '<li><a href="'.get_year_link(get_query_var('year')).'">'.get_query_var('year').'年</a></li>';

$str.= '<li>'.get_query_var('monthnum').'月</li>';

} elseif (is_year()) { // 年別

$str.= '<li>'.get_query_var('year').'年</li>';

}

} elseif (is_category()) { // カテゴリーアーカイブ

$current_cat = get_queried_object();

if ($current_cat -> parent !=0) {

$ancestors = array_reverse(get_ancestors( $current_cat -> cat_ID, 'category' ));

foreach ($ancestors as $ancestor) {

$str.= '<li><a href="'.get_category_link($ancestor).'">'.get_cat_name($ancestor).'</a></li>';

}

$str.= '<li>'.$current_cat -> cat_name.'</li>';

} elseif (is_author()) { // 投稿者アーカイブ

$str.= '<li>投稿者：'.the_author_meta( 'display_name',get_query_var( 'author' ) ).'</li>';

} elseif (is_page()) { // 固定ページ

if ($post -> post_parent != 0) {

$ancestors = array_reverse ($post -> ancestors);

foreach ($ancestors as $ancestor) {

$str.= '<li><a href="'.get_permalink($ancestor).'">'.get_the_title($ancestor).'</a></li>';

}

$str.= '<li>'.$post -> post_title.'</li>';

} elseif (is_attachment()) { // 添付ファイルページ

if ($post -> post_parent != 0) {

$str.= '<li><a href="'.get_permalink($post -> post_parent).'">'.get_the_title($post -> post_parent).'</a></li>';

}

$str.= '<li>'.$post -> post_title.'</li>';

} elseif (is_single()) { // 投稿ページ

$current_cats = get_the_category($post -> ID);

$current_cat = $current_cats[0];

if ($current_cat -> parent != 0) {

$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));

foreach ($ancestors as $ancestor) {

$str.= '<li><a href="'.get_category_link($ancestor).'">'.get_cat_name($ancestor).'</a></li>';

}

$str.= '<li><a href="'.get_category_link($current_cat -> cat_ID).'">'.$current_cat -> cat_name.'</a></li>';

$str.= '<li>'.$post -> post_title.'</li>';

} else { // それ以外

$str.='<li>'. wp_title('', false) .'</li>';

}

$str.='</ul>';

$str.='</div>';

}

echo $str;

}

はい。なにもいうことはありませんね。
やってることは、元サイトさんのそれと全く一緒です。
ちなみに呼び出すときは、

<?php if (function_exists('breadcrumb')) breadcrumb(); ?>

1	<?php if (function_exists('breadcrumb')) breadcrumb(); ?>

です。
今回自分が作ったパンくずリストは区切りマーク「＞」は使用せず、CSSでリストの背景に画像を入れているので、そのへんは外してます。
元サイトのように「＞」で動かすようにするならば、同じように追記していってもいいですが、
CSSの擬似要素を使って、

#breadcrumb li:before {
	content:'>';
}
#breadcrumb li:first-child:before {
	content:'';
}

#breadcrumb li:before {

content:'>';

}

#breadcrumb li:first-child:before {

content:'';

}

みたいに（或いはウェブフォントとか駆使して？）してもいいかもしれませんね。
パンくずはトップページにはいらないよって場合は、動作しない条件にトップページを追加すればOKです。
具体的には、6行目の

if(!is_admin()){

1	if(!is_admin()){

の部分を

if(!is_home()&&!is_admin()){

1	if(!is_home()&&!is_admin()){

みたいにすれば、HOMEにいるときと管理画面にいるときは、呼び出しコードがあっても何もしなく（＝表示されなく）なります。
今作っているテーマの場合、別の設定画面でトップページに入れるかどうかを設定できるようにしていますので、
設定画面のPHPファイルに

<select name="RWADV_OMS2_BCN" id="">
<?php
$options = array(
	array('value' => 'on', 'label' => 'on'),
	array('value' => 'woindex', 'label' => 'on (index:off)'),
	array('value' => 'off', 'label' => 'off')
);
foreach ($options as $option):?>
<option value="<?php echo $option['value'] ?>"<?php if (get_option('RWADV_OMS2_BCN') == $option['value']):?> selected="selected"<?php endif;?>><?php echo $option['label']; ?></option>
<?php endforeach; ?>
</select>

<?php

$options = array(

array('value' => 'on', 'label' => 'on'),

array('value' => 'woindex', 'label' => 'on (index:off)'),

array('value' => 'off', 'label' => 'off')

);

foreach ($options as $option):?>

<option value="<?php echo $option['value'] ?>"<?php if (get_option('RWADV_OMS2_BCN') == $option['value']):?> selected="selected"<?php endif;?>><?php echo $option['label']; ?></option>

<?php endforeach; ?>

</select>

みたいにユーザーオプションを書いておいて、パンくず表示場所には

<?php switch (get_option('RWADV_OMS2_BCN',$default='on')) {
	case 'on':
		if (function_exists('breadcrumb')) breadcrumb();
		break;
	case 'woindex':
		if (!is_home()) if (function_exists('breadcrumb')) breadcrumb();
		break;
} ?>

<?php switch (get_option('RWADV_OMS2_BCN',$default='on')) {

case 'on':

if (function_exists('breadcrumb')) breadcrumb();

break;

case 'woindex':

if (!is_home()) if (function_exists('breadcrumb')) breadcrumb();

break;

} ?>

としています。（on：常に表示、woindex：トップページは非表示、off：常に非表示）
こうすれば出したり消したりってときにPHPファイルを弄らないで済むので安全ですし何より楽ちんですのでおすすめです。
あ、ちなみにユーザーオプションの追加部分は保存処理などは書いていませんので、新たにオプションを作る場合はこれだけじゃ動作しませんので。念のため。
ユーザーオプションの使い方とか、テーマの設定画面の作り方はまた改めて。

NeGiMeMo.net

勉強がてらパンくずリストを自力で実装してみるテスト

PHPコード

いいね:

コメントするコメントをキャンセル

関連投稿

勉強がてらパンくずリストを自力で実装してみるテスト

PHPコード

Share this:

いいね:

コメントする コメントをキャンセル

関連投稿

コメントするコメントをキャンセル