如何在WordPress中添加无跳转链接的后台管理菜单

核心逻辑：通过add_menu_page()注册菜单时不绑定实际渲染页面，再通过JS拦截默认点击跳转行为，同时可绑定自定义ID供弹窗触发逻辑调用。

1. 注册顶级管理菜单 #

将以下代码放入当前主题的functions.php文件，或自定义功能插件中：

add_action('admin_menu', 'register_modal_trigger_menu');
function register_modal_trigger_menu() {
    add_menu_page(
        '模态弹窗触发', // 页面标题（浏览器标签栏显示文本）
        '弹窗触发', // 后台侧边栏菜单显示名称
        'manage_options', // 菜单可见权限，manage_options代表仅站点管理员可见
        'custom-modal-trigger', // 菜单唯一标识slug
        '__return_empty_string', // 页面回调函数，直接返回空内容，不生成独立页面
        'dashicons-megaphone', // 菜单图标，可替换为任意内置dashicon类名
        88 // 菜单位置排序数值，数值越大菜单在侧边栏越靠下
    );
}

2. 拦截跳转+绑定自定义ID #

注册完菜单默认点击还是会跳转到对应slug的空白页，需要加一段JS拦截默认行为，同时给菜单设置专属ID：

add_action('admin_footer', 'set_menu_no_redirect_custom_id');
function set_menu_no_redirect_custom_id() {
    ?>
    <script>
    jQuery(document).ready(function($){
        // 定位到刚注册的顶级菜单
        const $triggerEntry = $('#toplevel_page_custom-modal-trigger');
        
        // 替换为你需要的专属ID值
        $triggerEntry.attr('id', 'my-custom-modal-trigger');
        
        // 拦截链接默认跳转行为
        $triggerEntry.children('a').on('click', function(e){
            e.preventDefault();
            // 在此处写入你的弹窗触发逻辑即可，例如：
            // $('#your-modal-dom').fadeIn();
        });

        // 可选：移除链接href属性，避免鼠标悬浮时显示跳转地址
        $triggerEntry.children('a').removeAttr('href');
    });
    </script>
    <?php
}

参数调整说明 #

• 权限控制：如果需要让其他角色看到菜单，把manage_options替换为对应权限即可，例如编辑角色对应edit_posts
• 图标替换：直接修改add_menu_page第6个参数的dashicon类名即可，后台所有内置图标都可使用
• 位置调整：修改最后一个排序数值，避开现有菜单的排序值就能放到你想要的位置
• 如果不需要自定义ID，可以直接使用WordPress自动生成的toplevel_page_custom-modal-trigger作为选择器，不需要额外执行attr修改ID的操作

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