主题开发系列第八课:wordpress快速仿站的应用数据的调用

主题开发系列

上节课程中我们把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文件里面,虽然没有对网站什么影响,但是看着还是很不舒服,为了我们代码的简洁可读性,我们还是用文档工具一一的删除。

人已赞赏
福利你懂的,关注公众号“福利龟龟”回复“要上车”,老司机在线飙车你懂得!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧