在 Wordpress 菜单中定位 active / current_page_item答案

【问题标题】：Targeting active / current_page_item in Wordpress menu在 Wordpress 菜单中定位 active / current_page_item
【发布时间】：2016-05-30 14:00:30
【问题描述】：

我正在尝试使菜单中的链接在正确的页面上处于活动状态。定位类 .current_page_item 无效，因为它被 .sidebar-primary a 覆盖。

到目前为止，我已经在菜单项.nav-sidebar 中添加了一些类，并且还在我的functions.php 文件中插入了一些php 以将类.active 添加到当前菜单项。你会认为应该涵盖它。这样做很流行。

<li id="menu-item-210" class="nav-sidebar menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item menu-item-210 active "><a href="http://localhost/graham-every/" itemprop="url">Graham Every Ltd</a></li>

如您所见，.nav-sidebar 和 .active 是可用的类。但是，使用以下 CSS 可以工作，但不会更改字体颜色。

.nav-sidebar.active {
color: #FFFFFF;
background-color: #395CAC;
display: block;
padding: 7px;
}

这似乎是因为它被.sidebar-primary a 类简单地推翻了。

我已经尝试了各种组合来定位活动状态，目前没有成功

.sidebar.sidebar-primary.widget-area a .nav-sidebar.active {
color: #ffffff !important;
}

.sidebar-content .sidebar-primary {
  width: 270px;
}
.sidebar.widget-area .widget {
  border-bottom: none;
}
.sidebar-primary,
.sidebar-secondary,
#ez-home-sidebar {
  color: #395CAC;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
}
.sidebar.widget-area ol,
.sidebar.widget-area ul,
.sidebar.widget-area .textwidget,
.sidebar.widget-area .widget_tag_cloud div div,
.sidebar.widget-area .author-bio-widget,
.sidebar.widget-area .featuredpage .page,
.sidebar.widget-area .featuredpost .post {
  margin: 0 !important;
  padding: 15px 0px 15px 30px;
}
.sidebar.widget-area ul li {
  border-bottom: 0px solid #DDDDDD;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  list-style-type: none;
  word-wrap: break-word;
}
.sidebar-primary a,
.sidebar-primary a:visited,
.sidebar-secondary a,
.sidebar-secondary a:visited,
#ez-home-sidebar a,
#ez-home-sidebar a:visited {
  color: #395CAC;
  text-decoration: none;
}
/*--- PRIMARY MENU ---*/

.nav-sidebar a {
  display: block;
  padding: 7px;
  margin-bottom: 0px;
}
.nav-sidebar a:hover {
  color: #FFFFFF;
  background-color: #688bc9;
  display: block;
  padding: 7px;
}
.nav-sidebar.active {
  background-color: #395CAC;
  display: block;
  padding: 7px;
}
.sidebar.sidebar-primary.widget-area a .nav-sidebar.active {
  color: #ffffff !important;
}
ul.sub-menu.nav-sidebar-sub {
  padding-left: 10px !important;
}
/*--- END PRIMARY MENU ---*/

<aside class="sidebar sidebar-primary widget-area" role="complementary" aria-label="Primary Sidebar" itemscope="" itemtype="http://schema.org/WPSideBar">
  <section id="nav_menu-7" class="widget widget_nav_menu">
    <div class="widget-wrap">
      <div class="menu-main-menu-container">
        <ul id="menu-main-menu" class="menu">
          <li id="menu-item-210" class="nav-sidebar menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item menu-item-210 active "><a href="http://localhost/graham-every/" itemprop="url">Graham Every Ltd</a>
          </li>
        </ul>
      </div>
    </div>
  </section>
</aside>

【问题讨论】：

标签： html css wordpress class

【解决方案1】：

我的理解是，您要突出显示具有“当前菜单项”的 ID，以便突出显示当前页面链接。为此，请为此编写您的 css，如下所示。

    .sidebar .menu li.current-menu-item
    {
    Your CSS here followed by !important without space (e.g. font-weight:600!important)
    }

试试这个

问候马诺吉索尼

【讨论】：