web-dev-qa-db-ja.com

カスタムWalker関数を使用してwp_nav_menuの<a>リンクに属性を追加する

Wp_nav_menuを使ってメニューを生成しようとしています。私の期待する出力はこれです：

        <!-- Main Menu -->
<div class="navbar navbar-blue navbar-fixed-top" style="margin-top:74px">
    <div class="navbar-inner">
        <div class="container">


            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse collapse">

                                <ul class="nav">
                    <li class="divider-vertical"></li>
                    <li class="dropdown dropdown-hover">
                        <a href="dashboard.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">Dashboard <b class="caret"></b></a>
                        <!-- Dropdown Menu -->
                        <ul class="dropdown-menu">
                            <li><a href="dashboard.html?lang=en">Dashboard #2</a></li>
                            <li><a href="dashboard_1.html?lang=en">Dashboard #1</a></li>
                        </ul> 
                        <!-- End Dropdown Menu  -->
                    </li>
                    <li class="divider-vertical"></li>
                    <li class="active"><a href="gallery.html?lang=en">Photo Gallery</a></li>
                    <li class="divider-vertical"></li>
                    <li class="dropdown dropdown-hover">
                        <a href="site-pages.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">Site Pages <b class="caret"></b></a>
                        <!-- Dropdown Menu -->
                        <ul class="dropdown-menu">
                            <li><a href="site-pages.html?lang=en">View pages</a></li>
                            <li><a href="site-pages-add.html?lang=en">Add page</a></li>
                        </ul> 
                        <!-- End Dropdown Menu  -->
                    </li>
                    <li class="divider-vertical"></li>
                    <li class="dropdown dropdown-hover">
                        <a href="products.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">eCommerce <b class="caret"></b></a> 
                        <!-- Dropdown Menu -->
                        <ul class="dropdown-menu">
                            <li class="nav-header">Catalog</li>
                            <li><a href="categories.html?lang=en">Categories</a></li>
                            <li><a href="products.html?lang=en">Products</a></li>
                            <li><a href="products-add.html?lang=en">Add product</a></li>
                            <li class="divider"></li>
                            <li><a href="orders.html?lang=en">Orders</a></li>
                        </ul> 
                        <!-- End Dropdown Menu  -->
                    </li>
                    <li class="divider-vertical"></li>
                    <li class="dropdown dropdown-hover">
                        <a href="clients.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">Members <b class="caret"></b></a>
                        <!-- Dropdown Menu -->
                        <ul class="dropdown-menu">
                            <li><a href="clients.html?lang=en">Clients</a></li>
                            <li><a href="account.html?lang=en">Edit account</a></li>
                        </ul> 
                        <!-- End Dropdown Menu  -->
                    </li>
                    <li class="divider-vertical"></li>
                    <li class="dropdown dropdown-hover">
                        <a href="charts.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">Other <b class="caret"></b></a>
                        <!-- Dropdown Menu -->
                        <ul class="dropdown-menu">
                            <li><a href="charts.html?lang=en">Charts</a></li>
                        </ul> 
                        <!-- End Dropdown Menu  -->
                    </li>
                    <li class="divider-vertical"></li>
                    <li class="dropdown dropdown-hover">
                        <a href="documentation.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">Documentation <b class="caret"></b></a>
                        <!-- Dropdown Menu -->
                        <ul class="dropdown-menu">
                            <li><a href="documentation.html?lang=en">Overview</a></li>
                            <li><a href="documentation/features.html?lang=en">Features</a></li>
                            <li><a href="documentation/getting-started.html?lang=en">Getting Started</a></li>
                            <li><a href="documentation/customization-guide.html?lang=en">Customization Guide</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Powered by</li>
                            <li><a href="documentation/credits.html?lang=en">Credits</a></li>
                        </ul> 
                        <!-- End Dropdown Menu  -->
                    </li>
                    <li class="divider-vertical"></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>

</div>
<!-- End Main Menu -->

これまでのところ、wp_nav_menuにカスタムのwalker関数を使用して上記のようにほぼすべてのHTMLを生成することはできましたが、 class = "dropdown-toggle" data-toggle = "dropdown" をタグ内に挿入できません。これは私が推測するドロップダウンを切り替えることを可能にします（現在トップメニューだけを生成することができます。サブメニューはHTMLに表示されますが、ブラウザには表示されません）。

これが私のこれまでの努力です。

        <!-- Main Menu -->
<div class="navbar navbar-blue navbar-fixed-top" style="margin-top:74px">
    <div class="navbar-inner">
        <div class="container">


            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a> 
<?php class My_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"dropdown-menu\">\n";
}
}
$defaults = array(
'theme_location'  => '',
'menu'            => '',
'container'       => 'div',
'container_class' => 'nav-collapse collapse',
'container_id'    => '',
'menu_class'      => 'nav',
'menu_id'         => '',
'echo'            => true,
'fallback_cb'     => 'wp_page_menu',
'before'          => '',
'after'           => '',
'link_before'     => '',
'link_after'      => '',
'items_wrap'      => '<ul id="%1$s" class="%2$s"><li class="divider-vertical"></li>%3$s</ul>',
'depth'           => 0,
'walker'          => new My_Walker_Nav_Menu
     );

     wp_nav_menu( $defaults );

      ?>
        </div>
    </div>

</div>
<!-- End Main Menu -->

上記の望ましいHTML出力を得るために私のカスタムwalker関数を修正する手助けを誰かができますか？前もって感謝します。

menuswalker
3
Wordpress Kid

start_elメソッドと同じように、 start_lvl メソッドを変更します。最も基本的には、 この行を変更することを意味します ：

$item_output .= '<a'. $attributes .'>';

このようになります。

$item_output .= '<a class="dropdown-toggle" data-toggle="dropdown"'. $attributes .'>';

すべてのサブメニューにその文字列を挿入しないようにするには、より複雑なロジックが必要になるようですが、それがアイデアです。

3
s_ha_dum