メニューに配置したカテゴリから子カテゴリを取得する
以前に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タグ内に子要素として埋め込んでいきます。
行程としては下記の通り。
2.親カテゴリIDから子カテゴリのID配列を取得。
3.子カテゴリがある場合に子カテゴリを作成。
では順を追って進めていきます。
1.親カテゴリIDを取得
カテゴリIDはwp_get_nav_menu_itemsで取得する配列に格納されています。
中身を見てみましょう。
[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()
子のタームをすべて、ひとつの配列にまとめます。
この関数は指定されたタームの子タームを、再帰的にすべて取得してひとつの配列に入れます。
階層のあるタクソノミーについてのみ有用です。
もしタームが指定されたタクソノミーに無ければ、空の配列を返します。
記述はこうです。
<?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; //カテゴリスラッグを取得
ではでは
コメントを残す