メニューに配置したカテゴリから子カテゴリを取得する
以前にwp_get_nav_menu_itemsを使用したメニュー作成を行いましたが、それの拡張でメニューに配置したカテゴリの子カテゴリをサブメニュー表示する方法です。
言葉を並べてみると何のことだか分かりにくいですね。
要はココの部分です。
メニューを表示する
まずwp_get_nav_menu_itemsでのメニュー表示のベースになるコードです。
詳しくは以前の記事を参照してください。
WordPressでメニュー表示する際、一番簡単なのは「wp_nav_menu」を利用することなんだけど、余計なクラス名がついたり、li要素...
wp_get_nav_menu_itemsのコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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タグ内に子要素として埋め込んでいきます。
行程としては下記の通り。
２．親カテゴリIDから子カテゴリのID配列を取得。
３．子カテゴリがある場合に子カテゴリを作成。
では順を追って進めていきます。
１．親カテゴリIDを取得
カテゴリIDはwp_get_nav_menu_itemsで取得する配列に格納されています。
中身を見てみましょう。
wp_get_nav_menu_itemsで取得した配列（例では$menu）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
[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取得
|
1 |
$cat_id = $menu->object_id; |
２．親カテゴリIDから子カテゴリのID配列を取得
次に子カテゴを取得します。
ここでget term childrenという便利な関数がありました。
get_term_children()
子のタームをすべて、ひとつの配列にまとめます。この関数は指定されたタームの子タームを、再帰的にすべて取得してひとつの配列に入れます。
階層のあるタクソノミーについてのみ有用です。
もしタームが指定されたタクソノミーに無ければ、空の配列を返します。
WordPressCodex日本語版より引用
記述はこうです。
|
1 |
<?php get_term_children( $term, $taxonomy ) ?> |
この関数はカスタム投稿タイプにも使用できるので、ここでは$termはカテゴリID、$taxonomyはcategoryを指します。
ですので今回の用例ではこう書いておきます。
子カテゴリID配列を取得
|
1 |
$children = get_term_children($menu->object_id,'category'); |
これで$childrenに子カテゴリID配列が入りました。
尚、子カテゴリがないものには空の配列が入ります。
配列した子カテゴリID配列（例では$children）
|
1 2 3 4 5 6 7 8 |
Array ( [0] => 34 [1] => 35 [2] => 36 [3] => 37 [4] => 1005 ) |
３．子カテゴリがある場合に子カテゴリを作成。
ようやく子カテゴリ作成です。
ここはまとめてコードを見てみます。
子カテゴリ有無の分岐～ループ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?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配列の有無で分岐します。
|
1 |
if($children): |
ある場合はforeach処理でループ。
$childrenは子カテゴリIDしか入っていない配列で$childはそのまま子カテゴリIDになりますので、IDからリンクとカテゴリ名を取得します。
|
1 2 3 4 5 |
<li class="sub-menu-item"> <a href="<?php echo esc_url(get_category_link($child)); ?>"> <?php echo get_cat_name($child)?> </a> </li> |
以上で処理は完了です。
コードまとめ
コードをまとめるとこうなります。
メニューに配置したカテゴリから子カテゴリを取得する記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<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にカテゴリースラッグを書き込む等が必要になります。
たいしたコードじゃないですが、備忘録がてらに一応スラッグ取得コード書いておきます。
カテゴリスラッグ取得
|
1 2 3 |
$cat_id = $menu->object_id; //$menuからカテゴリID取得 $cat_array = get_category($cat_id); //該当カテゴリ情報取得 $slug = $cat_array->category_nicename; //カテゴリスラッグを取得 |
ではでは
ありがとうございます。とても良い記事に感謝です。参考にさせて頂きました。
あと、post-typeではなくて、post_typeかもしれません。
コメントありがとうございます。
参考にになったようで何よりです！
あと、ご指摘ありがとうござます。
post_typeでしたね…早速修正しておきました。