好文章，仔细阅读，多读
一些错误的例子
在开始之前，让我们先看看中级开发人员常犯的一些错误。
// 错误示例1
function wpkj_loading_scripts_wrong() {
echo '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">';
}
add_action('admin_head', 'wpkj_loading_scripts_wrong');
// 错误示例2
function wpkj_loading_scripts_wrong() {
echo '';
}
add_action('admin_head', 'wpkj_loading_scripts_wrong');
// 错误示例3
function wpkj_loading_scripts_wrong_again() {
wp_enqueue_script('custom-js', 'wp-content/my-plugin-dir/js/custom.js');
}
add_action('admin_init', 'wpkj_loading_scripts_wrong_again');
我们简单分析一下上面例子中的错误：
1.没有使用正确的挂钩
上面的例子使用了admin_head或admin_init，这些是错误的hook，虽然你的js或css脚本可以正常加载，但可能会导致兼容性问题。 正确的方法是使用 admin_enqueue_scripts 挂钩。
2.反复引用jquery脚本库
示例1引入了自定义jquery库，这是绝对不允许的。 这样做的话，同一个页面上就会有两个版本的 jquery 脚本（另一个是 WP 默认自带的），这会导致其他依赖于 jquery 库的脚本无法正常工作。 正确的方法是通过wp_enqueue_script()的第三个参数设置依赖关系。 例如：
// 这里直接引入你自己的自定义js脚本文件，
// 如果这个文件的代码需要依赖 jquery 库，在第三个参数使用 array( 'jquery' ) 即可
function wpkj_scripts_method() {
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', array( 'jquery' ) );
}
add_action( 'admin_enqueue_scripts', 'wpkj_scripts_method' );
3. 从硬编码 URL 加载文件
示例 2 引入了您网站 URL 中的文件。 一旦您的网站不存在或难以访问，或者域名被更改，都会给用户带来不必要的麻烦。 因此，请确保不要直接从您的网站导入文件。
4.使用相对URL加载文件
示例3使用相对URL导入文件css脚本，在您的网站中可能可以正常运行，但在其他网站中可能会出现问题。 毕竟并不是所有的网站都有相同的安装目录和场地条件。 正确的做法应该是使用WordPress的内置函数来加载文件的绝对URL。 例如：
// 引入插件的js文件，可以使用 plugins_url() 函数引入
// 比如插件中 js/custom.js，可以使用 plugins_url( 'js/custom.js' , dirname(__FILE__) )
function wpkj_load_scripts() {
wp_enqueue_script( 'custom-js', plugins_url( 'js/custom.js' , dirname(__FILE__) ) );
}
add_action('admin_enqueue_scripts', 'wpkj_load_scripts');
// 引入主题的js文件，可以使用 get_template_directory_uri()
function wpkj_theme_name_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpkj_theme_name_scripts' );
5、脚本文件没有按需加载
上面所有的例子都会在网站后台的所有页面上加载你的js文件，但一般情况下，你的js文件可能只在一个页面上需要，这会导致性能问题。
正确加载脚本到WP后台
根据上面的错误分析，我们知道以下几点：
不要引入重复的脚本（如jquery库），可以使用admin_enqueue_scripts钩子通过依赖参数设置加载脚本使用wp_enqueue_script()导入js文件，使用wp_enqueue_style()函数导入css文件插件使用plugins_url()函数生成脚本路径，主题使用 get_template_directory_uri()（父主题）或 1. get_stylesheet_directory_uri()（子主题） 生成脚本路径 按需加载脚本文件（详见下文） 按需加载脚本到特定页面
do_action( 'admin_enqueue_scripts', string $hook_suffix )
如上所示css脚本，admin_enqueue_scripts钩子允许我们设置一个参数$hook_suffix，该参数通常用于指定当前的管理界面。
比如我们只需要在“文章-所有文章”界面加载脚本即可，可以使用如下代码：
function wpkj_load_scripts($hook) {
if( $hook != 'edit.php' )
return;
wp_enqueue_script( 'custom-js', plugins_url( 'js/custom.js' , dirname(__FILE__) ) );
}
add_action('admin_enqueue_scripts', 'wpkj_load_scripts');
在代码的第3-4行，我们判断当前页面是否是“所有文章”（即edit.php）页面，如果不是，下面的代码将不会被执行。
再比如，我们只需要在“所有文章”、“写文章”和文章编辑界面加载脚本即可，使用如下代码：
function wpkj_load_scripts($hook) {
if( $hook != 'edit.php' && $hook != 'post.php' && $hook != 'post-new.php' )
return;
wp_enqueue_script( 'custom-js', plugins_url( 'js/custom.js' , dirname(__FILE__) ) );
}
add_action('admin_enqueue_scripts', 'wpkj_load_scripts');
在这3行代码中，我们使用&&符号连接了3个判断条件。 如果不在“所有文章”、“写文章”和文章编辑界面中，则不会执行以下代码。
常见的背景页面
可以直接访问对应的页面，在URL中可以看到，例如：
index.php – 仪表板
edit.php – 所有帖子的列表（包括自定义帖子类型）
post.php – 帖子编辑界面（包括自定义帖子类型）
post-new.php – 添加帖子（包括自定义帖子类型）
upload.php – 媒体
edit-comments.php – 评论列表
comment.php – 评论编辑界面
theme.php – 外观
widgets.php – 外观小部件
nav-menus.php – 外观菜单
plugins.php – 插件
users.php – 用户
options-general.php – 设置 > 常规
options-writing.php – 设置 > 写作
options-reading.php – 设置 > 阅读
options-discussion.php – 设置 > 讨论
options-media.php – 设置 > 媒体
options-permalink.php – 设置 > 永久链接
自定义设置页面
当然，某些主题或插件会在后台创建自定义设置页面。 如果您只想在此自定义设置页面中加载脚本怎么办？
其实也很简单。 假设我们通过以下代码注册一个自定义的顶部设置接口：
function wpkj_add_admin_page() {
// 添加一个自定义顶级菜单
add_menu_page(
'My Admin Page',
'My Admin Page',
'manage_options',
'my-admin-page', // 注意这个id
'admin_page_html'
)
}
add_action('admin_menu', 'wpkj_add_admin_page');
上面的代码创建了一个顶级菜单，作为我们的自定义设置页面的访问点。
然后我们可以使用以下代码仅在这个自定义设置页面上加载脚本：
function wpkj_load_scripts($hook) {
if( $hook !== 'toplevel_page_my-admin-page' )
return;
wp_enqueue_script( 'custom-js', plugins_url( 'js/custom.js' , dirname(__FILE__) ) );
}
add_action('admin_enqueue_scripts', 'wpkj_load_scripts');
第三行代码判断不是这个自定义设置页面，所以下面的代码不会被执行。
概括
使用正确的形式加载脚本不仅可以让你的程序更加专业，也可以避免用户感到困惑。
功能参考：
admin_enqueue_scripts 钩子
wp_enqueue_script() 函数
wp_enqueue_style() 函数
plugins_url() 函数
get_template_directory_uri() 函数
get_stylesheet_directory_uri() 函数
发表评论