如何在WordPress中编程向「添加菜单项」区块添加内容及自定义菜单项属性

1. 向「添加菜单项」区块注入自定义项目 #

该需求完全可以实现，WordPress后台的菜单设置页的「添加菜单项」区域由多个元盒子组成，你可以通过注册自定义元盒子的方式添加自有项目：

// 注册自定义菜单项元盒子
add_action( 'admin_init', 'custom_register_nav_menu_metabox' );
function custom_register_nav_menu_metabox() {
    add_meta_box(
        'custom_nav_menu_source',
        '自定义项目组',
        'custom_render_nav_menu_metabox',
        'nav-menus',
        'side',
        'default'
    );
}

// 渲染自定义元盒子内容
function custom_render_nav_menu_metabox() {
    ?>
    <div class="custom-menu-items">
        <label class="menu-item-title">
            <input type="checkbox" class="menu-item-checkbox" value="custom_item_1" name="custom_menu_items[]">
            自定义项目1
        </label>
        <label class="menu-item-title">
            <input type="checkbox" class="menu-item-checkbox" value="custom_item_2" name="custom_menu_items[]">
            自定义项目2
        </label>
        <p class="button-controls">
            <input type="submit" class="button button-primary submit-add-to-menu right" value="添加到菜单" name="add-custom-menu-items" id="submit-custom-menu-items">
            <span class="spinner"></span>
            <br class="clear">
        </p>
    </div>
    <?php
}

后续需要追加提交处理逻辑，通过wp_update_nav_menu_item函数将选中的自定义项目转换为标准菜单项结构存入数据库即可。

2. 为菜单项添加自定义配置选项 #

2.1 「新标签页打开」配置 #

该功能为WordPress内置支持，无需额外开发：点击菜单设置页右上角的「屏幕选项」，勾选「链接目标」即可在每个菜单项的编辑面板中显示该配置项。如果需要全局默认开启该字段的展示，可通过get_user_option过滤器修改用户菜单配置的默认值。

2.2 「自定义图标」配置实现 #

使用wp_nav_menu_item_custom_fields钩子向菜单项编辑面板注入字段，同时追加保存逻辑即可：

// 注入自定义图标字段
add_action( 'wp_nav_menu_item_custom_fields', 'custom_add_menu_icon_field', 10, 2 );
function custom_add_menu_icon_field( $item_id, $item ) {
    $saved_icon = get_post_meta( $item_id, '_custom_menu_icon', true );
    ?>
    <p class="field-custom-icon description description-wide">
        <label for="menu-icon-<?php echo esc_attr( $item_id ); ?>">
            自定义图标类名<br>
            <input 
                type="text" 
                id="menu-icon-<?php echo esc_attr( $item_id ); ?>" 
                class="widefat" 
                name="menu_icon[<?php echo esc_attr( $item_id ); ?>]" 
                value="<?php echo esc_attr( $saved_icon ); ?>"
                placeholder="例如 fa fa-home"
            >
        </label>
    </p>
    <?php
}

// 保存图标字段值
add_action( 'wp_update_nav_menu_item', 'custom_save_menu_icon_field', 10, 2 );
function custom_save_menu_icon_field( $menu_id, $item_id ) {
    if ( isset( $_POST['menu_icon'][$item_id] ) ) {
        update_post_meta( $item_id, '_custom_menu_icon', sanitize_text_field( $_POST['menu_icon'][$item_id] ) );
    }
}

2.3 前端调用自定义图标 #

通过过滤器在菜单输出前拼接图标元素：

add_filter( 'wp_nav_menu_objects', 'custom_render_menu_icon_frontend', 10 );
function custom_render_menu_icon_frontend( $menu_items ) {
    foreach ( $menu_items as $item ) {
        $icon = get_post_meta( $item->ID, '_custom_menu_icon', true );
        if ( !empty( $icon ) ) {
            $item->title = '<i class="' . esc_attr( $icon ) . '"></i> ' . $item->title;
        }
    }
    return $menu_items;
}

注意事项 #

如果你使用的是WordPress 6.0+默认的块编辑器模式菜单管理页，需要额外通过WordPress块编辑器提供的JS钩子wp.hooks.addFilter，注入React组件来扩展菜单项的编辑属性和添加侧边栏的自定义项目区块。

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