如何基于已有的可打开iframe的WordPress自定义后台菜单项创建子菜单项

嘿，这事儿不难！要给你这个自定义的WordPress后台菜单加子菜单项，用WordPress自带的add_submenu_page()函数就行，我给你改改代码，一看就懂～

核心思路 #

你已经用add_menu_page()创建了主菜单，现在只需要在同一个admin_menu钩子的函数里，调用add_submenu_page()来绑定子菜单到这个主菜单上。关键是要把主菜单的slug（也就是你代码里的oa-document）作为子菜单的父级标识。

修改后的完整代码 #

add_action( 'admin_menu', 'oa_register_menu_document' );
function oa_register_menu_document() {
    // 先定义主菜单的slug，方便后续子菜单调用
    $parent_menu_slug = 'oa-document';

    // 你的原有主菜单代码
    add_menu_page( 
        'Manual', 
        'Producers Map', 
        'manage_options', 
        $parent_menu_slug, 
        'oa_view_document_page',
        3
    );

    // 添加第一个子菜单项：比如"地图子页面"
    add_submenu_page(
        $parent_menu_slug,          // 父菜单的slug，和主菜单保持一致
        '地图子页面',               // 页面标题（浏览器标签显示的文字）
        '子菜单1',                  // 后台菜单里显示的名称
        'manage_options',           // 访问权限，和主菜单保持一致
        'oa-document-subpage-1',    // 子菜单的唯一slug
        'oa_view_submenu_page_1'    // 子菜单页面的回调函数
    );

    // 可以继续添加更多子菜单项，比如"地图设置"
    add_submenu_page(
        $parent_menu_slug,
        '地图设置',
        '设置',
        'manage_options',
        'oa-document-settings',
        'oa_view_settings_page'
    );
}

// 原有主菜单的回调函数，保持不变
function oa_view_document_page(){
?>
<div id="poststuff" class="oa-document">
    <div class="postbox hide-if-js" id="postexcerpt" style="display: block; height: 100vh;">
        <iframe src="https://www.mywebsite.com/producers" width="100%" height="100%"></iframe>
    </div>
</div>
<?php }

// 第一个子菜单的回调函数示例（可以放iframe或其他内容）
function oa_view_submenu_page_1(){
?>
<div class="wrap">
    <h1>我的地图子页面</h1>
    <p>这里可以放你需要的内容，比如另一个关联的iframe：</p>
    <iframe src="https://www.mywebsite.com/producers/subpage" width="100%" height="800px" frameborder="0"></iframe>
</div>
<?php }

// 设置页面的回调函数示例（做配置用）
function oa_view_settings_page(){
?>
<div class="wrap">
    <h1>地图设置</h1>
    <form method="post" action="options.php">
        <?php
        settings_fields('oa-map-settings-group');
        do_settings_sections('oa-map-settings-group');
        ?>
        <table class="form-table">
            <tr valign="top">
                <th scope="row">地图显示标题</th>
                <td><input type="text" name="oa_map_display_title" value="<?php echo esc_attr(get_option('oa_map_display_title')); ?>" /></td>
            </tr>
        </table>
        <?php submit_button(); ?>
    </form>
</div>
<?php }

关键注意点 #

• 每个子菜单的slug必须唯一，不能和主菜单或其他子菜单重复
• 访问权限参数（manage_options）最好和主菜单保持一致，避免权限混乱
• 回调函数可以根据需求自定义内容：既可以像主菜单一样放iframe，也可以做设置表单、数据列表等功能
• 如果不需要主菜单本身作为可点击项（只想让子菜单显示），可以把主菜单的回调函数设为null，但你的场景里主菜单是有用的，所以保持原来的回调就行

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