【轉載自我愛水煮魚】

最后說一次，開始之前務必先讀下前面的日志。這篇會完成 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 來區分！