WP 加载css js资源 注册队列钩子一文看懂

wordpress的自定义程度很大，以至于有很多方式去做同一件事，而这样就务必造成了很多要知道的东西，对于怎么加载一些静态的css/js文件都有很多中模式，其他cms里可以直接在模板文件里引入，在函数里引入，当然这在wordpress里也是可以的，但是其官网推荐在function.php里队列引入。就有了官方的几个函数，而且为了可定义程度，每个函数的参数还蛮多的，搞清楚这些，最好是分类来看，下面就写写自己的理解，主要的东西就是分成三组来看：

1.注册（不会引用到页面里）[非必需]

对css和js的资源分别对应一个函数，参数差不多，最后一个参数需要注意，css的是管理媒体类型的，js的是控制在页头还是页脚里加载的

wp_register_style() 注册css

wp_register_style(
'my-bootstrap-extension', // 名称
get_template_directory_uri() . '/css/my-bootstrap-extension.css', // 样式表的路径
array( 'bootstrap-main' ), // 依存的其他样式表
'1.2', // 版本号
'screen', // CSS 媒体类型
);

wp_register_script() 注册js  

wp_register_script( 
'jquery', // 名称
get_template_directory_uri() . '/js/jquery.js', // 路径
false, // 依存
'1.0', // 版本号
false  // true 在 wp_head() [头部]  false 在脚部 wp_footer()
);

注意：注册了就有对应的删除的函数，也是一对，参数就简单了，就是注册的时候的名称 [ wp_deregister_script ] [wp_deregister_style]

2.队列 就是要准备引用到页面

wp_enqueue_style()和wp_enqueue_script()

参数分别和各自的注册函数一样，唯一区别就是前面已经注册过的名称，可以拿来直接队列，所以队列了有了两种情况：

2.1、如果我们之前已经注册过样式 wp_register_style（）

wp_enqueue_style( 'my-bootstrap-extension' );  //注册时候的名称

2.2、 如果我们之前没有注册，我们不得不设置 $src 参数！

wp_enqueue_style(
'my-bootstrap-extension',
get_template_directory_uri() . '/css/my-bootstrap-extension.css',
array( 'bootstrap-main' ),
null, // 举例不适用版本号
// ...并且没有指定CSS媒体类型
);

配置时间戳，防止缓存 就是版本号获取时间

wp_enqueue_script( 
'wpa-main-js', 
get_theme_file_uri( 'dist/scripts/main.js' ), 
[],  //依赖，其他第一个参数的名称
filemtime( get_theme_file_path( 'dist/scripts/main.js' ) ), //版本号
true 
);

3、三组钩子（注意后面都是scripts,没有css，js不同资源的区分）

wp_enqueue_scripts 用来在网站前台加载脚本和CSS
admin_enqueue_scripts 用来在后台加载脚本和CSS
login_enqueue_scripts 用来在WP登录页面加载脚本和CSS

这一步才是真正决定放在哪个页面，wordpress后台的样式功能也是可以修改的，故你的主题可以决定自己的资源是在前台还是后台，还是登录加载，如果少了这一步，系统是不是不知道具体放在哪的。

用法：

function mytheme_enqueue_style() {
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );

4、其他 wp_print_scripts() 任意位置 输出，看成是 直接echo

<?php wp_print_scripts('jquery'); ?>  也是注册过的名称