向子页面中的主导航菜单添加一种css样式

时间：2014-08-06 作者：Jonathan Beech

我有一个WordPress网站，根据用户是否在该页面上，向主导航添加自定义样式。我的网站的文章部分有几篇文章，用户可以访问。

我使用如下所示的css样式，当查看器位于文章页面上时，这种样式会达到预期效果，WordPress会将当前菜单项类添加到html标记中：

#navigation li a:hover, #navigation li.current-menu-item a {
text-shadow: 1px 1px 2px red;
-webkit-transition: color 0.5s, text-shadow 0.5s;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;
}
但是，如果用户位于单个文章页面中，我希望将此样式应用于顶级项目。有没有办法做到这一点？

2 个回复
SO网友:Mostafa Ghanbari

在您的功能中。php文件添加以下代码：

if ( is_page( yourpage ) ) //yourpage can be your page\'s id, title or even slug
    wp_enqueue_style( \'path/to/your/custom/css/file\' ); //your stylesheet path
elseif( is_page( yourpage ) ) //yourpage can be your page\'s id, title or even slug
    wp_enqueue_style( \'2nd/path/to/your/custom/css/file\' ); //your stylesheet path
else
   wp_enqueue_style( \'3rd/path/to/your/custom/css/file\' ); //your stylesheet path
另请参见：is_page 和is_single

SO网友:Jonathan Beech

好的，我得到了我想要的结果，通过瞄准WordPress添加到菜单中的css类，我想要一个更优雅的方法，使用WordPress内置的php函数，但这似乎超出了我的能力

我的主要导航中的“文章”链接如下：

<li id="menu-item-269" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-269"><a href="http://www.jonathanbeech.dev/articles/">Articles</a></li>
只需以班级为目标menu-item-269 与应用于single-articlephp页面中，即使用户位于主文章页面的单个子页面中，我也能够保持当前活动样式的文章链接。

css如下所示：

#navigation li a:hover, #navigation li.current-menu-item a, .single-article li.menu-item-269 a, .single-portfolio li.menu-item-191 a {
text-shadow: 1px 1px 2px red;
-webkit-transition: color 0.5s, text-shadow 0.5s;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;
}

结束
标签： css   小码农  

相关推荐

WordPress中特定文本/html小工具的自定义CSS

我的主页侧边栏上有几个文本小部件。特别是有一个文本小部件，我希望它实现在我的子主题中编写的自定义CSS，而不是主题提供的默认样式。这可能吗？如果是，如何进行？编辑：下面的答案通常不起作用，因为大多数小部件都在主题样式和自定义样式文件之后实现了css。