menu_class wordpress导航。定义多个嵌套类的问题

时间：2014-12-02 03:55:51

标签： php wordpress class menu navigation

所以我是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。 。 。等等

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

3 个答案:

答案 0 :(得分：0)

我认为这可能会帮助你...... 这种格式的菜单基本上都是在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

答案 1 :(得分：0)

试试这个...... 

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

答案 2 :(得分：0)

将我的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>
相关问题
最新问题