WordPress开发

WordPress主题开发:开发主题头部文件(引入静态资源)

声明

本教程属于《WordPress主题开发系列教程初阶》 之一

未经授权,禁止转载,违者必究!

描述

主题头部文件也就是前面我们创建的那堆文件中的header.php。

在上一小节的教程中我已经简单的描述了header.php是一个什么文件。在这里我在详细说明一下。你打开任何一个WordPress网站,都会发现他们好几个页面的头部是基本不变的,都跟首页一样什么logo、菜单、联系我们等图标信息,这些就都是在header文件中的编码,再使用WordPress的函数就可以全局引用此文件,在php中的说法就是在其他文件中包含这个文件。

当然,这些是你能看到的,而那些看不到的,比如全站都会用到的css、js等也都是在这里引入的。但一般在前端开发中是不建议将js放在头部文件中的,因为浏览器从上到下的加载原则,会使你的网站载入很慢。

下面我们开始在头部文件中编码,并且引入静态资源文件,这里我使用了一个我在开发过程中经常用到的一个前端框架:semantic

开始

首先我们再header.php文件中创建一个简单的html5文件,如下:

然后下载我这里使用到的前端框架文件包(从git上面下载的有一堆文件,但我们这里只需要引入的只有几个,我已经在附件中给你们准备好了),放入assets静态文件目录中(请注意,也许你的主题静态文件目录不叫这个):

之后我们在html的head标记中引入semantic.min.css文件,如下:

之后我们再在主题的index.php文件中使用函数引入头部文件:

get_header()

此函数为WordPress引入头部文件函数,只要你在其他文件中使用此函数,则会自动调用你主题目录中header.php文件模板


现在我们再访问网站你会发现控制台报错,说是找不到semantic.min.css这个文件(你得保证在这之前你已经将此前端框架上传到你服务器目录中了),这是因为这里我们的css文件是相对于我们的网站来导入的,而在这里我们需要得到主题所在目录的绝对路径,可以使用函数:get_template_directory_uri()

get_template_directory_uri()

此函数为WordPress封装函数,用于获取你当前使用主题的根目录。


修改代码如下:

这里还有一个js文件没有引入,因为我不建议在头部引入js,所以我会再接下来的footer.php文件中引入。

也许你还想引入自己主题根目录下面的style.css文件,如下:

<link rel="alternate" href="<?php echo get_template_directory_uri();?>/style.css">

注意我路径的的”/”

技术援助

需要技术援助?点击这里,帮你解决你的所有问题!PS:可能你离大神之间,只差一个我们!!!!

评论已经被关闭。

插入图片