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

Posted 2023-05-08

【中文标题】WordPress 插件开发 - 如何使用 JQuery / JavaScript？

【英文标题】：WordPress Plugin Development - How to use JQuery / JavaScript?

【发布时间】：2013-05-25 06:59:31

【问题描述】：

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

如何正确包含和调用 JQuery？

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

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

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

【参考方案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')