文章概要
在创建主题时，当你将文件主题启用后，你会发现页面中的所有css/js代码加载失败，如下图所示。这是由于wordpress本身加载样式表/js文件有它自己的规则。 下面WP花园洋葱将带领大家使用标准的WordPress方法加载脚本和样式表。
向WordPress添加脚本和样式非常简单。你将创建一个排列所有脚本和样式的函数，当插入脚本或样式表时，WordPress会创建一个路径来找到您的文件和它可能有的依赖项（比如JQuery），然后插入您的脚本和样式表。
1. 引入函数
wordpress为主题添加脚本和样式的正确方法是将它们放入functions.php文件。如没有该文件，请创建一个functions.php文件。
引入必要的css和js文件的格式为
add_action(‘wp_enqueue_scripts’, ‘wphy_script_style’);
function wphy_script_style()
{
//引入css/js文件路径
}
2.加载css样式表 / JS文件
一般情况下使用wp_enqueue_script(）或wp_enqueue_style(）来链接脚本或样式
js
wp_enqueue_script(‘html5‘,get_theme_file_uri(‘/assets/js/html5.js),array(),’3.7.3′);
这里的site为js文件的名称
后面为填写js的链接位置
这里的含义为查找名为”html5”的js文件并加载它。
css
wp_enqueue_style(‘site‘, get_template_directory_uri() . ‘/css/site.css‘, array() , ‘1.0’);
这里的site为css文件的名称
后面为填写css的链接位置
这里的含义为查找名为”site”的样式表并加载它。
3.引入基本格式
引入css文件的基本格式为
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
以下是可选的参数：
- $handle是样式表的名称
- $src是它所在的位置。其余参数可选
- $deps是指这个样式表是否依赖于另一个样式表，这样要先加载其依赖样式表
- $ver设置版本号
- $media可以指定加载此样式表的媒体类型
引入js文件的基本格式为
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
*推荐使用wp_enqueue_script（），这样有利于加载和缓存，类似于wp_enqueue_style(）的语法。
- $handle是样式表的名称
- $src是它所在的位置。其余参数可选
- $deps是一个数组，可以处理您的依赖脚本，比如JQuery
- $ver设置版本号
- $in_footer是一个布尔参数（true/false）,允许您将脚本放置在HTML文档的页脚中，而不是标题中，以免延迟加载
4.引入案例
将所有的脚本和样式表组合成一个函数，然后使用wp_enqueue_scripts调用它们
add_action('wp_enqueue_script','wphy_script_style');
function wphy_script_style(){
wp_enqueue_style('wphy-style',get_stylesheet_uri());
wp_enqueue_style('wphy',get_template_directory_uri().'/wphy.css',array(),'1.0');
wp_enqueue_style('alicknav',get_template_directory_uri().'/css/alicknav.min.css',array(),'1.0');
wp_enqueue_style('owl',get_template_directory_uri().'/css/owl.theme.css',array(),'1.0');
wp_enqueue_style(carousel',get_template_directory_uri().'/css/owl.carousel.css',array(),'1.0');
wp_enqueue_script('wphy-min-js',get_template_directory_uri().'/script.min.js',array('jquery'),'1.0.0',true);
}
