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外观中创建一个walker：

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);
    }
    }

在 div .navbar-collapse 的 header.php（如果您的菜单位置是标题）中： 删除 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- 然后转到 wp-admin 外观=>菜单 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);

我认为它会适合你