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

【问题标题】：WordPress Plugin Development - How to use JQuery / JavaScript?WordPress 插件开发 - 如何使用 JQuery / JavaScript？
【发布时间】：2013-05-25 06:59:31
【问题描述】：

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

如何正确包含和调用 JQuery？

例如，在一个普通的 HTML 页面上，我只包含 JQuery 库，然后调用这个脚本：

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

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

【问题讨论】：

标签： javascript jquery wordpress plugins

【解决方案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
}

【讨论】：

如果我在自己的插件中使用 jquery，我应该离线使用还是在线使用更好？你能帮帮我吗

【解决方案2】：

不建议使用自己的jquery版本。

WordPress 包含自己的 jquery 版本和许多其他类似的 JS 文件，这些文件都经过了 WP 和许多最常见的插件。为了提供最佳的兼容性和为我们的用户体验，我们要求您不要自己打包（尤其不是旧版本），而是使用 wp_enqueue_script() 拉入 WordPress 的版本。

所以你应该改用这个：

wp_enqueue_script('jquery')

【讨论】：