web-dev-qa-db-ja.com

wp_nav_menuリンクアンカータグ内にspanクラスとiタグを追加

トップレベルの項目にクラスを追加する例を見つけたので、サブ項目を持つメニュー項目に矢印を表示することができますが、既に組み込まれているWordPressクラスに対処するのはひどいようです。 、それはただすべての国家を台無しにします。

現在のナビゲーションメニューはこのようなものです<li><a>Text</a></li>

代わりに、親の<span class="something"><i class="something"></i></span>タグ内に<a></a>を追加する方法はありますか？

例

<li class="main-nav__item">
      <a class="main-nav__item-link" href="index.html">
            <span class="main-nav__item-icon-wrapper">
                   <i class="main-nav__item-icon icon-home"></i>
            </span>
            <span class="main-nav__item-content">Home</span>
      </a>
</li>
<li class="main-nav__item">
        <a class="main-nav__item-link" href="index.html">
               <span class="main-nav__item-icon-wrapper">
                     <i class="main-nav__item-icon icon-Blog"></i>
               </span>
               <span class="main-nav__item-content">Blog</span>
        </a>
</li>

現在のコード親であるタグの外側にタグを追加します

class Walker_Nav_Menu extends Walker {

    public function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"main-nav\">\n";
    }
}
menusnavigationwalker
1
ASMSaief

wp_nav_menu（） 引数を次のように使用できます。

wp_nav_menu( array(
    'menu'          => 'Whatever Your Menu Name Is',
    'link_before'   => '<span class="main-nav__item-icon-wrapper"><i class="main-nav__item-icon icon-home"></i></span><span class="main-nav__item-content">',
    'link_after'    => '</span>'
) );

link_beforeと*_afterはテキストinsideの前後に何かを追加します。通常の引数beforeとafterはリンク全体の前後に何かを追加しますが、それでもリスト項目の内側に追加します。 。

これはそれらをallリストアイテムに追加しますbutあなたはそれらをスタイルしたり表示しないためにCSSを使うことができますがあなたが望むそして私はそれが速くて簡単だと思いますウォーカー.

1
Howdy_McGee