【基础篇】5、制作主题的头部区域

上节课的时候,我们了解接触到了第一个函数。在这节课中,我将会讲解更多的有关头部的 WordPress 函数,并且教你打造一个完整、规范的头部。

这里的头部,主要分为两部分:

  1. HTML 文档中的 <head> 区域
  2. 主题中的顶部(通常包含博客名称、描述、导航等内容)

HTML 文档的 <head> 区域

众所周知,HTML 文档中,<head> 区域用来描述这个文档的各种信息,大部分的内容,都是看不见的,只有一个<title>元素,在标题栏上可以看见。但是并不是它不重要,这里 面包含文档声明,也是很重要的地方。与这块有关的,有很多函数等,在【基础篇】,我直说几个简单的,可以满足基本功能即可。在后面的【中级篇】教程中,我会更详细的讲解更多的函数和相关用法。

将以下代码复制进 head 标签内

<title><?php bloginfo('name');  ?> <?php  bloginfo( 'description' ); ?></title>
 <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
 <link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

简单的介绍一下相关功能。

<title>标签:

作为网页的标题,我们通常使用博客标题和博客描述作为博客首页的标题。所以我们使用了<?php bloginfo(‘name’); ?> <?php bloginfo( ‘description’ ); ?>这两个函数。但是在实际应用中,你会发现一个问题,如果就这样做了,所有的博客页面,全部都是相同的“博客标题 博客描述”。关于这个问题,我会单独拿出来在后面进行讨论。

<meta>标签:

声明文档的编码,WordPress 默认的编码就是 utf-8 ,所以我们尽可以大胆写上 utf-8。但是在官方主题中,还是用了<?php bloginfo( ‘charset’ ); ?>这个函数,来获取博客编码。所以我们需要这样写。

<link>标签:

加载必须的 style.css 文件。<?php bloginfo( ‘stylesheet_url’ ); ?>这个函数在之前的文章中,提到过,在这里不再赘述。

主题中的顶部

在本系列的 demo 主题,顶部只有一个网站标题和网站的副标题描述。所以我们就需要使用<?php bloginfo(‘name’); ?> <?php bloginfo( ‘description’ ); ?>这两个函数,替换掉之前我们的文本,即

这里还有个细节需要注意,在博客名称的地方,我使用了一个超链接,指向的是一个“#”,现在要把它修改成博客首页,则需要使用这个

<?php bloginfo('siteurl'); ?>

用它替换 href 属性中的 # 。

好了,头部的处理就这样完成了,我们可以在浏览器中访问一下。这时候,就可以看到标题、网站标题、网站描述变了。你在后台中修改相应的信息,刷新之后,相应的也会变。

本节课相关资源下载

myTheme(基础篇-5) 本节课主题下载

本系列文章

  1. 开始执行的 wordpress 主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
  3. 【基础篇】2、WordPress 的主题机制
  4. 【基础篇】3、设计制作你的 HTML 主题文件
  5. 【基础篇】4、安装主题文件