【问题标题】:Wordpress Custom Navigation MenusWordPress 自定义导航菜单
【发布时间】:2014-04-01 14:53:57
【问题描述】:

您好,我有以下来自 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 或其他中更改哪些内容。

提前致谢

【问题讨论】:

    标签: wordpress menu navigation


    【解决方案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');
    

    【讨论】:

      【解决方案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);
      

      我认为它会适合你

      【讨论】:

        猜你喜欢
        • 2014-02-26
        • 1970-01-01
        • 2015-04-04
        • 2023-03-30
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-03-29
        相关资源
        最近更新 更多