以下代码在我的 WordPress 设置上按预期工作,但是当我将其发送给运行 cPanel 托管版本的 WordPress 的朋友时,JavaScript 从未运行。我可以检查 DOM 并看到
js-test
div 已插入,验证 php 是否运行。有什么想法可能导致这种情况吗?我对脚本进行排队的方式是否做了不正确的事情?理想情况下,我希望仅在页面上存在插件的短代码时才将脚本排入队列,以避免不必要的请求。
js-test.php
<?php
/*
Plugin Name: JS Test
Description: JS Test
Version: 1.0
License: MIT
License URI: https://opensource.org/license/mit
*/
add_shortcode( 'js_test', function( $atts, $content, $tag ) {
add_action("wp_enqueue_scripts", function() {
wp_enqueue_script('js-test', plugin_dir_url( __FILE__ ) . 'js-test.js');
});
return "<div id='js-test' />";
});
js-test.js
document.addEventListener('DOMContentLoaded', function() {
const target = document.getElementById("js-test");
console.log('target: ', target);
if (target == null) {
return;
}
target.innerHTML = "hello!!!";
});
您不应该在短代码中使用
wp_enqueue_scripts
钩子,而应该直接添加 wp_enqueue_script()
函数,例如:
add_shortcode( 'js_test', 'js_test_shortcode' );
function js_test_shortcode( $atts, $content, $tag ) {
wp_enqueue_script('js-test', plugin_dir_url( __FILE__ ) . 'js-test.js');
return '<div id="js-test"></div>';
}
现在应该可以工作了。
请注意,我为您的 DIV 添加了结束标签。