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 來辨別！