WordPress 主題教程 #4b：Header 模板 2

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’); ?></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 來區分！