WordPress如何设置二级菜单点击后替换一级菜单名称

今天这篇文章教大家一个菜单设置的功能，将用户访问的二级菜单替换一级菜单的名称，就如下图所示：

Category作为一级菜单，下面有三个子类目菜单，Casual，Room，Travel。当用户访问某个子类目的时候，上面的一级菜单名称也会变成正在访问的类目名称。

修改方法也很简单，将下面的代码复制下来。

add_action('wp_footer', function() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取所有一级菜单项
        const parentMenuItems = document.querySelectorAll('.menu-item-has-children > a');

        parentMenuItems.forEach(parent => {
            // 保存原始 HTML 结构（包含可能的图标元素）
            const originalContent = parent.innerHTML;

            // 获取当前页面 URL
            const currentUrl = window.location.href;

            // 获取该一级菜单下的所有二级菜单链接
            const subMenuLinks = parent.parentElement.querySelectorAll('.sub-menu a');

            let isSubMenuActive = false;

            subMenuLinks.forEach(subLink => {
                // 检查哪个二级菜单链接与当前页面 URL 匹配
                if (subLink.href === currentUrl) {
                    // 仅替换文本内容，保留 HTML 结构和图标
                    const textNode = parent.childNodes[0];
                    if (textNode.nodeType === Node.TEXT_NODE) {
                        textNode.textContent = subLink.textContent;
                    } else {
                        parent.textContent = subLink.textContent;
                    }
                    isSubMenuActive = true;
                }
            });

            // 如果没有匹配的子菜单，恢复原始内容
            if (!isSubMenuActive) {
                parent.innerHTML = originalContent;
            }
        });
    });
    </script>
    <?php
});