如何为Wordpress中的链接添加活动css类 - how to add active css class to a link in Wordpress

how to add active css class to a link in Wordpress

本文关键字：添加活动 css 链接 Wordpress | 更新日期: 2023-09-27

如何为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>

你提供的代码不是WordPress它只是你添加到"header。php"中的代码但你可以尝试这样做:

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

如果你有一个默认的WordPress菜单，它的活动类被称为"。Current-menu-item "如果你想把它的名字改成"激活"找到名为"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;
}

这是最简单的解决方法。没有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/