Wordpress 将类添加到使用我的主题的菜单工作

Question

我正在使用一个名为“Wordpress Foundation v2 by 320press”的 WordPress 主题

我正在使用 WordPress 仪表板中的自定义菜单，我想在“li”中添加一个类来更改子菜单的样式：

例如： 关于我们 - 将有一个包含四个子链接的子菜单，因此我想向该子菜单添加一个名为 .fourNav 的类，然后将每个 'li' a 设置为 25%。

然后客户 - 将有 2 个子链接，所以我想为每个宽度为 50% 的“li”添加一个名为 .twoNav 的类。

我还想在这些之上为每个“li”添加另一个类，每个“li”都有一个背景图像。

Wordpress 菜单允许您添加将显示在菜单中的类和描述，但是当我检查元素时，这些类没有得到应用。

但是，当我在 DOM 中手动添加类时，它会拾取 CSS 并正常工作。

如何将菜单系统添加到此主题中的全部功能？

这就是我正在做的事情，但它没有添加类：

http://thesis-blogs.com/add-a-custom-class-to-each-item-in-the-wordpress-menu/

所以我认为我需要一个 php 的 sn-p 来允许菜单系统与我的主题一起工作。当我在仪表板中添加类时，我的主题没有应用它。

这是在 html 中输出的代码：-

<ul id="menu-main-nav" class="top-nav nav-bar hide-for-small">
 <li id="menu-item-5" class="has-flyout active">
 <a href="page link here">Home</a><a href="#" class="flyout-toggle"></a>
  <ul class="flyout" style="display: none;">
   <li id="menu-item-50"><a href="page link here">sub menu four</a></li>
   <li id="menu-item-51"><a href="page link here">sub menu three</a></li>
   <li id="menu-item-52"><a href="page link here">sub menu two</a></li>
   <li id="menu-item-53"><a href="page link here">sub menu one</a></li>
  </ul>
 </li>
</ul>

Answer 1

你必须直接编辑模板代码...

我认为菜单在

worpressdir/wp-content/themes/yourthemename/header.php

为了正确编辑它，您需要具备 PHP 和 html 的中等技能。祝你好运

Answer 2

转到外观 -> 菜单 -> 屏幕选项 - 然后如下

Answer 3

据我了解，您的要求是这样的：
1. 当您将鼠标悬停在菜单项上时，它应该获得一个新的类名。
2. 当您将鼠标悬停在子菜单项上时，子菜单项和相应子菜单项的父元素都应该获得一个新的类名。

如果这是您想要的，请查看此jsfiddle。我为此使用了jquery。检查这是否对您有帮助。

HTML：

<ul class="menu-bar">
    <li class="menu-block">Menu 1</li>
    <li class="menu-block">Menu 2
        <ul class="sub-menu-block">
            <li class="sb-menu-list">Sub Menu</li>
            <li class="sb-menu-list">Sub Menu</li>
            <li class="sb-menu-list">Sub Menu</li>
        </ul>
    </li>
    <li class="menu-block">Menu 3</li>
    <li class="menu-block">Menu 4</li>
    <li class="menu-block">Menu 5</li>
</ul>

CSS：

.menu-bar{
    background-color:blue;
    width:100%;
    display:inline-block;
}

.menu-bar > li{
    display:inline-block;
    position:relative;

}
.sub-menu-block{
    display:none;
    position:absolute;
    top:20px;
    padding-left:0;
    width:75px;
    padding:10px 3px;
    background-color:#ccc;
}
.menu-bar > li:hover .sub-menu-block{
    display:block;
}
.sub-menu-block li{
    list-style: none;
    display:block;
    padding: 4px 0;
}
.sub-menu-block li:hover{
    background-color:red;
}

jQuery

$(function(){
    $(".menu-block").on("mouseover",function(){
        $(this).addClass('hovered');
    });
    $(".menu-block").on("mouseout",function(){
        $(this).removeClass('hovered');
    });
    $(".sb-menu-list").on("mouseover",function(){
        $(this).addClass('child-hovered');
        $(this).parents(".menu-block").addClass('parent-hovered');
    });
    $(".sb-menu-list").on("mouseout",function(){
        $(this).removeClass('child-hovered');
        $(this).parents(".menu-block").removeClass('parent-hovered');
    });
});