menu_class WordPress 导航。定义多个嵌套类的问题答案

【问题标题】：menu_class wordpress navigation. problems defining multiple nested classesmenu_class WordPress 导航。定义多个嵌套类的问题
【发布时间】：2014-12-02 03:55:50
【问题描述】：

所以我是 wordpress 的新手，并在 dashboard 中创建了一个菜单。这是我在header.php 文件中的代码......

<?php function register_my_menu() {
      register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' ); ?>

    <?php 

    function register_my_menus() {
      register_nav_menus(
        array(
          'header-menu' => __( 'Header Menu' ),
          'extra-menu' => __( 'Extra Menu' )
        )
      );
    }
    add_action( 'init', 'register_my_menus' );

    ?>




    <?php



     wp_nav_menu( array( 
        'theme_location' => 'inner-header',
        'menu_class' => 'menubar',


     ) );

     ?>

我遇到的问题是，当我定义menu_class 时，它只有在我调用单个单词类时才有效。这是下面的CSS。我需要整个菜单与所有菜单样式。

ul.menubar {
  background: white;
  list-style: none;
  padding: 0 10px;
  height: 40px;
  padding-bottom: 30px;
  float: right;
}
/* line 157, ../scss/my-styles.scss */
ul.menubar > li {
  display: inline-block;
  position: relative;
}
/* line 161, ../scss/my-styles.scss */
ul.menubar > li > a {
  color: black;
  display: block;
  padding: 10px 14px;
  text-decoration: none;
}
/* line 167, ../scss/my-styles.scss */
ul.menubar > li > a:hover {
  background: #29a7f5;
  color: white;
}
/* line 170, ../scss/my-styles.scss */
ul.menubar > li > ul {
  display: none;
  position: absolute;
  top: 100%;
  background: white;
  padding: 10px 0;
}
/* line 177, ../scss/my-styles.scss */
ul.menubar > li > ul > li > a {
  color: black;
  display: block;
  padding: 8px 20px;
  text-decoration: none;
}
/* line 183, ../scss/my-styles.scss */
ul.menubar > li > ul > li > a:hover {
  background: #29a7f5;
  color: white;
}
/* line 188, ../scss/my-styles.scss */
ul.menubar > li.is-selected > a {
  background: #29a7f5;
  color: white;
}
/* line 189, ../scss/my-styles.scss */
ul.menubar > li.is-selected > ul {
  display: block;
}

如果我将 PHP 中的类定义为 ul.menubar，它就不起作用。更不用说尝试定义所有其他类，如 ul.menubar > li > a 。 . .等等等等

任何帮助将不胜感激！！非常感谢

【问题讨论】：

标签： php wordpress class menu navigation

【解决方案1】：

我认为这可能会帮助您... 这种格式采用的菜单基本上在wordpress中...

    <ul class="menubar">

        <li id="menu-item-1" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a title="" href="">Menu1</a></li>

    <li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a title="" href="">Menu2</a></li>

    </ul>

参考：http://codex.wordpress.org/Function_Reference/wp_nav_menu

【讨论】：

【解决方案2】：

试试这个...

            .menubar {
  background: white;
  list-style: none;
  padding: 0 10px;
  height: 40px;
  padding-bottom: 30px;
  float: right;
}
/* line 157, ../scss/my-styles.scss */
.menubar > li {
  display: inline-block;
  position: relative;
}
/* line 161, ../scss/my-styles.scss */
.menubar > li > a {
  color: black;
  display: block;
  padding: 10px 14px;
  text-decoration: none;
}
/* line 167, ../scss/my-styles.scss */
.menubar > li > a:hover {
  background: #29a7f5;
  color: white;
}
/* line 170, ../scss/my-styles.scss */
.menubar > li > ul {
  display: none;
  position: absolute;
  top: 100%;
  background: white;
  padding: 10px 0;
}
/* line 177, ../scss/my-styles.scss */
.menubar > li > ul > li > a {
  color: black;
  display: block;
  padding: 8px 20px;
  text-decoration: none;
}
/* line 183, ../scss/my-styles.scss */
.menubar > li > ul > li > a:hover {
  background: #29a7f5;
  color: white;
}
/* line 188, ../scss/my-styles.scss */
.menubar > li.is-selected > a {
  background: #29a7f5;
  color: white;
}
/* line 189, ../scss/my-styles.scss */
.menubar > li.is-selected > ul {
  display: block;
}

【讨论】：

我仍然遇到同样的问题。它将 .menubar 类应用于 ul 周围的 div。我认为问题在于它没有将类应用于 ul。我知道 wordpress 文档说 ... $menu_class (string) (optional) 应用于包含菜单项的 ul 元素的类。多个类可以用空格分隔。以前称为 $wrap_class。将适用于 ul，但是当使用菜单类时，如您所见，它仅适用于 div。
发现我将 theme_location 指向了错误的区域。删除它解决了我的问题。

【解决方案3】：

将我的 PHP 编码更改为...似乎可行。这是theme_location的问题，删除它解决了问题。

<!doctype html>

<!--[if lt IE 7]><html <?php language_attributes(); ?> class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html <?php language_attributes(); ?> class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html <?php language_attributes(); ?> class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?> class="no-js"><!--<![endif]-->

    <head>
        <meta charset="utf-8">

        <?php // force Internet Explorer to use the latest rendering engine available ?>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <link rel="stylesheet" type="text/css" href="/wp-content/themes/bones/library/css/my-styles.css">
        <title><?php wp_title(''); ?></title>

        <?php // mobile meta (hooray!) ?>
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <?php // icons & favicons (for more: http://www.jonathantneal.com/blog/understand-the-favicon/) ?>
        <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/library/images/apple-icon-touch.png">
        <link rel="icon" href="<?php echo get_template_directory_uri(); ?>/favicon.png">
        <!--[if IE]>
            <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
        <![endif]-->
        <?php // or, set /favicon.ico for IE10 win ?>
        <meta name="msapplication-TileColor" content="#f01d4f">
        <meta name="msapplication-TileImage" content="<?php echo get_template_directory_uri(); ?>/library/images/win8-tile-icon.png">

        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

        <?php // wordpress head functions ?>
        <?php wp_head(); ?>
        <?php // end of wordpress head ?>

        <?php // drop Google Analytics Here ?>
        <?php // end analytics ?>

<meta name='viewport' content='width=device-width, initial-scale=1.0' />
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' />

    </head>

    <body <?php body_class(); ?> itemscope itemtype="http://schema.org/WebPage">

        <div id="container">

            <header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader">



                <div id="inner-header" class="wrap cf">

                    <?php // to use a image just replace the bloginfo('name') with your img src and remove the surrounding <p> ?>
                        <a href="<?php echo home_url(); ?>" rel="nofollow"><img id="MyLogo" src="http://terraintechnicalservices.ca/wp-content/uploads/terrain-technical-services-logo.png" /></a>

                    <?php // if you'd like to use the site description you can un-comment it below ?>
                    <?php // bloginfo('description'); ?>

                    <?php function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' ); ?>

<?php 

function register_my_menus() {
  register_nav_menus(
    array(
      'menubar' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

?>




<?php wp_nav_menu( array( 

    'menu_class' => 'menubar',
    'items_wrap' => '<ul id="%1$s" class="menubar">%3$s</ul>'


 ) );

 ?>







                    <nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
                        <?php wp_nav_menu(array(
                                 'container' => false,                           // remove nav container
                                 'container_class' => 'menubar',                 // class of container (should you choose to use it)
                                 'menu' => __( 'The Main Menu', 'bonestheme' ),  // nav name
                                 'menu_class' => 'nav top-nav cf',               // adding custom nav class
                                 'theme_location' => 'menubar',                 // where it's located in the theme
                                 'before' => '',                                 // before the menu
                                   'after' => '',                                  // after the menu
                                   'link_before' => '',                            // before each link
                                   'link_after' => '',                             // after each link
                                   'depth' => 0,                                   // limit the depth of the nav
                                 'fallback_cb' => ''                             // fallback function (if there is one)
                        )); ?>



                    </nav>

                </div>

            </header>

【讨论】：