WordPress主題開發教程五：編寫Header模板（二）(wordpress主題製作教程(十):製作文章單頁模板single.php)

WordPress主題開發教程五：編寫Header模板（二）

第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 來區分！

wordpress主題製作教程(十):製作文章單頁模板single.php

在前一篇教程中我們已經只做好了index.php，這個文件可以當首頁使用，也可以當分類、標籤等歸檔頁使用，這篇教程我們來製作一下文章的具體頁面-文章單頁模板，如果我們沒有但頁模板single.php，那麼就會使用index.php文件來代替，不過對於文章單頁，我們還需要添加一些其他的信息，比如版權申明、相關文章、評論等等，所以我們應該另外製作一個模板，在我們下載的主題文件夾下面已經有了single.php文件。你可以試著刪除這個文件，然後再去看看用index.php顯示文章的效果。

用編輯器打開主題文件夾下面的single.php文件，在前面的教程中我們已經將這個文件中的頭部、底部、側邊欄代碼替換成了載入對應模板的代碼。對於文章單頁，我們的文章框架代碼頁需要放在一個循環中，只不過到了單頁面，只循環一次。所以你完全可以將index.php裡面的代碼全部複製過來，再添加，修改。

一、文章標題
找到文章標題：