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

WordPress Plugin Development - How to use JQuery / JavaScript?

本文关键字：JQuery JavaScript 何使用 插件 开发 WordPress      更新时间：2023-09-26

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

我如何正确地包括和调用JQuery?

例如，在一个普通的HTML页面上，我只需要包含JQuery库，然后调用这个脚本: 
$(document).ready(function(){
    alert('Hello World!');
});

如何在WordPress Plugin PHP文件中做到这一点?

首先，你必须在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作为一个依赖项，所以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
}

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

WordPress包含自己的jquery版本和许多其他类似的JS文件，它们都经过了严格的测试与WP和许多最常见的插件。为了提供最好的兼容性和对于我们的用户体验，我们要求您不要打包自己的(特别是不是旧版本)，而是使用wp_enqueue_script()导入WordPress的版本。

所以你应该用这个代替:

wp_enqueue_script('jquery')
相关文章：