为何add_action钩子无法执行JS代码？绑定插件动作存LocalStorage失败

看起来你遇到的核心问题是：直接在add_action的回调函数里输出<script>标签，脚本并没有被浏览器执行，只是被当成文本输出到页面中。这通常是因为钩子触发的时机不对，或者输出脚本的方式不符合WordPress的页面渲染逻辑。下面分情况给你解决方案：

首先明确钩子的触发场景 #

先搞清楚some_action这个钩子是在前端页面渲染过程中触发的，还是在后台操作（比如文章插入、AJAX请求）时触发的，不同场景的解决方案不一样。

场景1：钩子在前端页面渲染时触发（比如模板加载阶段） #

如果some_action是在用户访问前端页面时触发的，那你需要把脚本添加到页面的合适位置（比如wp_footer钩子），而不是直接在some_action的回调里输出。修改后的代码如下：

// 触发动作（假设这部分是你原有的代码）
do_action( 'some_action', $insert_id );

// 绑定动作回调
add_action('some_action', 'func', 10, 1);
function func($id) {
    // 注册一个在页面底部输出脚本的动作
    add_action('wp_footer', function() {
        ?>
        <script>
            localStorage.setItem('is_item', 1);
        </script>
        <?php
    });
}

这样做的原因是：wp_footer钩子是WordPress专门用来在页面底部输出脚本/内容的钩子，确保脚本会被浏览器正确加载并执行，而不是在页面渲染的早期阶段被输出到无效位置。

场景2：钩子在后台操作时触发（比如文章插入、后台AJAX） #

如果some_action是在后台操作时触发的（比如你在后台插入文章后触发这个动作），那直接输出前端脚本是无效的，因为后台的输出不会被前端页面接收。这时候需要通过会话变量或者AJAX响应传递状态来实现：

方案A：使用PHP会话变量传递状态

1. 在后台动作的回调里设置会话变量：

do_action( 'some_action', $insert_id );

add_action('some_action', 'func', 10, 1);
function func($id) {
    // 启动会话（如果还没启动的话）
    if (!session_id()) {
        session_start();
    }
    // 设置会话标记
    $_SESSION['need_set_localstorage'] = true;
}

2. 在前端页面的wp_footer钩子里检查会话变量并设置LocalStorage：

add_action('wp_footer', 'check_and_set_localstorage');
function check_and_set_localstorage() {
    if (!session_id()) {
        session_start();
    }
    // 如果会话标记存在，执行脚本
    if (isset($_SESSION['need_set_localstorage']) && $_SESSION['need_set_localstorage']) {
        ?>
        <script>
            localStorage.setItem('is_item', 1);
        </script>
        <?php
        // 清除标记，避免页面刷新后重复执行
        unset($_SESSION['need_set_localstorage']);
    }
}

方案B：如果是AJAX触发的动作

如果some_action是通过前端AJ请求触发的，那可以直接在AJAX响应里返回状态，然后前端JS处理：

1. 后台AJAX回调：

add_action('wp_ajax_trigger_some_action', 'ajax_trigger_some_action');
add_action('wp_ajax_nopriv_trigger_some_action', 'ajax_trigger_some_action'); // 支持未登录用户

function ajax_trigger_some_action() {
    // 执行你的业务逻辑，比如插入数据
    $insert_id = 123; // 示例ID
    do_action('some_action', $insert_id);
    
    // 返回带状态的成功响应
    wp_send_json_success([
        'set_localstorage' => true
    ]);
}

2. 前端AJAX请求与处理：

// 假设使用jQuery发起请求（也可以用原生JS）
$.ajax({
    url: ajaxurl, // WordPress内置的AJAX地址，前端需要确保这个变量可用
    type: 'POST',
    data: {
        action: 'trigger_some_action', // 对应后台的AJAX动作名
        // 其他业务参数...
    },
    success: function(response) {
        if (response.success && response.data.set_localstorage) {
            localStorage.setItem('is_item', 1);
        }
    }
});

为什么你的原代码无效？ #

你原代码直接在func里输出<script>标签，如果some_action触发的时机是在页面渲染的早期（比如init钩子阶段），或者是在后台操作中，那输出的脚本会被放到HTML文档的最前面（甚至在<!DOCTYPE>之前），浏览器不会正确解析执行这段脚本；如果是后台触发的话，这段输出根本不会被前端页面接收，自然也就不会执行。

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