如何将活动的CSS类添加到Wordpress中的链接

Question

如何在Wordpress中将活动的CSS类添加到链接中，以便在查看该链接时活动菜单li将具有不同的颜色。

<ul>
  <li class=""><a href="/news">News</a></li> 
  <li class="devider">&nbsp;</li>
  <li class=""><a href="/about">About Us</a></li> 
  <li class="devider">&nbsp;</li>
  <li><a href="#">Partners</a></li> 
  <li class="devider">&nbsp;</li> 
  <li><a href="/vacancy">Careers</a></li>  <li class="devider">&nbsp;</li>
  <li><a target="_blank" href="/webmail">Email Login</a></li>
</ul>

Answer 1

您提供的代码不是WordPress，而只是将其添加到“ header.php”中，但是您可以尝试使用以下方法：

$(function() {
  $('ul a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

如果您具有默认的WordPress菜单，则其中的活动类称为“ .current-menu-item”，如果要更改其名称，例如“ .active”，请找到名为“ functions.php”的文件并添加对此：

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
     if( in_array('current-menu-item', $classes) ){
             $classes[] = 'active ';
     }
     return $classes;
}

Answer 2

这是解决它的最简单方法。 没有JavaScript或其他任何东西，而不仅仅是Wordpress

仅使用Wordpress内置的布尔函数即可使用它

 <li<?php if (is_page('services')) { echo ' class="current_page_item"'; } ?>><a href="<?php echo home_url();?>/services">Services</a></li>

这是我得到这个想法的链接。 http://www.vanseodesign.com/wordpress/hightlight-current-page-wordpress/