html - ul 和子菜单 ul 的 wordpress 附加类

Question

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

我创建了一个响应式 通用 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>你的导航菜单一个类，你需要定义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像这样的伪选择器:

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