WordPress插件开发 - 如何使用JQuery/JavaScript？

Question

刚开始为WordPress开发插件,想在插件管理界面中使用一些JQuery.

如何正确包含和调用JQuery？

例如,在普通的HTML页面上,我只包含JQuery库,然后调用此脚本:

$(document).ready(function(){
    alert('Hello World!');
});

如何在WordPress插件PHP文件中执行此操作？

Answer 1

首先,你总是必须在Wordpress中使用无冲突的包装器,所以你的代码看起来像:

jQuery(document).ready(function($){
    alert('Hello World!');
});

其次,将javascript放在外部文件中是一种很好的做法,而在Wordpress插件中,你可以包含以下内容:

wp_register_script( 'my_plugin_script', plugins_url('/my_plugin.js', __FILE__), array('jquery'));

wp_enqueue_script( 'my_plugin_script' );

这包括你的脚本,并将jQuery设置为依赖项,因此如果jQuery尚未加载,Wordpress将自动加载jQuery,确保它只加载一次,并且它在插件脚本之前加载.

如果您只需要管理页面上的脚本,您可以使用Wordpress add_action处理程序有条件地加载它:

add_action( 'admin_menu', 'my_admin_plugin' );

function my_admin_plugin() {
    wp_register_script( 'my_plugin_script', plugins_url('/my_plugin.js', __FILE__), array('jquery'));
    wp_enqueue_script( 'my_plugin_script' );

    // do admin stuff here
}

Answer 2

建议不要使用自己的jquery版本.

WordPress包含自己的jquery版本和许多其他类似的JS文件,这些文件都经过WP和许多最常见的插件的严格测试.为了给我们的用户提供最佳的兼容性和体验,我们要求您不要自己打包(特别是不是旧版本),而是使用wp_enqueue_script()来提取WordPress的版本.

所以你应该使用它:

wp_enqueue_script('jquery')