WordPress主题开发教程五：编写Header模板（二）(wordpress主题制作教程(12):单页面模板page.php)

WordPress主题开发教程五：编写Header模板（二）

第1步：开启 XAMPP 和打开 index.php

• – 启动 Xampp
• – 打开 Tutorial 的主题文件夹
• – 打开浏览器，在地址栏输入 http://localhost/wordpress
• – 返回主题文件夹，用记事本打开 index.php

第2步：给博客的标题添加 H1 的标签

现在，index.php 的代码是：

<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>

给它添加 <h1> 和 </h1> 标签。H1 标签意思是标题一。HTML 一共可以有7级标题：H1，H2，H3，H4，H5，H6。按照默认，H1是字体最大而H6是则最小。

添加之后的的 index.php 文件是：

<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>

保存，返回浏览器并刷新。

第3步：添加博客描述

调用博客的描述，则在博客标题链接的下面输入以下代码：

<?php bloginfo(’description’); ?>

现在变成了：

<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1><?php bloginfo(’description’); ?>

保存并刷新浏览器，可以看到在博客标题链接的下面出现博客的描述，我们可以看到 WordPress 管理后下修改博客的描述。

<?php – 开始 PHP 代码bloginfo(’description’) – 调用博客信息，这里的是描述; – 停止调用?> 结束 PHP 代码

第4步：DIV 标签

下一步将介绍一个新的标签 — DIV。

给以上代码添加 <div> 和 </div>标签： <div> <h1><a href=”?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1><?php bloginfo(’description’); ?> </div>

保存，刷新浏览器，应该看到没有任何变化

可以把 DIV 想像成一个无形的盒子 (box)。在这里它把博客标题链接和博客描述从其他东西中区分开来。如果没有对它进行样式化，它无非是单独的内容，以后我们可以会用 style.css 这个文件去样式化这个无形的盒子。我们可以给 DIV 附上 边框（borders），填充（paddings）, 页面空白（margins），背景颜色（background color），背景图片（background images），以及其他一些东东。

第5步：添加 Header DIV 标签

添加 id=”header” 到 DIV 标签，如下：

<div id=”header”>

保存并刷新浏览器。

同样也没有改变，这里给 DIV 标签指定了 ID ，因为将会有更多的 DIV 标签或者无形的盒子，我们可以使用 ID 来区分！

wordpress主题制作教程(12):单页面模板page.php

一个博客站，包括企业站、图片站等等，里面的内容都可以归为两大类：文章、分类；文章又可以分为：普通文章、独立页面。在wordpress后台已经将文章和内容区分开了，实际上文章和页面只是两种文章形式，它们在数据库中存储在同一个表中，存储方式也是一样，只有一个属性不同：post,page。所以page的添加方式，显示方式跟posts一样，他们的模板代码页基本相似，只不过我们按照需要可以改的不一样。

在前面的教程中已经编辑过page.php文件了，里面的头部代码、侧边栏代码、底部代码已经添加好了，正文内容，你可以按照添加index.php的方法也可以按照添加single.php的方法。

添加过程就省略了。重复内容无意义。

但是还是有些内容要说。

我们在添加页面的时候，右边有个选项页面属性：

可以看到有个页面模板选项，一般只有默认模板，也就是我们的page.php，如果你想添加另外的模板，比如你将page.php复制一份，然后重命名为page-tep.php，

编辑page-tep.php在最最最前面加上