Wordpress自定義導航菜單

Question

嗨，我從html的CSS模板有以下導航菜單。我想在wordpress導航中更改它。但CSS不能在那裏工作。我怎樣才能保存的CSS不失其功能。

<!--Header--> 
<header class="navbar navbar-fixed-top"> 
    <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> 
      <a id="lgo" class="pull-left" href="index.html"><H1>Global BizVisions, LLC</h1></a> 
      <div class="nav-collapse collapse pull-right"> 
       <ul class="nav"> 
        <li class="active"><a href="index.html">Home</a></li> 
        <li><a href="about-us.html">About Us</a></li> 
        <li><a href="services.html">Services</a></li> 
        <li><a href="portfolio.html">Portfolio</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="icon-angle-down"></i></a> 
         <ul class="dropdown-menu"> 
          <li><a href="career.html">Career</a></li> 
          <li><a href="blog-item.html">Blog Single</a></li> 
          <li><a href="faq.html">FAQ</a></li> 
          <li><a href="pricing.html">Pricing</a></li> 
          <li><a href="404.html">404</a></li> 
          <li><a href="typography.html">Typography</a></li> 
          <li><a href="registration.html">Registration</a></li> 
          <li class="divider"></li> 
          <li><a href="privacy.html">Privacy Policy</a></li> 
          <li><a href="terms.html">Terms of Use</a></li> 
         </ul> 
        </li> 
        <li><a href="blog.html">Blog</a></li> 
        <li><a href="contact-us.html">Contact</a></li> 
        <li class="login"> 
         <a data-toggle="modal" href="#loginForm"><i class="icon-lock"></i></a> 
        </li> 
       </ul>   
      </div><!--/.nav-collapse --> 
     </div> 
    </div> 
</header> 
<!-- /header --> 

我所做的是這樣的：

<!--Header--> 
<header class="navbar navbar-fixed-top"> 
    <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> 
      <a href="<?php echo get_option('home');?>" style="margin:2% 0 0 0;"><h1>Global BizVisions, LLC</h1></a> 
      <div class="nav-collapse collapse pull-right"> 
       <ul> 
        <?php wp_nav_menu(array('sort_column' => 'menu_order', 'container_class' => 'nav')); ?> 
       <ul> 
      </div><!--/.nav-collapse --> 
     </div> 
    </div> 
</header> 
<!-- /header --> 

，什麼是我需要的functions.php或其他改變的事物。

在此先感謝

Answer 1

你需要在你的functions.php外觀創建一個學步車：

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2); 
function special_nav_class($classes, $item){ 
if(in_array('current-menu-item', $classes)){ 
     $classes[] = 'active '; 
} 
return $classes; 
} 
class My_Custom_Nav_Walker extends Walker_Nav_Menu { 

function start_lvl(&$output, $depth = 0, $args = array()) { 
    $output .= "\n<ul class=\"dropdown-menu\">\n"; 
} 

function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { 
    $item_html = ''; 
    parent::start_el($item_html, $item, $depth, $args); 

    if ($item->is_dropdown && $depth === 0) { 
     $item_html = str_replace('<a', '<a class="dropdown-toggle" data-toggle="dropdown"', $item_html); 
     $item_html = str_replace('</a>', ' <b class="caret"></b></a>', $item_html); 
    } 

    $output .= $item_html; 
    } 

    function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) { 
    if ($element->current) 
    $element->classes[] = 'active'; 

    $element->is_dropdown = !empty($children_elements[$element->ID]); 

    if ($element->is_dropdown) { 
     if ($depth === 0) { 
      $element->classes[] = 'dropdown'; 
     } elseif ($depth === 1) { 
      // Extra level of dropdown menu, 
      // as seen in http://twitter.github.com/bootstrap/components.html#dropdowns 
      $element->classes[] = 'dropdown-submenu'; 
     } 
    } 

    parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output); 
    } 
    } 

在你的header.php

（如果你的菜單位置是頭部）在DIV .navbar崩潰： 擦除ul標籤。 的UL是在wp_nav_menu創建：

<?php wp_nav_menu(array(
'theme_location' => 'nav_social', 
'container'  => false, 
'walker' => new My_Custom_Nav_Walker(), 
'items_wrap'  => '<ul id="your_nav" class="navbar-right"></li>%3$s</ul>' 
) 
); ?> 

記住，你需要在functions.php的

function register_my_menus(){ 
register_nav_menus(array(
'your_nav' => __('your_nav', 'siddharta naranjo')));}add_action('init','register_my_menus'); 

Answer 2

以及

1-去可溼性粉劑管理員然後 外觀=創建菜單> menu 2-創建菜單

$nav_menu= array(
    'theme_location' => '', 
    'menu'   => 'here menu name', 
    'container'  => 'div', 
    'container_class' => '', 
    'container_id' => '', 
    'menu_class'  => 'sticky', 
    'menu_id'   => '', 
    'echo'   => true, 
    'fallback_cb'  => 'wp_page_menu', 
    'before'   => '', 
    'after'   => '', 
    'link_before'  => '', 
    'link_after'  => '', 
    'items_wrap'  => '<ul id="%1$s">%3$s</ul>', 
    'depth'   => 0, 
    'walker'   => '' 
); 
wp_nav_menu($nav_menu); 

我認爲它會適合你的