menu_class wordpress導航。定義多個嵌套類的問題

所以我是wordpress的新手，並在dashboard中創建了一個菜單。這裏是我在我的header.php文件中的代碼....menu_class wordpress導航。定義多個嵌套類的問題

<?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。。。 etc等

任何幫助將不勝感激!! 謝謝請

來源

2014-12-02 user3149006

我想這可能幫助ü... 這基本上是在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

來源

2014-12-02 09:08:20

嘗試......

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

來源

2014-12-02 09:20:49

我仍然有同樣的問題。它正在將類.menubar應用到ul周圍的div上。我認爲問題在於它不是將該類應用於ul。我知道wordpress文檔說... $ menu_class （字符串）（可選）應用於包含菜單項的ul元素的類。多個類可以用空格分隔。以前稱爲$ wrap_class。將適用於ul，但在使用菜單類時，您可以看到它僅適用於div。 – user3149006 2014-12-02 23:35:32

發現我正在將theme_location指向錯誤的區域。刪除它解決了我的問題。 – user3149006 2014-12-03 17:15:14

改變我的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>

來源

2014-12-03 17:18:11 user3149006

menu_class wordpress導航。定義多個嵌套類的問題

回答

相關問題