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