如何通过点击按钮用JS添加WordPress Gutenberg Widget？

完全可以实现你的需求，核心是通过WordPress REST API获取Widget的渲染内容，再用JavaScript动态插入页面，无需预先隐藏元素。以下是具体实现步骤：

1. 注册REST API端点获取Widget内容 #

在主题functions.php或自定义插件中添加代码，创建一个REST接口用于返回活动列表Widget的HTML：

add_action('rest_api_init', function () {
    register_rest_route('custom-widgets/v1', '/events-list', array(
        'methods' => 'GET',
        'callback' => 'get_events_list_widget_html',
        'permission_callback' => '__return_true', // 可根据需求调整权限，比如限制登录用户访问
    ));
});

function get_events_list_widget_html() {
    ob_start();
    // 替换为你的自定义Widget类名，触发Widget渲染
    the_widget('Events_List_Widget');
    $html = ob_get_clean();
    return rest_ensure_response(array('html' => $html));
}

2. 前端JS实现动态加载逻辑 #

在主题的JS文件（如assets/js/custom.js）中添加按钮点击事件，请求接口并插入内容：

document.addEventListener('DOMContentLoaded', function() {
    const loadBtn = document.getElementById('load-events-btn');
    const container = document.getElementById('events-container');

    loadBtn.addEventListener('click', async function(e) {
        e.preventDefault();
        loadBtn.disabled = true;
        loadBtn.textContent = '加载中...';

        try {
            const res = await fetch('/wp-json/custom-widgets/v1/events-list');
            const data = await res.json();
            
            if (data.html) {
                container.innerHTML = data.html;
                loadBtn.remove(); // 加载完成后可移除按钮，或修改状态
            }
        } catch (err) {
            console.error('加载活动列表失败:', err);
            loadBtn.textContent = '加载失败，重试';
            loadBtn.disabled = false;
        }
    });
});

3. 页面布局准备 #

在需要展示的位置，仅放置触发按钮和空容器即可，无需预先加载Widget：

<button id="load-events-btn">查看最新活动</button>
<div id="events-container"></div>

注意事项 #

• 确保自定义Widget的类名正确，the_widget()能正常渲染内容
• 根据业务需求调整REST接口的权限规则，避免未授权访问
• 若Widget依赖特定前端脚本/样式，需确保这些资源已在页面加载，或在插入内容后手动初始化相关逻辑

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