如何在Wordpress中将每个菜单定位到活动状态的不同项目 [英] How do I target each menu different items on active state in Wordpress

问题描述

我想在活动状态下更改顶部导航栏中每个项目的颜色： 例如，在给定的页面上，与此相关的页面，我希望用户在该页面时名为Thought Piece的标题nav为紫色。

目前我拥有：

builder-module-navigation li a，
.builder-module-navigation li.current_page_item li a，
.builder-module-导航li.current-cat li a {
font-size：12px;
填充：0.2em .7em;
line-height：1.5em;
颜色：＃666;
font-family：格鲁吉亚，Times New Roman，Times，serif;
text-decoration：none;
背景：透明;
text-transform：大写;
}

我认为这可以做到这一点，但它不是：

.builder-module-navigation li.current_page_item＃menu-item-78 li a，
.builder-module-navigation li.current-cat＃menu-item-78 li一个{
颜色：＃9900cc;
}

如何正确定位特定类别？

解决方案

您需要使用一些PHP来执行此操作，如WordPress Codex 。

相关函数是 is_page（），用于确定您在哪个页面上，简单的PHP逻辑将动态CSS属性写入HTML。

I want to change the color for each of the items of the top nav here on the active state:

For example, on the given page, and the category pages associated with this, I would like the header nav named "Thought Piece" to be purple when the user is on that page.

Currently I have:

builder-module-navigation li a, .builder-module-navigation li.current_page_item li a, .builder-module-navigation li.current-cat li a { font-size: 12px; padding: 0.2em .7em; line-height: 1.5em; color: #666; font-family:Georgia, "Times New Roman", Times, serif; text-decoration: none; background: transparent; text-transform:uppercase; }

I thought this would do the trick, but it's not:

.builder-module-navigation li.current_page_item #menu-item-78 li a, .builder-module-navigation li.current-cat #menu-item-78 li a { color:#9900cc; }

How do I target the specific classes correctly?

解决方案

You need to use a bit of PHP to do it as described in the WordPress Codex.

The relevant function is is_page() to determine which page you are on and some simple PHP logic to write a dynamic CSS attribute into the HTML.

这篇关于如何在Wordpress中将每个菜单定位到活动状态的不同项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！