WordPress中如何将非菜单页面标记为指定菜单项的当前项？

方法一：PHP后端处理（推荐） #

相比前端JS，PHP在服务器端处理更可靠，不会出现页面加载延迟导致的样式闪烁问题。可以通过nav_menu_css_class过滤器直接修改菜单项的类：

function custom_menu_current_class($classes, $item) {
    // 替换为你的实际页面slug：未加入菜单的页面是custom-page，要关联的菜单项指向target-page
    if (is_page('custom-page') && strpos($item->url, 'target-page') !== false) {
        $classes[] = 'current-menu-item';
        $classes[] = 'current_page_item';
    }
    // 可选：如果当前不在target-page本身，移除其他菜单项的当前类，避免多个当前项冲突
    if (!is_page('target-page') && in_array('current-menu-item', $classes)) {
        $classes = array_diff($classes, array('current-menu-item', 'current_page_item'));
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'custom_menu_current_class', 10, 2);

将这段代码添加到当前主题的functions.php文件末尾即可生效。

方法二：JavaScript前端处理 #

如果一定要用JS实现，核心逻辑是判断当前页面，找到对应菜单项并添加WordPress默认的当前状态类。

JS代码示例 #

document.addEventListener('DOMContentLoaded', function() {
    // 获取当前页面的slug（URL路径最后一段）
    const currentSlug = window.location.pathname.split('/').filter(Boolean).pop();
    
    // 替换为你的实际页面slug：当前页面是custom-page，要关联的菜单项链接包含target-page
    if (currentSlug === 'custom-page') {
        // 根据实际菜单结构调整选择器，比如菜单容器是.nav-menu
        const targetLink = document.querySelector('.nav-menu a[href*="target-page"]');
        if (targetLink) {
            // 找到菜单项的<li>父元素
            const menuItem = targetLink.closest('li');
            if (menuItem) {
                // 添加当前状态类
                menuItem.classList.add('current-menu-item', 'current_page_item');
                // 可选：移除其他菜单项的当前类
                document.querySelectorAll('li.current-menu-item').forEach(item => {
                    if (item !== menuItem) {
                        item.classList.remove('current-menu-item', 'current_page_item');
                    }
                });
            }
        }
    }
});

JS代码放置位置 #

• 主题functions.php：通过wp_add_inline_script加载，推荐限制只在目标页面生效：

  function enqueue_custom_menu_script() {
      if (is_page('custom-page')) {
          wp_add_inline_script('jquery', '
              document.addEventListener("DOMContentLoaded", function() {
                  const currentSlug = window.location.pathname.split("/").filter(Boolean).pop();
                  if (currentSlug === "custom-page") {
                      const targetLink = document.querySelector(".nav-menu a[href*=\"target-page\"]");
                      if (targetLink) {
                          const menuItem = targetLink.closest("li");
                          if (menuItem) {
                              menuItem.classList.add("current-menu-item", "current_page_item");
                              document.querySelectorAll("li.current-menu-item").forEach(item => {
                                  if (item !== menuItem) {
                                      item.classList.remove("current-menu-item", "current_page_item");
                                  }
                              });
                          }
                      }
                  }
              });
          ');
      }
  }
  add_action('wp_enqueue_scripts', 'enqueue_custom_menu_script');
  

• 主题自定义JS文件：将代码存入主题目录下的js/custom.js，然后在functions.php中注册加载该文件。
• 后台自定义izer：多数主题在「外观 > 自定义」里提供“自定义JS”选项，直接粘贴代码即可。
• 页面自定义HTML块：如果仅需在特定页面生效，可在该页面编辑器中添加自定义HTML块，将代码包裹在<script>标签内插入。

内容的提问来源于stack exchange，提问作者Paula