質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

0回答

1641閲覧

wp_nav_menu()で孫メニューまでを階層で分岐してdivで囲むには

necoyatsu

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2021/09/07 11:07

編集2021/09/08 04:35

###追記 : 警告エラーの解消
こちらの記事を参考に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で警告が表示されます。

  1. メガメニューで3階層まであるメニューを表示させたい
  2. クリックで2階層以降を展開させるために、各階層をdivで囲みたい
  3. 各階層ごとに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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問