「wp_nav_menu」で出力しているメニューの「最後尾に<span>を追加する」

Question

前提・実現したいこと

現在wordpressでカスタムニューを「wp_nav_menu」で出力しています。
最後尾に<span>を追加したいです。

下記のページを参考に<ul><li>は削除済みです。
https://hacknote.jp/archives/5606/

目的は下記・参考ページの様な「マウスオーバーでアンダーラインが追従する」メニューにする事です。

http://webrocketsmagazine.com/entry/20111221/animate-menu-underline-using-jquery.html

【現在の状態】

<nav>
 <a></a>
 <a></a>
 <a></a>
</nav>

【実現したい（最後尾に<span>を追加する）】

<nav>
 <a></a>
 <a></a>
 <a></a>
 <span></span>
</nav>

発生している問題・エラーメッセージ

上記の【実現したい（最後尾に<span>を追加する）】様に
最後尾に<span>を追加したいです。


wp_nav_menu 関数を一通り見てみたのですが、該当するものがなく
funtions.phpで追加するのでしょうか？

該当のソースコード

      <nav class="gnav">
         <?php
            $menuParameters = array('echo' => false,);
            echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
         ?>
      </nav>

試したこと

下記のページを参考に<ul><li>は削除してみました。

https://hacknote.jp/archives/5606/

補足情報（FW/ツールのバージョンなど）

WordPress 4.9.5

Comments

[m.ts10806]

そこにspanを入れるのはhtmlの構造上おかしいのですが、なぜそうしたいのでしょうか？目的と本来のゴール部分を明確に記載してください。

[jnbdi8sh34e]

お早い閲覧ありがとうございます。 元々html部分は自分が組んだものではなかったのですが、 <ul>直下に<span>は確かに構造がおかしかったので、修正しております。 メニュー部分のタグを<ul><li>から<a>タグに修正しました。 修正に伴いまして、質問内容も編集しております。 下記の参考ページの様な「マウスオーバーでアンダーラインが追従する」メニューにしたかったらしいです<(_ _)> http://webrocketsmagazine.com/entry/20111221/animate-menu-underline-using-jquery.html 伝わる様意識してない様修正してみたのですが、まだ足りない部分ありましたら申し訳ございません。。。

Answer 1

walkerを利用してカスタマイズするのが一番の近道では？
http://blog.it.churaumi.tv/wordpress-walker-nav-menu

※コメントにも書いてある通り構造的におかしいのでそのままspanを利用することはオススメしません

Comments

[jnbdi8sh34e]

元々html部分は自分が組んだものではなかったのですが、
<ul>直下に<span>は確かに構造がおかしかったので、修正しております；

Walker_Nav_Menuというものもあるのですね。。
勉強不足です；ありがとうございます。参考にさせて頂きます。

Answer 2

質問本文がかなり変わりましたね。

      <nav class="gnav">
         <?php
            $menuParameters = array('echo' => false,);
            echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
         ?>
         <span><!-- こういうことではないんでしょうか --></span>
      </nav>

Answer 3

WordPress Codexに書かれていると思うのですが……。

テンプレートタグ/wp nav menu
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_nav_menu

'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',

これを

'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s<span></span></ul>',

とすればいいのではないですか。

ただ、

 'container' => false,

囲わないように指定しているということは、「wp_nav_menu」以外の出力で囲っているということだと思うのですが……。なら、そもそも「wp_nav_menu」は関係ないような……。

参考まで。

Comments

[jnbdi8sh34e]

質問内容を編集している間にご回答頂いた様で誠にありがとうございます<(_ _)>;;
参考にさせて頂きます。ありがとうございます。