WordPress导航栏分类高亮问题解决方案

方法一：CSS类

/* WordPress会自动为当前菜单项添加current-menu-item类 */
.current-menu-item {
color: #3498db;
border-bottom: 3px solid #3498db;
background: #f8f9fa;
}
/* 如果需要在文章页面高亮所属分类 */
.single-post .menu-item-123 {
color: #3498db;
border-bottom: 3px solid #3498db;
background: #f8f9fa;
}

方法二：JavaScript

// JavaScript解决方案：检测当前分类并高亮对应菜单项
document.addEventListener('DOMContentLoaded', function() {
// 获取当前文章分类（这里需要根据实际情况调整）
var currentCategory = '科技'; // 这应该从WordPress获取

// 获取所有菜单项
var menuItems = document.querySelectorAll('.menu-item a');

// 遍历菜单项，找到匹配的分类
menuItems.forEach(function(item) {
if (item.textContent.trim() === currentCategory) {
item.classList.add('current-category');
item.parentElement.classList.add('current-category');
}
});
});

方法三：WordPress函数

<?php
add_filter('nav_menu_css_class', 'special_nav_class_by_id', 10, 4);
function special_nav_class_by_id($classes, $item, $args, $depth) {
if (is_single()) {
$categories = get_the_category();
if ($categories && $item->type === 'taxonomy' && $item->object === 'category') {
foreach ($categories as $category) {
// 比较菜单项对象ID（分类ID）与当前分类ID
if ($item->object_id == $category->term_id) {
$classes[] = 'current-menu-item';
$classes[] = 'current-category-menu-item';
break;
}
}
}
}
return $classes;
}
?>