2013-10-11 80 views
1

我使用帶Bootstrap的Wordpress下拉菜單(http://astronautweb.co/2012/10/wordpress-dropdown-bootstrap/)。我已將此添加到我的Wordpress主題中。如何添加特殊內容到「帶Bootstrap的WordPress下拉菜單」?

我必須在wp_nav_menu中的div關閉之前將社交共享圖標div添加到代碼中。否則,navbar-right div會關閉。我如何將此添加到wp_nav_menu?我的意思是,如果我想添加其他東西或更多東西,我該怎麼做?例如,如果我想在wp_nav_menu創建的div關閉之前添加「Hello」,我該怎麼做?

<?php 
      wp_nav_menu(array(
       'menu'    => 'primary', 
       'theme_location' => 'primary', 
       'depth'    => 2, 
       'container'   => 'div', 
       'container_class' => 'collapse navbar-collapse navbar-ex1-collapse', 
       'menu_class'  => 'nav navbar-nav', 
       'fallback_cb'  => 'wp_bootstrap_navwalker::fallback', 
       'walker'   => new wp_bootstrap_navwalker()) 
      ); 
     ?> 

     <div class="navbar-right"> 
       <button type="button" class="btn btn-twitter navbar-btn"><i class="icon-twitter"></i></button> 
       <button type="button" class="btn btn-facebook navbar-btn"><i class="icon-facebook"></i></button> 
       <button    type="button" class="btn btn-foursquare navbar-btn"><i class="icon-foursquare"></i></button> 
     </div> 
+0

看看:https://github.com/twittem/wp-bootstrap-navwalker這包含一個完整的導航欄代碼示例。 –

回答

0

我看到你列出的教程是使用我的walker類,它應該使這很容易。最好的辦法是將wp_nav_menu()容器設置爲false並手動包裝菜單。我可能會將社交部分作爲單獨的wp_nav_menu()添加,因此它不會被硬編碼到主題中。

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="<?php bloginfo('url'); ?>"> 
       <?php bloginfo('name'); ?> 
      </a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <?php 
       wp_nav_menu(array(
        'menu'  => 'primary_menu', 
        'theme_location' => 'primary_menu', 
        'depth'  => 2, 
        'container' => false, 
        'menu_class' => 'nav navbar-nav', 
        'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 
        'walker' => new wp_bootstrap_navwalker()) 
       ); 

       wp_nav_menu(array(
        'menu'  => 'social_menu', 
        'theme_location' => 'social_menu', 
        'depth'  => 2, 
        'container' => false, 
        'menu_class' => 'nav navbar-nav navbar-right', 
        'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 
        'walker' => new wp_bootstrap_navwalker()) 
       ); 
      ?> 
     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav>