submenu表示時に親メニューの名前を追加、表示するには
-
メニューをオンマウスすればサブメニューが表示されるのが通常ですが、その時に親の名前を子メニューの上に表示させたいと思っています。
コードで書くとこのような感じです。
<ul class="main-nav"> <li> <a href="#">リンク1</a> <ul class="sub-menu"> <h2>これは「リンク1」のサブメニューです</h2> <li>リンク1-1</li> <li>リンク1-2</li> </ul> </li> <li><a href="#">リンク2</a></li> <li><a href="#">リンク3</a></li> </ul>
h2で囲ってある部分がそれです。
wp-includes/nav-menu-template.phpを編集して、h2タグを追加する所まではできたのですが、これがリンク1でもリンク2でもそれぞれのサブメニューの親の名前が出るようにしたいのですが、なかなか上手くいきません。
ちなみにnav-menu-template.phpで編集したところはこのようにしてあります。
*47行目あたりpublic function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat("\t", $depth); $output .= "\n$indent<ul class=\"sub-menu\"><h2></h2>\n"; }
どなたかご教示いただければと思います。よろしくお願いいたします。
-
似たような質問があります。
グローバルナビのsub-menuにdivタグを入れる方法
https://ja.forums.wordpress.org/topic/148627?replies=4基本的に、コアファイルと呼ばれる wp-includes 以下のファイルを書き換えないほうが良いです。WordPressアップデート時に「なかったこと」になります。
「メニュー項目用の親クラスを追加する方法」参考にして、予め
<h2>これは「リンク1」のサブメニューです</h2>
という、部分をソースとしてかならず出るようにしておいて、あとは js なり css なりで「メニューをオンマウスすればサブメニューが表示される」というのを実装すればいいかと。>gatespace様
ご回答ありがとうございます。
教えていただいた方法を用いて少し工夫してやってみたりしましたが、やはり上手くいきませんでした。すいません。上記の例コードではリンク1にしかサブメニューがありませんが、これがリンク2にも3にもサブメニューがあり、それぞれリンク2をオンマウスしたら「これはリンク2のサブメニューです」と表示されればいいのですが。
何かh2の間に親の名前を呼び出すものがあればいいのですが・・・テーマの functions.php に以下をコピペでいけるんじゃないかしら
add_filter( 'wp_nav_menu', function( $nav_menu, $args ) { return preg_replace( '@<a ([^>]+)>(.+)</a>\n+\t*<ul class="sub-menu">@m', '<a $1>$2</a><ul class="sub-menu"><li>'. '<h2>$2</h2>'. '</li>', $nav_menu ); }, 10, 2 );
- トピック「submenu表示時に親メニューの名前を追加、表示するには」には新たに返信することはできません。