wordpress 对 ul 和子菜单 ul 的附加类

Question

我不是 wordpress 专家，在其他帖子（或谷歌）中没有为我的以下问题找到任何明确的解决方案：

我创建了一个 responsive 通用 php 页面，其中包含 ul、li、submenu-ul 和 submenu-li 的特定类，以适应我的响应式设计。

我正在将我的网站与 wordpress 集成，我想在主 ul 和子菜单 ul 中添加额外的 css 类。 主要 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>

---

我希望它是例如：

    <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>

我该怎么做？ 请指定我应该在哪里添加您提到的任何代码。

谢谢大家

Answer 1

要为导航菜单的<ul> 分配一个类，您需要在数组中为wp_nav_menu 函数定义items_wrap 值，如下所示：

<?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>'s:

由于 Wordpress 只允许将单个类/id 分配给子菜单，因此您需要使用 jQuery 将不同的类添加到不同的子菜单 <ul>'s。这是示例代码：

$( ".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伪选择器：

$( ".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" );

Answer 2

第一个 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的新手