WordPress メニュー表示（class）をnav_menu_css_classフィルタでカスタマイズ
WordPressでは、wp_nav_menu関数でメニューを簡単に表示することができます。
## メニューの表示例
|
1 2 3 4 5 6 7 8 9 |
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => 'nav-collapse collapse navbar-inverse-collapse', 'menu_class' => 'nav navbar-nav navbar-left', 'fallback_cb' => 'busiprof_fallback_page_menu', 'walker' => new busiprof_nav_walker()) ); ?> |
デフォルトでは、メニュー アイテムが選択されたときに、そのメニュー アイテムのcssのclass属性に「active」がセットされます。
※CSSで「active」を定義することで、アクティブ状態のメニュー アイテムの表示をカスタマイズできます。
設定方法について、今回の重点ではないので、説明を割愛します。
メニュー アイテムが「アクティブ」になる条件を自前で判定したい場合、nav_menu_css_classフィルタを利用します。
nav_menu_css_classフィルタ
テーマのfunction.phpに下記のようにを定義します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function my_header_menu_item_classes( $classes, $item, $args ) { if( 'primary' !== $args->theme_location ) return $classes; // 判定条件 $curr_post_type = get_curr_post_type(); // 私の場合、現在表示されているページのpost_typeを取得し、判定したいと思います。 if ($item->object == $curr_post_type) { // 判定 $classes[] = 'active'; } return array_unique( $classes ); } add_filter( 'nav_menu_css_class', 'my_header_menu_item_classes', 10, 3 ); |
※判定条件について、ご自身のニーズに合わせてコード修正してくださいませ。
nav_menu_css_classフィルタの
function my_header_menu_item_classes( $classes, $item, $args )
$item, $argsについて、
var_dumpしてみました。
ご参考まで
|
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
item=object(WP_Post)#7437 (40) { ["ID"]=> int(85) ["post_author"]=> string(1) "1" ["post_date"]=> string(19) "2018-12-08 17:40:43" ["post_date_gmt"]=> string(19) "2018-12-08 09:40:43" ["post_content"]=> string(0) "" ["post_title"]=> string(9) "メニューアイテム１" ["post_excerpt"]=> string(15) "メニューアイテム１説明" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(6) "closed" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(18) "%e5%b7%a5%e5%8e%82" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2018-12-15 21:50:48" ["post_modified_gmt"]=> string(19) "2018-12-15 13:50:48" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(56) "http://yourdomain.com/wp/xxx/" ["menu_order"]=> int(2) ["post_type"]=> string(13) "nav_menu_item" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["db_id"]=> int(85) ["menu_item_parent"]=> string(1) "0" ["object_id"]=> string(1) "0" ["object"]=> string(7) "menuitem1" ["type"]=> string(17) "post_type_archive" ["title"]=> string(9) "メニューアイテム１" ["type_label"]=> string(18) "Archive" ["url"]=> string(45) "http://yourdomain.com/wp/menuitem1/" ["target"]=> string(0) "" ["attr_title"]=> string(15) "メニューアイテム１説明" ["description"]=> string(0) "" ["classes"]=> array(4) { [0]=> string(0) "" [1]=> string(9) "menu-item" [2]=> string(32) "menu-item-type-post_type_archive" [3]=> string(24) "menu-item-object-menuitem1" } ["xfn"]=> string(0) "" ["current"]=> bool(false) ["current_item_ancestor"]=> bool(false) ["current_item_parent"]=> bool(false) } args=object(stdClass)#7282 (18) { ["menu"]=> object(WP_Term)#7425 (10) { ["term_id"]=> int(2) ["name"]=> string(10) "HeaderMenu" ["slug"]=> string(10) "headermenu" ["term_group"]=> int(0) ["term_taxonomy_id"]=> int(2) ["taxonomy"]=> string(8) "nav_menu" ["description"]=> string(0) "" ["parent"]=> int(0) ["count"]=> int(8) ["filter"]=> string(3) "raw" } ["container"]=> string(45) "nav-collapse collapse navbar-inverse-collapse" ["container_class"]=> string(0) "" ["container_id"]=> string(0) "" ["menu_class"]=> string(26) "nav navbar-nav navbar-left" ["menu_id"]=> string(0) "" ["echo"]=> bool(true) ["fallback_cb"]=> string(27) "busiprof_fallback_page_menu" ["before"]=> string(0) "" ["after"]=> string(0) "" ["link_before"]=> string(0) "" ["link_after"]=> string(0) "" ["items_wrap"]=> string(36) "%3$s" ["item_spacing"]=> string(8) "preserve" ["depth"]=> int(0) ["walker"]=> object(busiprof_nav_walker)#7424 (4) { ["tree_type"]=> array(3) { [0]=> string(9) "post_type" [1]=> string(8) "taxonomy" [2]=> string(6) "custom" } ["db_fields"]=> array(2) { ["parent"]=> string(16) "menu_item_parent" ["id"]=> string(5) "db_id" } ["max_pages"]=> int(1) ["has_children"]=> NULL } ["theme_location"]=> string(7) "primary" ["has_children"]=> bool(false) } |