WordPress 在自定义文章添加 current 到主菜单

Wordpress 的菜单系统在自定义文章跟博客文章的单主页面中不会自动添加 current-menu-item 或是 current-page-item class. 在网络上的资源也没有很好的解决方法. 这里要介绍一个自己想到的解决方法 - 在菜单上的每个页面加入页面所使用的模板名字, 再用 css 调整, 更换颜色. 每个页面应该都有固定的模板名字, 像是tpl-blog.php, tpl-portfolio.php. 我们要把模板的名字去掉 .php 加入到主菜单每个页面里. 在 functions.php 里面加入这段代码:
<?php

/*-------------------------------------------------------------------------------
	Custom Post Type - Add Template Name
-------------------------------------------------------------------------------*/
	
function add_current_nav_class($classes, $item)
{
	global $post;
	$classes[] = 'menu-' . str_replace('.php','',get_page_template_slug($item->object_id));
	return $classes;
}
add_action('nav_menu_css_class', 'add_current_nav_class', 10, 2);
在页面上, 主菜单的页面会加入模板的名字, 像是: menu-tpl-blog Screen Shot 2016-07-14 at 10.42.27 AM 再来, 利用 body class 跟我们加入的模板 class 连合使用, 就可以用 css 获取当前自定义文章的菜单的母页位置:
#main-nav .hover a,
#main-nav a:hover,
#main-nav .current_page_item a,
body.single-work #main-nav .menu-tpl-homepage a,
body.single-post #main-nav .menu-tpl-blog a,
body.category #main-nav .menu-tpl-blog a{
	color:#e8373d;
}
完成~ Screen Shot 2016-07-14 at 10.50.28 AM
本文由 Felicoz https://felicoz.com/ 原创发布,转载请保留地址!
php wordpress