###追記 : 警告エラーの解消
こちらの記事を参考にstart_lvl( &$output, $depth = 0, $args = array())
とstart_el( &$output, $item, $depth = 0, $args = array(), $id=0 )
に修正してみたところ、警告エラーは解消されました。
WordPress で PHP7.0にアップデートしたら start_lvl() と start_el() でエラーが出た場合の対処法
詳細メニュー設定>CSS クラスでliのクラス付与もできました。
divで囲い、そのdivとulに各クラスをつけるところまではできておらず、初期のdivなしulにclass="sub-menu"が付いた状態です。
前提・実現したいこと
WordPress、PHP初学者です。
下記のようなことを考えています。
いろんな記事を読みながら試しているのですが、start_lvlとstart_elがうまくいかず、debugで警告が表示されます。
- メガメニューで3階層まであるメニューを表示させたい
- クリックで2階層以降を展開させるために、各階層をdivで囲みたい
- 各階層ごとにdivとliにクラスを分けたい
#####表示させたいHTML
<nav class="nav_global-container"> <ul class="nav_global-parents"> <li class="nav_global-parent is_toggle"> 親メニュー <div class="nav_global-children-container"> <ul class="nav_global-children"> <li class="nav_global-child is_opened"> 子メニュー <div class="nav_global-grantChildren-container is_active"> <ul class="nav_global-grantChildren"> <li class="nav_global-grantChild"> 孫メニュー </li> </ul> </div> </li> </ul> </div> </li> </ul> </nav>
エラーメッセージ
Warning: Declaration of megamenu::start_lvl(&$output, $depth) should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = NULL) in /var/www/html/wp-content/themes/autoFun/functions.php on line 17 Warning: Declaration of megamenu::start_el(&$output, $item, $depth, $args = Array, $id = 0) should be compatible with Walker_Nav_Menu::start_el(&$output, $item, $depth = 0, $args = NULL, $id = 0) in /var/www/html/wp-content/themes/autoFun/functions.php on line 42
該当のソースコード
function.php
1class megamenu extends Walker_Nav_Menu { 2//start_lvlを修正 3 function start_lvl( &$output, $depth = 0, $args = array()) { 4 5 $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); 6 $display_depth = ( $depth + 1);//視覚的に分かりやすいように1〜 7 $classes = array( 8 'nav_global-children',//2階層目のulに付けたいクラス 9 ( $display_depth >=3 ? 'nav_global-grantChildren' : '' ),//3階層目のulに付けたいクラス 10 ); 11 $class_names = implode( ' ', $classes ); 12 $classes_container = array( 13 'nav_global-children-container', //2階層目を囲うdivに付けたいクラス 14 ( $display_depth >=3 ? 'nav_global-grantChildren-container' : '' ),//3階層目を囲うdivに付けたいクラス 15 ); 16 $class_names_container = implode( ' ', $classes_container ); 17 18 $output .= '\n' . $indent . '<div class="'. $class_names_container . '\n' . '>' .'<ul class="' . $class_names . '">' . '\n'; 19 } 20//start_elを修正 21 function start_el( &$output, $item, $depth, $args=array(), $id=0 ) { 22 global $wp_query; 23 $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); 24 25 $depth_classes = array( 26 ( $depth == 0 ? 'nav_global-parent' : 'nav_global-child' ),//1階層目のliにつけたいクラス 27 ( $depth >=1 ? 'nav_global-child' : 'nav_global-grantChild' ),//2階層目のliにつけたいクラス 28 ( $depth >= 2 ? 'nav_global-grantChild' : '' ),//3階層目のliにつけたいクラス 29 ); 30 $depth_class_names = esc_attr( implode( ' ', $depth_classes ) ); 31 32 $classes = empty( $item->classes ) ? array() : (array) $item->classes; 33 $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) ); 34 35 $output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">'; 36//属性の設定 37 $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; 38 $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; 39 $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; 40 $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; 41 $attributes .= ' class="menu-link ' . ( $depth > 0 ? 'nav_global-child-link' : 'nav_global-parent-link' ) . '"'; 42 43 $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s', 44 $args->before, 45 $attributes, 46 $args->link_before, 47 apply_filters( 'the_title', $item->title, $item->ID ), 48 $args->link_after, 49 $args->after 50 ); 51 52 $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); 53 } 54 }
header.php
1<?php 2 wp_nav_menu ( $megamenu = array ( 3 'menu' => '', 4 'menu_class' => 'nav_global-parents', 5 'menu_id' => '', 6 'container' => 'nav', 7 'container_class' => 'nav_global-container', 8 'container_id' => '', 9 'fallback_cb' => 'wp_page_menu', 10 'before' => '', 11 'after' => '', 12 'link_before' => '', 13 'link_after' => '', 14 'echo' => true, 15 'depth' => 0, 16 'walker' => new Walker_Nav_Menu(), 17 'theme_location' => 'global', 18 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 19 )); 20?>
バージョン
バージョン 5.8
あなたの回答
tips
プレビュー