javascript - 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 将自动加载它，确保它只加载一次，并且在您的插件脚本之前加载。

如果您只需要管理页面上的脚本，您可以使用 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')