带有 w3css 框架的 Wordpress 导航

Question

我正在尝试将以下代码实现为所有设备上的导航栏。但是，我无法这样做。我在 WordPress 中使用 w3-css 框架。

<div class="w3-top w3-navbar">
 <ul class="w3-navbar w3-blue-grey w3-left-align ">
   <li><a href="<?php  echo home_url(); ?>" class="w3-padding-large w3-large w3-highway-blue"><i class="topnav-icons fa fa-home w3-margin-right"></i><?php  bloginfo ('name'); ?></a></li>

    <?php 

$args = array(

    'theme_location' => 'primary',
    'container_class' => 'w3-top',
    'menu_class' => 'w3-navbar',


);


?>

<?php  wp_nav_menu( $args); ?>
 <li class="w3-hide-small w3-right w3-padding-large">+91 987654321</li>
 </ul>
</div>


  <!-- Navbar on small screens -->
  <div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:51px">
  <ul class="w3-navbar w3-left-align w3-large w3-theme">
   <?php  wp_nav_menu($args); ?>
   </ul>
   </div>

Answer 1

在 Appearance->Menus 下的主题设置中，确保您希望输出的菜单的位置设置为“主要”，因为您在 $args 数组中设置了该设置。

另外，我注意到您的第二个 wp_nav_menu() 实例不包含 $args 数组。如果希望第一个和第二个导航菜单输出是相同的导航菜单，则至少需要在数组的“theme_location”索引中添加一个指定相同位置的数组。

Answer 2

尝试在您的 functions.php 中使用一些 过滤器：

function w3css_nav_menu_submenu_css_class_filter ($classes, $args) {
    if ($args->theme_location === 'primary') {
        $classes []= 'w3-dropdown-content w3-bar-block w3-card';
    }
    else {
        $classes []= 'w3-margin-left';
    }
    return $classes;
}
add_filter('nav_menu_submenu_css_class', 'w3css_nav_menu_submenu_css_class_filter', 10, 2);

function w3css_nav_menu_css_class_filter ($classes, $item, $args, $depth) {
    if ($args->theme_location === 'primary') {
        $classes []= 'w3-bar-item';
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'w3css_nav_menu_css_class_filter', 10, 4);

function w3css_nav_menu_link_attributes_filter ($atts, $item, $args) {
    if ($args->theme_location === 'primary') {
        $atts['class'] = 'w3-button';
    }
    return $atts;
}
add_filter('nav_menu_link_attributes', 'w3css_nav_menu_link_attributes_filter', 10, 3);

// From: https://stackoverflow.com/questions/8448978/wordpress-how-do-i-know-if-a-menu-item-has-children
function menu_set_dropdown( $sorted_menu_items, $args ) {
    if ($args->theme_location === 'primary') {
        $last_top = 0;
        foreach ( $sorted_menu_items as $key => $obj ) {
            // it is a top lv item?
            if ( 0 == $obj->menu_item_parent ) {
                // set the key of the parent
                $last_top = $key;
            } else {
                $sorted_menu_items[$last_top]->classes['w3-dropdown-hover'] = 'w3-dropdown-hover';
            }
        }
    }
    return $sorted_menu_items;
}
add_filter( 'wp_nav_menu_objects', 'menu_set_dropdown', 10, 2 );

然后你可以在你的header.php中调用菜单函数：

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'items_wrap'      => '<ul id="%1$s" class="w3-bar w3-bar-item %2$s">%3$s</ul>',
    'add_items_class' => '',
    'container'       => false
) );

输出类似于：

<ul id="menu-primary-menu" class="w3-bar w3-bar-item menu">
    <li id="menu-item-139" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children w3-dropdown-hover menu-item-139 w3-bar-item">
        <a href="http://example.org/w3css/" aria-current="page" class="w3-button">Home</a>
        <ul class="sub-menu w3-dropdown-content w3-bar-block w3-card">
            <li id="menu-item-143" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-143 w3-bar-item">
                <a href="http://example.org/about/" class="w3-button">About</a>
            </li>
        </ul>
    </li>
    <li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140 w3-bar-item">
        <a href="http://example.org/about/" class="w3-button">About</a>
    </li>
    <li id="menu-item-141" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-141 w3-bar-item">
        <a href="http://example.org/blog/" class="w3-button">Blog</a>
    </li>
    <li id="menu-item-142" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142 w3-bar-item">
        <a href="http://example.org/contact/" class="w3-button">Contact</a>
    </li>
</ul>

顺便说一句，你可以从 W3CSS 入门模板中复制很多功能：https://github.com/webarthur/w3css-starter

我希望我有所帮助。 =)