在 WordPress 插件中注入 JavaScript

Question

以下代码在我的 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!!!";
});

Answer 1

您不应该在短代码中使用

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 添加了结束标签。