开发WPBakery后台插件页面：如何实现插件短码后台执行？

嘿，我来帮你搞定这个WPBakery短码在后台管理页面不解析的问题！你之前踩的坑我太熟了——直接用echo do_shortcode('$content')肯定没用，因为单引号会把$content当成字符串字面量，而不是实际的内容变量，而且后台默认不会自动加载WPBakery的渲染环境，短码自然没法被解析。

下面给你一套完整的类实现方案，不仅能让短码在后台正常执行，还能帮你搭建一个带WPBakery编辑能力的后台管理页面：

1. 先注册一个后台菜单页面，指定专属的回调函数
2. 手动加载WPBakery的前端样式/脚本，确保解析后的页面元素能正常显示
3. 正确获取并解析短码（注意变量的引用方式）
4. 可选：添加可视化编辑器，让你直接在后台用WPBakery编辑内容

class WPBakery_Backend_Page {
    public function __construct() {
        // 注册后台菜单
        add_action('admin_menu', array($this, 'register_admin_menu'));
        // 给后台页面加载WPBakery资源
        add_action('admin_enqueue_scripts', array($this, 'load_wpbakery_assets'));
    }

    // 注册后台菜单
    public function register_admin_menu() {
        add_menu_page(
            'WPBakery 后台页面',    // 页面标题
            'WPBakery 页面',        // 菜单名称
            'manage_options',       // 访问权限（管理员可用）
            'wpbakery-admin-page',  // 菜单唯一标识
            array($this, 'render_page_content'), // 页面渲染回调
            'dashicons-layout',     // 菜单图标
            6                       // 菜单位置
        );
    }

    // 加载WPBakery的样式和脚本
    public function load_wpbakery_assets($hook) {
        // 只在我们的后台页面加载资源，避免影响其他后台页面
        if ($hook !== 'toplevel_page_wpbakery-admin-page') {
            return;
        }

        // 加载WPBakery前端样式，确保行、列、消息框等元素显示正常
        wp_enqueue_style('js_composer_front');
        // 加载WPBakery必要脚本（如果需要交互效果的话）
        wp_enqueue_script('js_composer_front');
    }

    // 渲染后台页面内容
    public function render_page_content() {
        // 权限校验
        if (!current_user_can('manage_options')) {
            wp_die(__('你没有权限访问此页面'));
        }

        // 处理内容保存逻辑
        $this->handle_content_save();

        // 获取已保存的页面内容（默认给个测试短码）
        $saved_content = get_option('wpbakery_admin_page_content', '[vc_row][vc_column][vc_message message_box_color="info"]这是测试消息框[/vc_message][/vc_column][/vc_row]');

        // 解析短码（关键：不要用单引号包裹变量！）
        if (function_exists('do_shortcode') && function_exists('vc_map')) {
            $rendered_content = do_shortcode($saved_content);
        } else {
            $rendered_content = __('请先启用WPBakery Page Builder插件');
        }

        // 输出页面结构
        ?>
        <div class="wrap">
            <h1><?php echo get_admin_page_title(); ?></h1>
            
            <!-- 可视化编辑器（可选，方便直接编辑内容） -->
            <form method="post">
                <?php wp_nonce_field('wpbakery_admin_save_nonce'); ?>
                <?php
                wp_editor(
                    $saved_content,
                    'wpbakery_admin_content',
                    array(
                        'textarea_name' => 'wpbakery_admin_content',
                        'tinymce' => array(
                            'plugins' => 'code,wpcomposer', // 加载WPBakery编辑器插件
                        ),
                    )
                );
                ?>
                <p><input type="submit" name="wpbakery_save_content" class="button-primary" value="保存内容"></p>
            </form>

            <!-- 解析后的内容预览 -->
            <h2>内容预览</h2>
            <div class="wpbakery-preview-content">
                <?php echo $rendered_content; ?>
            </div>
        </div>
        <?php
    }

    // 处理内容保存
    private function handle_content_save() {
        if (isset($_POST['wpbakery_save_content']) && check_admin_referer('wpbakery_admin_save_nonce')) {
            $new_content = wp_kses_post($_POST['wpbakery_admin_content']);
            update_option('wpbakery_admin_page_content', $new_content);
            echo '<div class="updated"><p>内容已成功保存！</p></div>';
        }
    }
}

// 初始化类
new WPBakery_Backend_Page();

1. 变量引用错误：你之前用do_shortcode('$content')是错误的，必须传递实际的变量do_shortcode($content)，单引号会让PHP把$content当成普通字符串。
2. WPBakery资源加载：后台默认不会加载WPBakery的前端样式，所以必须手动调用wp_enqueue_style('js_composer_front')，否则解析后的元素会没有样式。
3. 权限校验：一定要加上current_user_can的检查，避免未授权用户访问。
4. 非ce校验：保存内容时用check_admin_referer防止CSRF攻击，这是WordPress开发的最佳实践。

把这段代码放到你的插件文件里，激活插件后就能在后台看到「WPBakery页面」菜单，现在你可以直接用WPBakery的编辑器创建内容，保存后预览区会自动解析所有短码，显示正常的行、列、消息框等元素啦！

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