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">

注意我路径的的”/”