我不是wordpress的专家,在以下问题的其他帖子(或谷歌)中找不到任何明确的解决方案:
我创建了一个 响应式 常规php页面,其中包含ul,li,submenu-ul和submenu-li的特定classess,以适应我的响应式设计。
我正在将我的网站与wordpress集成,我想在主ul和submenu-ul中添加额外的css classess。 主要ul项目的当前类是: 每个ul项目中的当前类是:
例如:
<ul id="menu-primary-menu-links" class="menu">
<li class="menu-item li_1"><a href="web-development.php" >link1</a>
<ul id="sub-menu">
<li class="menu-item li_1"><a href="web-development.php" >link3</a>
</li>
<li class="menu-item li_1"><a href="web-development.php" >link4</a>
</li>
</ul>
</li>
<li class="menu-item li_1"><a href="web-development.php" >link2</a>
<ul class="sub-menu">
<li class="menu-item li_1"><a href="web-development.php" >link5</a>
</li>
<li class="menu-item li_1"><a href="web-development.php" >link6</a>
</li>
</ul>
</li>
</ul>
&#13;
我希望它是例如:
<ul id="menu-primary-menu-links" class="menu nav-list"> { here I added **nav-list** class }
<li class="menu-item li_1"><a href="web-development.php" >link1</a>
<ul id="sub-menu block_one_col"> { here I added **block_one_col** class }
<li class="menu-item li_1"><a href="web-development.php" >link3</a>
</li>
<li class="menu-item li_1"><a href="web-development.php" >link4</a>
</li>
</ul>
</li>
<li class="menu-item li_1"><a href="web-development.php" >link2</a>
<ul class="sub-menu block_wide_ul"> { here I added **block_wide_ul** class }
<li class="menu-item li_1"><a href="web-development.php" >link5</a>
</li>
<li class="menu-item li_1"><a href="web-development.php" >link6</a>
</li>
</ul>
</li>
</ul>
&#13;
我该怎么办? 请指明我应该在哪里添加您提及的任何代码。
非常感谢你们所有人
答案 0 :(得分:0)
要为导航菜单的<ul>
分配一个类,您需要在数组中为items_wrap
函数定义wp_nav_menu
值,如下所示:
<?php wp_nav_menu( array('menu' => '//Your Menu Name', 'container' => '', 'items_wrap' => '<ul id="menu-primary-menu-links" class="menu nav-list">%3$s</ul>' )); ?>
您已经在header.php
文件中包含上述代码以回显前端的导航菜单,因此您只需将以下值粘贴到数组中即可:'items_wrap' => '<ul id="menu-primary-menu-links" class="menu nav-list">%3$s</ul>'
jQuery解决方案,将不同的类添加到不同的子菜单<ul>
:
由于Wordpress只允许将单个类/ id分配给子菜单,因此您需要使用jQuery将不同的类添加到不同的子菜单<ul>
中。这是示例代码:
$( ".menu-item:first-child ul" ).addClass( "block_one_col" );
$( ".menu-item:nth-child(2) ul" ).addClass( "block_wide_ul" );
.block_one_col li a {
color: yellow;
}
.block_wide_ul li a {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-primary-menu-links" class="menu nav-list">
<li class="menu-item li_1"><a href="web-development.php" >link1</a>
<ul class="sub-menu">
<li class="menu-item li_1"><a href="web-development.php" >link3</a>
</li>
<li class="menu-item li_1"><a href="web-development.php" >link4</a>
</li>
</ul>
</li>
<li class="menu-item li_1"><a href="web-development.php" >link2</a>
<ul class="sub-menu">
<li class="menu-item li_1"><a href="web-development.php" >link5</a>
</li>
<li class="menu-item li_1"><a href="web-development.php" >link6</a>
</li>
</ul>
</li>
</ul>
要定位第三个,第四个等子菜单<ul>
,您可以使用nth-child
psuedo选择器,如下所示:
$( ".menu-item:nth-child(3) ul" ).addClass( "block_wide_ul_new" );
$( ".menu-item:nth-child(4) ul" ).addClass( "block_wide_ul_new_2" );
.
.
.
$( ".menu-item:nth-child(10) ul" ).addClass( "block_wide_ul_new_10" );
答案 1 :(得分:0)
第一个Wordpress支持菜单钩子您可以通过在header.php中添加以下代码来挂钩菜单: -
<nav class="nav-bar">
<?php wp_nav_menu(array( 'container_class'=>'main-nav','container'=>'nav')); ?>`
</nav>
现在你需要注册这个钩子,以便它进入WordPress管理区域,为你在主题的function.php文件中添加以下代码(如果这个文件不存在,请创建它): -
<?php
if(function_exists('register_nav_menus')) {
register_nav_menus( array('primary'=>'Header Navigation'));
} ?>
现在你要自定义的东西从这里开始 现在你需要自定义菜单的外观使用style.css中的以下代码(我添加了我自己的样式,你可以在这里添加你的CSS并修改): -
ol, ul {
list-style: none;
}
.nav-bar {
background-color:rgb(238, 107, 107);
height:40px;
box-shadow:2px 2px 0 blue;
}
.main-nav ul, .main-nav li{
display:inline;
}
.main-nav a {
padding: 0px 20px 0px 20px;
text-decoration:none;
line-height:40px;
display:block;
color:#fff;
font-family:sans-sarif;
}
.main-nav a:hover {
background-color:#F53F63;
}
.main-nav ul ul a {
width:135px;
line-height:35px;
padding:0px 20px;
display:block;
}
.main-nav ul li {
position:relative;
float:left;
}
.main-nav ul ul {
position:absolute;
top:-9999999px;
left:0;
opacity:0;
background:#B21434;
text-align:left;
box-shadow:2px 2px 0 blue;
}
.main-nav ul li:hover > ul {
position:absolute;
top:100%;
opacity:1;
}
请根据您的需要修改css 现在,无论您从wordpress管理面板添加什么,都会显示在菜单中
请到wordpress主题教程深入了解我自己是wordpress中的新手