WordPressでメニューに配置したカテゴリから子カテゴリを表示する。get_term_children関数の用例

メニューに配置したカテゴリから子カテゴリを取得する

以前にwp_get_nav_menu_itemsを使用したメニュー作成を行いましたが、それの拡張でメニューに配置したカテゴリの子カテゴリをサブメニュー表示する方法です。

言葉を並べてみると何のことだか分かりにくいですね。
要はココの部分です。

カテゴリーメニュー

メニューを表示する

まずwp_get_nav_menu_itemsでのメニュー表示のベースになるコードです。
詳しくは以前の記事を参照してください。

wp_get_nav_menu_itemsのコード

<ul class="menu">
	<?php
		$menu_items = wp_get_nav_menu_items('header-menu');
		if($menu_items) :
			foreach($menu_items as $menu) : setup_postdata($menu);
			$cat_id = $menu->object_id;
			$children = get_term_children($menu->object_id,'category');
	?>
	<li class="menu-item">
		<a href="<?php echo esc_attr($menu->url); ?>"><?php echo esc_html($menu->title); ?></a>
	</li>
	<?php
			endforeach;
		endif;
		wp_reset_postdata();
	?>
</ul>

ここに今回は子カテゴリを取得してliタグ内に子要素として埋め込んでいきます。

行程としては下記の通り。

1.親カテゴリIDを取得。
2.親カテゴリIDから子カテゴリのID配列を取得。
3.子カテゴリがある場合に子カテゴリを作成。

では順を追って進めていきます。

1.親カテゴリIDを取得

カテゴリIDはwp_get_nav_menu_itemsで取得する配列に格納されています。
中身を見てみましょう。

wp_get_nav_menu_itemsで取得した配列(例では$menu)

[0] => WP_Post Object
        (
            [ID] => 755
            [post_author] => 1
            [post_date] => 2016-03-10 15:09:30
            [post_date_gmt] => 2016-03-10 06:09:30
            [post_content] =>
            [post_title] =>
            [post_excerpt] =>
            [post_status] => publish
            [comment_status] => closed
            [ping_status] => closed
            [post_password] =>
            [post_name] => 755
            [to_ping] =>
            [pinged] =>
            [post_modified] => 2016-03-12 00:36:23
            [post_modified_gmt] => 2016-03-11 15:36:23
            [post_content_filtered] =>
            [post_parent] => 0
            [guid] => http://localhost/xtra-blog/
            [menu_order] => 1
            [post_type] => nav_menu_item
            [post_mime_type] =>
            [comment_count] => 0
            [filter] => raw
            [db_id] => 755
            [menu_item_parent] => 0
            [object_id] => 32
            [object] => category
            [type] => taxonomy
            [type_label] => カテゴリー
            [url] => http://localhost/xtra-blog/category/web/
            [title] => WEB
            [target] =>
            [attr_title] =>
            [description] =>
            [classes] => Array
                (
                    [0] =>
                )

            [xfn] =>
        )

この配列のobject_idが該当カテゴリIDになるので簡単ですね。

親カテゴリID取得

$cat_id = $menu->object_id;

2.親カテゴリIDから子カテゴリのID配列を取得

次に子カテゴを取得します。

ここでget term childrenという便利な関数がありました。

get_term_children()

子のタームをすべて、ひとつの配列にまとめます。
この関数は指定されたタームの子タームを、再帰的にすべて取得してひとつの配列に入れます。
階層のあるタクソノミーについてのみ有用です。

もしタームが指定されたタクソノミーに無ければ、空の配列を返します。

WordPressCodex日本語版より引用

記述はこうです。

<?php get_term_children( $term, $taxonomy ) ?>

この関数はカスタム投稿タイプにも使用できるので、ここでは$termはカテゴリID$taxonomyはcategoryを指します。
ですので今回の用例ではこう書いておきます。

子カテゴリID配列を取得

$children = get_term_children($menu->object_id,'category');

これで$childrenに子カテゴリID配列が入りました。
尚、子カテゴリがないものには空の配列が入ります。

配列した子カテゴリID配列(例では$children)

Array
(
    [0] => 34
    [1] => 35
    [2] => 36
    [3] => 37
    [4] => 1005
)

3.子カテゴリがある場合に子カテゴリを作成。

ようやく子カテゴリ作成です。
ここはまとめてコードを見てみます。

子カテゴリ有無の分岐~ループ

<?php
	if($children):
?>
	<ul class="sub-menu">
	<?php
		foreach($children as $child) : setup_postdata($child);
	?>
		<li class="sub-menu-item">
			<a href="<?php echo esc_url(get_category_link($child)); ?>">
				<?php echo get_cat_name($child)?>
			</a>
		</li>
	<?php
		endforeach;
	?>
	</ul>
<?php
	endif;
?>

まず、先ほど取得した$children配列の有無で分岐します。

if($children):

ある場合はforeach処理でループ。

$childrenは子カテゴリIDしか入っていない配列で$childはそのまま子カテゴリIDになりますので、IDからリンクとカテゴリ名を取得します。

<li class="sub-menu-item">
	<a href="<?php echo esc_url(get_category_link($child)); ?>">
		<?php echo get_cat_name($child)?>
	</a>
</li>

以上で処理は完了です。

コードまとめ

コードをまとめるとこうなります。

メニューに配置したカテゴリから子カテゴリを取得する記述

<ul class="menu">
	<?php
		$menu_items = wp_get_nav_menu_items('header-menu');
		if($menu_items) :
			foreach($menu_items as $menu) : setup_postdata($menu);
			$cat_id = $menu->object_id;
			$children = get_term_children($menu->object_id,'category');
	?>
	<li class="menu-item">
		<a href="<?php echo esc_attr($menu->url); ?>"><?php echo esc_html($menu->title); ?></a>

	<?php
		if($children):
	?>
		<ul class="sub-menu">
		<?php
			foreach($children as $child) : setup_postdata($child);
		?>
				<li class="sub-menu-item">
					<a href="<?php echo esc_url(get_category_link($child)); ?>">
						<?php echo get_cat_name($child)?>
					</a>
				</li>
		<?php
			endforeach;
			wp_reset_postdata();
		?>
		</ul>
	<?php
		endif;
	?>
	</li>
	<?php
			endforeach;
			wp_reset_postdata();
		endif;
	?>
</ul>

まとめ

ポイントはwp_get_nav_menu_itemsに格納されている配列get_term_children関数ですね。
残りはカテゴリIDから情報を取得するだけなので難しくないと思います。

尚、今回の例は子カテゴリを取得してul liで並べてるだけなので、当サイトのナビゲーションのようにhoverで色を変えるには当然classにカテゴリースラッグを書き込む等が必要になります。

たいしたコードじゃないですが、備忘録がてらに一応スラッグ取得コード書いておきます。

カテゴリスラッグ取得

$cat_id = $menu->object_id;				//$menuからカテゴリID取得
$cat_array = get_category($cat_id);		//該当カテゴリ情報取得
$slug = $cat_array->category_nicename;	//カテゴリスラッグを取得

ではでは

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA