WordPress主題開發教程五：編寫Header模板（二）(wordpress主題製作教程(12):單頁面模板page.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主題製作教程(12):單頁面模板page.php

一個博客站，包括企業站、圖片站等等，裡面的內容都可以歸為兩大類：文章、分類；文章又可以分為：普通文章、獨立頁面。在wordpress後台已經將文章和內容區分開了，實際上文章和頁面只是兩種文章形式，它們在資料庫中存儲在同一個表中，存儲方式也是一樣，只有一個屬性不同：post,page。所以page的添加方式，顯示方式跟posts一樣，他們的模板代碼頁基本相似，只不過我們按照需要可以改的不一樣。

在前面的教程中已經編輯過page.php文件了，裡面的頭部代碼、側邊欄代碼、底部代碼已經添加好了，正文內容，你可以按照添加index.php的方法也可以按照添加single.php的方法。

添加過程就省略了。重複內容無意義。

但是還是有些內容要說。

我們在添加頁面的時候，右邊有個選項頁面屬性：

可以看到有個頁面模板選項，一般只有默認模板，也就是我們的page.php，如果你想添加另外的模板，比如你將page.php複製一份，然後重命名為page-tep.php，

編輯page-tep.php在最最最前面加上