wp_enqueue_style() admin_enqueue_scripts 在head区引入JS、CSS文件

admin

在模板中直接使用link标签引用css样式文件是在wordpress主题开发中常用的方法，但这不是wordpress正确的引用css文件的方法，wordpress正确引用方法是使用wp_enqueue_style()函数。

语法结构

1. <?php wp_enqueue_style($handle, $src, $deps, $ver, $media); ?>

复制代码

参数

$handle – 调用的样式文件名称，唯一性，因此不能和其它css文件命名相同。
$src – css文件的路径（即url），不要直接使用域名url，要使用路径函数，如get_template_directory_uri()来获取主题目录中的样式文件。
$deps – 依赖关系，如果丢失某些其他样式文件将导致你的样式表将无法正常工作，你可以使用该参数设置“依赖关系”。，非必需。
$ver – 加载的css文件的版本号，可以使用主题的版本号或随意自定义一个，设置为null则不使用版本号。默认为false，使用WordPress的版本号。
$media – 是指CSS的媒体类型，比如“screen”或“handheld”或“print”。如果不知道是否需要，就留空。默认为“all”。

通过wp_enqueue_style()函数加载css文件时，应该将它分配给一个钩子，如只在前台调用，使用钩子wp_enqueue_scripts；只在后台调用，使用admin_enqueue_scripts；用在WP登陆页面加载则使用login_enqueue_scripts。

只在前台调用

1. <?php
   
2. function tone_front_boot(){
   
3.     wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css' );
   
4. }
   
5. add_action( 'wp_enqueue_scripts', 'tone_front_boot' );
   
6. ?>

复制代码

只在后台调用

1. <?php
   
2. function tone_admin_boot(){
   
3.     wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css' );
   
4. }
   
5. add_action( 'admin_enqueue_scripts', 'tone_admin_boot' );
   
6. ?>

复制代码

另外一种方法，使用wp_head钩子和admin_head钩子

为WordPress后台添加css和js代码

1. <?php
   
2.     function admin_jscss() {
   
3.         wp_enqueue_style( 'admin-myjscss', get_template_directory_uri() . '/css/bootstrap.css' );
   
4.         wp_enqueue_script('admin-myjscss', get_template_directory_uri() . '/js/bootstrap.js' );
   
5.         wp_enqueue_script( 'admin-myjscss', get_template_directory_uri() . '/js/jquery.min.js' );
   
6.     }
   
7.     add_action('admin_head', 'admin_jscss');
   
8. ?>

复制代码