WordPress 101 – Part 2: How to properly include CSS and JS files
视频学习参考：https://www.youtube.com/watch?v=NF6r3Ejpris&list=PLriKzYyLb28nUFbe0Y9d-19uVkOnhYxFE&index=2
1. 在主题目录中创建资源文件夹和自定义css和js文件
assets/css/z.css
assets/js/z.js
2. 在主题目录中创建functions.php文件（WordPress主题结构可选文件【其实意义上是必须的且 名称不可更改 】）并使用hooks引入，直接加入WordPress不推荐不安全
3. 在functions.php中加入CSS
<?php
function z_script_enqueue() {
//加入css到模板文件中
//参数1 handle 必填 调用的样式文件名称 实际会显示到id=handle中
//参数2 src 可选 文件位置绝对路径
//参数3 deps 可选 依赖关系 如 array( ‘jquery’ ) 就是从wp-includes/js/jquery/jquery.js 中加入这个依赖的js
//参数4 ver 可选 版本号 会追加在url最后.css?ver=xxx
//参数5 media 可选 css文件使用范围 all 或者 types like ‘all’, ‘print’ and ‘screen’, or media queries like ‘(orientation: portrait)’ and ‘(max-width: 640px)’.
wp_enqueue_style(‘customstyle’, get_template_directory_uri() . ‘/assets/css/z.css’, array(), ‘1.0.0’, ‘all’ );
}
//tag hooks调用的方法WordPress方法
//funtion_to_add 调用的自定义方法
//priority
//accepted_args
add_action(‘wp_enqueue_scripts’, ‘z_script_enqueue’);
?>
4. 在header.php中加入显示代码 识别wp_enqueue_style加入css会自动加载到wp_head();位置
<?php wp_head(); ?>
5. 同理，在funtions.php中加入JS
//参数5 不同 in_footer 是否加入在footer位置 影响网页加载速度
wp_enqueue_script(‘customjs’, get_template_directory_uri() . ‘/assets/js/z.js’, array(), ‘1.0.0’, true);
5.同理，在footer.php中加入显示代码 识别wp_enqueue_script 会根据参数5加入wp_head(); 还是 wp_footer();位置
<?php wp_footer(); ?>
Super Easy!