Header 模板 2 是从零开端创立 WordPress 主题教程系列教程的第四篇第二局部。最后说一次，开端之前务必先读下前面的日志。这篇会完成 Herder 模板，并且开端引见 DIV Box 模型。

第 1 步：开启 XAMPP 和翻开 index.php
– 启动 Xampp
– 翻开 Tutorial 的主题文件夹
– 翻开阅读器，在地址栏输入 http://localhost/WordPress
– 返回主题文件夹，用记事本翻开 index.php

第 2 步：给博客的标题添加 H1 的标签
如今，index.php 的代码是：

<a href=」<?php bloginfo(』url』); ?>」><?php bloginfo(』name』); ?>

给它添加

和

标签。 H1 标签意义是标题一。 HTML 一共能够有 7 级标题：H1，H2，H3，H4，H5，H6 。依照默许，H1 是字体最大而 H6 是则最小。

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

<a href=」<?php bloginfo(』url』); ?>」><?php bloginfo(』name』); ?>

保管，返回阅读器并刷新。

第 3 步：添加博客描绘
调用博客的描绘，则在博客标题链接的下面输入以下代码： <?php bloginfo(』description』); ?> 。

如今变成了：

<a href=」<?php bloginfo(』url』); ?>」><?php bloginfo(』name』); ?>

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

保管并刷新阅读器，能够看到在博客标题链接的下面呈现博客的描绘，我们能够到 WordPress 管理后下修正博客的描绘。

<?php – 开端 PHP 代码
bloginfo(』description』) – 调用博客信息，这里的是描绘
; – 中止调用
?> 完毕 PHP 代码

第 4 步：DIV 标签
这步将引见一个新的标签 — DIV 。

给以上代码添加

和

标签：

<a href=」?php bloginfo(』url』); ?>」><?php bloginfo(』name』); ?>

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

保管，刷新阅读器，应该看到没有任何变化

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

第 5 步：添加 Header DIV 标签
添加 id=」header」 到 DIV 标签，如下：

保管并刷新阅读器。

同样也没有改动，这里给 DIV 标签指定了 ID ，由于将会有更多的 DIV 标签或者无形的盒子，我们运用 ID 来辨别！