主题开发系列

上节课程中我们把wordpress的主题基本标识和HTML代码改好了，下面就开始做数据的调用以及标签的引入。

/**
* 加载前台脚本和样式表
* 加载主样式表style.css
*/
add_action('wp_enqueue_scripts', 'lingfeng_scripts');
function lingfeng_scripts() {
/**
* wp_enqueue_style( $handle, $src, $deps, $ver, $media );
* 功能：添加样式表
* @Param string $handle 【必填】样式表的标识符（名称）
* @Param string $src 【可选】样式表的所在地址（url）
* @Param array $deps 【可选】加载本样式之前，必须首先加载的
* @Param string $ver 【可选】样式表的版本
* @Param boolen $media 【可选】样式表指定的媒体
* 例如：wp_enqueue_style( 'lingfeng-style', get_stylesheet_uri() );
* 加载主题中的style.css文件
*/
wp_enqueue_style( 'lingfeng-style', get_template_directory_uri().'/static/css/style.css' );
wp_enqueue_style( 'lingfeng-style01', get_template_directory_uri().'/static/css/banner.css' );
wp_enqueue_style( 'lingfeng-style01', get_template_directory_uri().'/static/css/font-awesome.min.css' );

/**
* wp_register_script( $handle, $src, $deps, $ver, $in_footer )
* 函数功能：加载js脚本
* @Param string $handle 【必填】脚本的标识符（名称）
* @Param string $src 【可选】脚本所在地址（url）
* @Param array $deps 【可选】加载本脚本之前，必须首先加载的
* @Param string $ver 【可选】脚本的版本
* @Param boolen $in_footer 【可选】脚本的位置，是否放在页脚
* 函数说明，仅仅是注册和备案，并没有真正添加。
* 真正要添加脚本，用wp_enqueue_script( ) 函数
* 例如：wp_register_script ('lingfeng-lazyload', get_template_directory_uri().'/js/jquery.lazyload.js');
* 解释：注册一个名字为'lingfeng-lazyload'的脚本，脚本的地址是主题文件夹下的js/juqery.lazyload.js
*/

/**
* wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )
* 函数功能：加载js脚本
* @Param string $handle 【必填】脚本的标识符（名称）
* @Param string $src 【可选】脚本所在地址（url）
* @Param array $deps 【可选】加载本脚本之前，必须首先加载的
* @Param string $ver 【可选】脚本的版本
* @Param boolen $in_footer 【可选】脚本的位置，是否放在页脚
* 例如: wp_enqueue_script ('lingfeng-tool', get_template_directory_uri().'/js/tool.js', array( 'jquery', 'lingfeng-lazyload'));
* 解释：添加名字为‘lingfeng-tool’的脚本，脚本的地址为主题目录下的js/tool.js，而且在加载此脚本之前先要加载名字叫做'jquery'和'lingfeng-lazyload'的脚本
*/
wp_enqueue_script( 'zhangsan-bxsilder', get_template_directory_uri().'/js/jquery.bxslider.min.js',array('jquery') );
wp_enqueue_script( 'zhangsan-dobxslider', get_template_directory_uri().'/js/dobxslider.js',array('zhangsan-bxsilder'));

}

将上方的代码放到function.php上面，之后在head标签中放上<?php wp_head(); ?>函数

<?php wp_head(); ?>：头部挂钩（hook），非常重要的函数，基本上每一个主题都要用到，因为它是用来让其他插件或功能函数在网站头部输出css、js等文件的，如果主题没有这个函数，可能会造成很多插件无法正常使用，一般添加在 header.php 文件中

之后打开网页的首页刷新即可看到正常的CSS样式，OK之后我们在其他的PHP文件头中加上这个函数，再一一的实验观察是否可以打开，完成这一步后css的引入已经完成了，下一步我们就按照上方的办法，引入js的文件信息。

完成上面的一步之后html文件转为php文件之后所造成的css和js文件调用文件就解决了，但是原来的css和js文件依旧在php文件里面，虽然没有对网站什么影响，但是看着还是很不舒服，为了我们代码的简洁可读性，我们还是用文档工具一一的删除。