作为WordPress开发者，我们需要学会按照WordPress规范的方式去进行开发，避免带来不必要的兼容问题。今天，倡萌就和大家来说下如何在WordPress管理后台界面正确地加载js和css脚本。
一些错误的示例
开始之前，让我们来看一下一些初级开发者常犯的错误。
// 错误示例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"></script>';
}
add_action('admin_head', 'wpkj_loading_scripts_wrong');
// 错误示例2
function wpkj_loading_scripts_wrong() {
echo '<script type="text/javascript" src="https://yoursite.com/path/to/custom.js"></script>';
}
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，这些都是错误的钩子，虽然可以正常加载你的js或css脚本，但是可能会造成兼容问题。正确的做法是使用 admin_enqueue_scripts 钩子。
2、重复引用 jquery 脚本库
示例1引入了一个自定义的jquery库，这是绝对不允许的，这样做会在同一个页面有两个版本的jquery脚本（另一个是WP默认自带的），它会导致其他依赖 jquery 库的脚本无法正常工作。正确的做法是，通过 wp_enqueue_script() 的第3个参数设置依赖关系。比如：
// 这里直接引入你自己的自定义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、从写死的网址加载文件
示例2引入了一个来自你的网站网址下的文件，一旦你的网站不存在或无法访问，或者更换了域名，那就给用户带来了不必要的麻烦。所以，一定不要直接从你的网站引入文件。
4、使用相对网址加载文件
示例3使用了相对网址引入文件，可能在你的网站中功能正常，但是在别人的网站中可能会出问题，毕竟，不是所有网站的安装目录和站点情况都一样。正确的做法应该是使用WordPress的自带函数来加载文件的绝对网址。比如：
// 引入插件的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()（父主题）或get_stylesheet_directory_uri()（子主题）生成脚本路径 - 按需加载脚本文件（下文将详细说明）
正确加载脚本的基本方式
如果前面的4点还不是很了解，建议先看下我们之前的教程：
下面，我们将来着重讲解如何按需加载脚本到指定的管理页面。
按需加载脚本到特定页面
do_action( 'admin_enqueue_scripts', string $hook_suffix )如上所示，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个判断条件，如果不是在“所有文章”、“写文章”以及文章编辑界面，就不执行下面的代码。
常用的后台页面
你可以直接访问对应的页面，在网址中就可以看到，比如：
- index.php – 仪表盘
- edit.php – 所有文章列表（含自定义文章类型）
- post.php – 文章编辑界面（含自定义文章类型）
- post-new.php – 添加文章（含自定义文章类型）
- upload.php – 媒体
- edit-comments.php – 评论列表
- comment.php – 评论编辑界面
- themes.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'); 如果你对添加自定义菜单的功能还不熟悉，可以看下 《WordPress 插件开发教程 Part 4 – 与WordPress整合》；更多关于自定义设置页面的教程，可以看下专题《WordPress Settings API 指南》
上面的代码创建了一个顶级菜单，作为我们自定义设置页面的访问入口。
然后我们可以通过下面的代码来只在这个自定义设置页面加载脚本：
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');第3行代码判断不是这个自定义设置页面，就不执行下面的代码。
小结
使用正确的方式加载脚本，不仅可以让自己的程序更加专业，还可以避免给用户造成困扰。
函数参考：
admin_enqueue_scripts钩子wp_enqueue_script()函数wp_enqueue_style()函数plugins_url()函数get_template_directory_uri()函数get_stylesheet_directory_uri()函数
如果你希望成长为一名合格的WordPress人员，建议继续看下我们的教程：
