在WordPress管理后台正确加载js和css脚本

作为WordPress开发者,我们需要学会按照WordPress规范的方式去进行开发,避免带来不必要的兼容问题。今天,倡萌就和大家来说下如何在WordPress管理后台界面正确地加载js和css脚本。

一些错误的示例

开始之前,让我们来看一下一些初级开发者常犯的错误。

// 错误示例1
function wpkj_loading_scripts_wrong() {
	echo '<script type="text/javascript" src="https://ajax.lug.ustc.edu.cn/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_headadmin_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后台

按照前面的错误分析,我们知道以下几点:

  1. 不要引入重复的脚本(比如jquery库),可通过依赖关系参数设置
  2. 使用 admin_enqueue_scripts 钩子加载脚本
  3. 使用 wp_enqueue_script() 引入js文件,使用 wp_enqueue_style() 函数引入css文件
  4. 插件使用 plugins_url() 函数生成脚本路径,主题使用 get_template_directory_uri() (父主题)或 get_stylesheet_directory_uri() (子主题)生成脚本路径
  5. 按需加载脚本文件(下文将详细说明)

正确加载脚本的基本方式

如果前面的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行代码判断不是这个自定义设置页面,就不执行下面的代码。

小结

使用正确的方式加载脚本,不仅可以让自己的程序更加专业,还可以避免给用户造成困扰。

函数参考:

如果你希望成长为一名合格的WordPress人员,建议继续看下我们的教程:

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
欢迎关注我们的微信公众号:WPDAXUE

倡萌

一个文科IT宅男,喜欢折腾WordPress和被它折腾 ^_^

暂无评论

发表评论