menu_class wordpress навигация. проблемы определения нескольких вложенных классов
Так что я новичок в 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' );
?><?phpwp_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 , , , и т. д.
Любая помощь будет принята с благодарностью!
Спасибо
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
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;
}
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>
0
Web-Answers © 2024
Наверх