如何让JavaScript在WordPress短代码执行完成后运行？

你的问题根源是JavaScript代码在.mytext元素渲染到页面之前就执行了，导致找不到目标元素抛出Cannot read properties of null错误。以下是具体修复步骤：

1. 修改脚本注册，强制加载到页面底部 #

在注册脚本时添加true作为最后一个参数，让WordPress把脚本输出在</body>标签前，和你测试文件的加载逻辑一致：

function myplugin_register_script() {
    // 最后一个参数true表示脚本加载在footer
    wp_register_script( 'myplugin_jquery', plugins_url('/js/myplugin-jquery.js', __FILE__), array('jquery'), '2.5.1', true );
    wp_register_style( 'myplugin_style', plugins_url('/css/myplugin-style.css', __FILE__), false, '1.0.0', 'all');
}
add_action('init', 'myplugin_register_script');

// 保留原有的队列函数，不需要移到短代码里
function myplugin_enqueue_script(){
    wp_enqueue_script( 'myplugin_jquery' );
    wp_enqueue_style( 'myplugin_style' );
}
add_action('wp_enqueue_scripts', 'myplugin_enqueue_script');

function myplugin_shortcode() {
    ob_start();
    echo '<div class="mytext"></div>';
    return ob_get_clean();
}
add_shortcode( 'myplugin-text', 'myplugin_shortcode' );

2. 调整JavaScript代码，确保DOM就绪后执行 #

在你的myplugin-jquery.js里，用jQuery的$(document).ready()包裹逻辑，确保只有当所有DOM元素加载完成后才执行：

$(document).ready(function() {
    // 这里写你的逻辑，比如向.mytext添加文本
    $('.mytext').text('这是JS生成的文本');
});

如果用原生JS，也可以用DOMContentLoaded事件：

document.addEventListener('DOMContentLoaded', function() {
    const myTextDiv = document.querySelector('.mytext');
    if (myTextDiv) {
        myTextDiv.textContent = '这是JS生成的文本';
    }
});

为什么之前的尝试无效？ #

• 把wp_enqueue_script移到短代码里，只是让脚本在使用短代码时才加入队列，但WordPress默认还是会把脚本加载在<head>里，依然早于DOM渲染。
• 即使脚本加载在footer，如果你的JS代码没有等待DOM就绪，还是可能在元素渲染前执行（比如页面渲染慢的情况）。

额外优化：只在使用短代码时加载脚本 #

如果想进一步优化，只在页面包含短代码时才加载脚本，可以修改队列函数，用has_shortcode检测：

function myplugin_enqueue_script(){
    global $post;
    // 检查当前页面/post是否包含目标短代码
    if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'myplugin-text')) {
        wp_enqueue_script( 'myplugin_jquery' );
        wp_enqueue_style( 'myplugin_style' );
    }
}
add_action('wp_enqueue_scripts', 'myplugin_enqueue_script');

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