WordPressの関数を使ってBootstrapのナビゲーションにカテゴリを出力してみるテスト。

レスポンシブデザイン対応するにあたり、Bootstrapをとても便利に使わせて貰っているのですが、WordPressに組み込んでナビゲーション（navbar）にカテゴリを出力できないかと思い、調べて実装してみました。

今回のコードは、ほぼ下記参考サイトのものを使わせてもらっているのですが、忘れそうな部分も多いため備忘録代わりに記事にしてみます。

【参考サイト】
》WordPressフォーラム – wp_list_categories()が出力するHTMLを変更したい。

 
 
【目標】
下図のような感じで、カテゴリ表示部分をWordPress関数で取得・出力を行う。

 
 
【前提条件】

• Bootstrapが組み込まれている事。
• My Category Orderプラグインがインストール・有効化されている事。
• 親カテゴリに属する子カテゴリは1階層までとする。
• 子カテゴリは、カテゴリ名の横に投稿数を表示する。
• カテゴリはMy Category Orderプラグインを利用して並び替えたものとする。
• デフォルトのカテゴリ（ID=1）は除外する。

 
 
【作り方】
Bootstrapのnavbarの記述のところ（<div class=”nav-collapse collapse”>～</div>でくくってある箇所）を、以下のコードに書き換えてください。

<div class="nav-collapse collapse">
	<ul id="naviMenu" class="nav">

		<li><a href="<?php echo home_url(); ?>">TOP</a></li>
	  	<li class="divider-vertical"></li>

		<?php
			$categories = get_categories('parent=0&hide_empty=0&orderby=id&exclude=1');
			if (is_array($categories)) {
				foreach($categories as $category):
					$v_cat_id = $category->cat_ID;
					$v_cat_Parent_title = $category->cat_name;
					$v_cat_Parent_t_a = wp_specialchars($v_cat_Parent_title);
					$v_cat_Parent_t_u = attribute_escape($v_cat_Parent_title);
					$v_cat_Parent_url = get_category_link($v_cat_id);
					$v_cat_child_list = wp_list_categories("orderby=order&show_count=1&hide_empty=0&title_li=&use_desc_for_title=0&child_of=$v_cat_id&depth=1&echo=0");
					if ( strpos($v_cat_child_list, __('No categories')) === false) {
		?>

				<li class="dropdown"><a href="#" title="<?php echo $v_cat_Parent_t_u; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $v_cat_Parent_t_a; ?><b class="caret"></b></a>
					<ul class="dropdown-menu">
						<?php echo preg_replace('/<\/a> (\([0-9]*\))/', ' $1</a>', $v_cat_child_list); ?>
					</ul>
			<?php } else { ?>
				<li><a href="<?php echo $v_cat_Parent_url; ?>" title="<?php echo $v_cat_Parent_t_u; ?>"><?php echo $v_cat_Parent_t_a; ?></a>

			<?php } ?>
		</li>
		<li class="divider-vertical"></li>

		<?php
				endforeach;

			}
		?>

	</ul>
</div><!-- nav-collapse collapse end -->

前述の通り、ほぼ冒頭で挙げた参考サイトのコードのままなのですが、変えたところ（ハイライト部分）は以下の通りです。

[8行目]
get_categories関数のexcludeパラメタでカテゴリID=1を除外。
 
[16行目]
カテゴリをMy Category Orderプラグインで並べ替えた順に取得するため、wp_list_categories関数のorderbyパラメタにorderを設定。また、投稿数を表示させたいのでshow_count=1を追加。
 
[22行目]
show_count=1で表示させた投稿数は、デフォルトでは子カテゴリへのリンク外（aタグ外）に出てしまうので、PHPのpreg_replaceを使って子カテゴリへのリンク内（aタグ内）へ移動。
 
[24～29行目]
子カテゴリが無い場合の処理及び親カテゴリの並びの間の区切り線を表示する処理です。
 

 
Codexを見ると、wp list categoriesでchild_ofパラメタを使用するすると、hide_empty パラメータにfalseがセットされるとの事なので、投稿のないカテゴリー非表示は今回は見送りました。
 

【その他の参考サイト】
》WordPress Codex 日本語版 – テンプレートタグ/wp list categories
》Records – wp_list_categoriesで出力されるhtmlをpreg_replaceで編集

 
 
因みに今回は、navbarまわりの記述をまとめて「navibar.php」というファイルに記述しておき、get_template_part関数で読み込んでみました。

<?php get_template_part( 'navibar' ); ?>

 
 
WordPressの関数使って色々やりはじめたばかりなので、「ココ違う！」とか「こっちの方が良い！」などのご意見があれば、ご指摘頂けると喜びます。

最後に、グローバルナビゲーションに対応させたい場合の記事を見つけたので、メモ。
》ひろしまさん – WordPress・カスタムメニューでbootstrapのnavbarを対応させるカスタマイズ