Wordpress 插件不加载 JS 文件答案

【问题标题】：Wordpress Plugin doesn't load JS filesWordpress 插件不加载 JS 文件
【发布时间】：2018-05-04 13:57:57
【问题描述】：

我正在为 wordpress 编写我的第一个插件，并且我正在尝试使用我的插件加载脚本。

function somadome_enqueue_script() {   
    wp_enqueue_script( 'somajQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(), '1.0');
    wp_enqueue_script( 'logoslickjs', plugin_dir_url( __FILE__ ) . 'js/slick.js',array('jQuery'), '1.0');
    wp_enqueue_script( 'logoslider', plugin_dir_url( __FILE__ ) . 'js/somaslick.js',array('jQuery'), '1.0');
    wp_enqueue_style('slickcss', plugin_dir_url( __FILE__ ) . '/css/slick.css', array(), '1.0', 'all');
    wp_enqueue_style('logocss', plugin_dir_url( __FILE__ ) . '/css/somaslide.css', array(), '1.0', 'all');
}

/*Create Plugin Parts*/
add_action('init', 'create_carousel');
add_action('wp_enqueue_scripts', 'somadome_enqueue_script');

问题是 CSS 加载（底部有两行），但顶部的代码（脚本）没有加载，我试图弄清楚为什么 Javascript/JQuery 代码没有加载。

我回显了检查它们的路径，它们很好地加载到浏览器中，因此它们存在。但是没有被 wordpress 加载。

【问题讨论】：

“加载到浏览器中很好……但没有被 wordpress 加载”是什么意思？如果加载一切正常。

标签： javascript php wordpress

【解决方案1】：

通过查看代码，我假设它没有加载，因为您错过了 enqueue 函数中 JavaScript 文件中的正斜杠。

function somadome_enqueue_script() {   
    wp_enqueue_script( 'somajQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(), '1.0');
    wp_enqueue_script( 'logoslickjs', plugin_dir_url( __FILE__ ) . '/js/slick.js',array('jQuery'), '1.0');
    wp_enqueue_script( 'logoslider', plugin_dir_url( __FILE__ ) . '/js/somaslick.js',array('jQuery'), '1.0');
    wp_enqueue_style('slickcss', plugin_dir_url( __FILE__ ) . '/css/slick.css', array(), '1.0', 'all');
    wp_enqueue_style('logocss', plugin_dir_url( __FILE__ ) . '/css/somaslide.css', array(), '1.0', 'all');
}

...应该可以正常工作了。

【讨论】：

很奇怪，我在我运行的测试服务器上试过了。但我猜 PHP 文件是缓存的，特别是因为我使用 chrome。谢谢，这帮助解决了我的问题。

【解决方案2】：

我猜这只是一个依赖问题。您已将 logoslickjs 设置为依赖于 array('jQuery') 并且 wp_enqueue_script() 的依赖项参数是区分大小写的，因此它应该是 array('jquery')

但是，由于您正在加载一个名为 'somajQuery' 的自定义 jQuery 版本，您需要将脚本依赖 array('jQuery') 更改为 array('somajQuery')，因此您的代码应该是：

function somadome_enqueue_script() {   
    wp_enqueue_script( 'somajQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(), '1.0');
    wp_enqueue_script( 'logoslickjs', plugin_dir_url( __FILE__ ) . '/js/slick.js',array('somajQuery'), '1.0');
    wp_enqueue_script( 'logoslider', plugin_dir_url( __FILE__ ) . '/js/somaslick.js',array('somajQuery'), '1.0');

    wp_enqueue_style('slickcss', plugin_dir_url( __FILE__ ) . '/css/slick.css', array(), '1.0', 'all');
    wp_enqueue_style('logocss', plugin_dir_url( __FILE__ ) . '/css/somaslide.css', array(), '1.0', 'all');
}

现在，logoslickjs 和 logoslider 依赖于自定义 jQuery somajQuery 等等。

【讨论】：