將bootstrap導航轉換爲wordpress

大家好我製作的引導菜單有點複雜，我想將它轉換爲Wordpress。我的主菜單位於中間，左側有徽標，右側有搜索欄和下拉菜單。我在這個主題上讀了很多，但沒有嘗試過。這是我的資產淨值的HTML代碼：將bootstrap導航轉換爲wordpress

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <hr class="blueLine"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <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'); ?>"> 
       <img src="<?php bloginfo('template_directory'); ?>/img/fresiusLogo.png"> 
      </a> 
     </div> 
     <div class="navbar-collapse navbar-center collapse"> 
      <ul class="nav navbar-nav navbar-center"> 
       <li class=""><a href="enternal.html">Enternal <br> Nutrition</a></li> 
       <li class=""><a href="indi.html">INDI <br> Partnership</a></li> 
       <li class=""><a href="parental.html">Parental <br> Nutrition</a></li> 
      </ul> 
      <div class="col-sm-3 col-md-3 pull-right"> 
       <form class="navbar-form" role="search"> 
        <div class="input-group"> 
         <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> 
         <div class="input-group-btn"> 
          <button class="btn btn-default" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button> 
         </div> 
        </div> 
       </form>       
       <li class="dropdown"> 
        <span>Fresenius Kabi Globa</span> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Select Website 
        <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="https://www.google.com/">Test 1</a></li> 
         <li><a href="https://www.google.com/">Test 2</a></li> 
         <li><a href="https://www.google.com/">Test 3</a></li> 
        </ul> 
       </li> 
      </div> 
     </div>  
    </div> 
</div>

我曾嘗試下面的說明我在網上找到，但沒有工作對我來說我一直在使用WP-引導-navwalker也嘗試過，但無法與我的代碼實現它。我的一個問題是，例如，當我點擊我的下拉菜單它不會做任何事情，因爲我的目標＃是否有目標＃與PHP？有沒有人有任何想法如何將其轉換爲Worpress？

來源

2017-05-16 Zvezdas1989

這是非常清楚你所要求的。也許你可以包含你試過的教程的鏈接（一個或兩個），以及指向運行你的代碼的示例頁面的鏈接。 –

@PhillHealey我實際上使用了一些JQ和wp-bootstrap-navwalker。 Meybe我應該刪除這篇文章。 – Zvezdas1989

不，您應該在下面發佈您的答案，然後回來並在2天內將其標記爲已接受。這樣，其他人可以從您的問題和解決方案中學習。 –

好了，所以我得到這個使用jQuery工作，wp_bootstrap_navwalker.php 這是我的代碼現在的樣子：

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <hr class="blueLine"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <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'); ?>"> 
       <img src="<?php bloginfo('template_directory'); ?>/img/fresiusLogo.png"> 
      </a> 
     </div> 
     <div class="navbar-collapse navbar-center collapse"> 
      <ul class="nav navbar-nav navbar-center"> 
       <?php 
        wp_nav_menu(array(
         'menu'    => 'primary', 
         'theme_location' => 'primary', 
         'depth'    => 2, 
         'container'   => 'div', 
         'container_class' => 'collapse navbar-collapse', 
         'container_id'  => 'bs-example-navbar-collapse-1', 
         'menu_class'  => 'nav navbar-nav', 
         'fallback_cb'  => 'WP_Bootstrap_Navwalker::fallback', 
         'walker'   => new WP_Bootstrap_Navwalker()) 
        ); 
       ?> 
      </ul> 
      <div class="col-sm-3 col-md-3 pull-right"> 
       <form class="navbar-form" role="search"> 
        <div class="input-group"> 
         <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> 
         <div class="input-group-btn"> 
          <button class="btn btn-default" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button> 
         </div> 
        </div> 
       </form>       
       <li class="dropdown"> 
        <span>Fresenius Kabi Globa</span> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Select Website 
        <span class="caret"></span></a> 
        <ul class="dropdown-menu sub-menu"> 
         <li><a href="https://www.google.com/" target="_blank">Test 1</a></li> 
         <li><a href="https://www.google.com/" target="_blank">Test 2</a></li> 
         <li><a href="https://www.google.com/" target="_blank">Test 3</a></li> 
        </ul> 
       </li> 
      </div> 
     </div>  
    </div> 
</div>

而且你需要使用jQuery做下拉工作。我建議您閱讀這兩個職位：
jQuery .toggle() to show and hide a sub-menu
Wordpress drop-down-menu open on click

來源

2017-05-16 09:16:17 Zvezdas1989

您可以使用walker類來設置引導菜單。您需要在function.php內附上wp_bootstrap_navwalker.php文件，或者您可以直接添加代碼。

你可以從here下載文件或複製代碼。

只要使用這個文件，然後調用沃克類從wp_nav_menu功能是這樣的：

<?php 
    wp_nav_menu(array(
     'menu' => 'top_menu', 
     'depth' => 2, 
     'container' => false, 
     'menu_class' => 'nav', 
     //Process nav menu using our custom nav walker 
     'walker' => new wp_bootstrap_navwalker()) 
    ); 
?>

您可以按照this鏈接深入瞭解這個概念。

謝謝。

來源

2017-05-16 09:01:15

將bootstrap導航轉換爲wordpress

回答

相關問題