【轉載自我愛水煮魚】

盡量輸入所有代碼而不是直接拷貝我給你的代碼，這樣可以讓你盡量記住你所學到的。

第1步：打開 XAMPP 和主題文件夾。

打開 Xampp，然后打開上次創建的主題文件夾，xampp/htdocs/wordpress/wp-content/themes/tutorial。我們應該看到上次創建的兩個文件：index.php 和 style.css。

index.php 和 style.css 文件的內容應該和index.txt 和 style.txt 一致。

第2步：打開 index.php

打開瀏覽器，轉到 http://localhost/wordpress。因為上次安裝了一個空白的主題，這時我們應該看到一個空白的頁面。

返回主題文件夾并打開 index.php 文件。

到目前為止，我們已經打開了主題文件夾，瀏覽器和 index.php 文件。

第3步：調用博客標題

編輯 index.php 文件。在 <body> 和 </body> 這兩個標簽之間輸入 <?php bloginfo('name'); ?>，然后保存它。

返回到瀏覽器并刷新。這時候我們應該能夠看到博客的標題。博客的標題是 Demo Theme Development。

剛才發生什么了？

我們在網頁的主體 (body) 之間加入了一行 PHP 代碼到 index.php。bloginfo() 是調用博客的信息的函數。其中參數 name 代表了它調用的是博客的標題。這個名字是在 option 頁面中設置的 Weblog Title。

<?php - 開始 PHP 代碼
bloginfo('name') - 調用博客信息，具體是博客的標題。
; - 結束調用博客信息
?> - 結束 PHP 代碼

每次我們在 index.php 文件中增加或者更改任何東西之后，都可以保存，然后刷新頁面去查看結果。

第4步：調用博客鏈接

調用了博客的標題之后，接下來就要把博客的標題放入超鏈接中，這時候需要一個 XHTML 標簽。

返回 index.php 文件。

在同一行增加 <a href=”#”> 和 </a>。此時新行的代碼應該是：
<a href=”#”><?php bloginfo('name'); ?></a>

返回到瀏覽器，刷新，然后就可以看到博客的標題變成了鏈接。

現在它是一個鏈接，但是它沒有鏈接到哪里。因為這個是博客的標題，我們應該讓它鏈接到首頁。為此，在 href=后的雙引號中輸入 <?php bloginfo('url'); ?>

保存，現在的代碼應該是：
<a href=”<?php bloginfo('url'); ?>”><?php bloginfo('name'); ?></a>

返回到瀏覽器，刷新，當鼠標在鏈接上面的時候，瀏覽器的狀態欄應該顯示 http://localhost/wordpress

現在點擊這個鏈接，它就會讓我們返回首頁。可能現在看到還是是相同的頁面，但是用 # 或者 http://localhost/wordpress 作為鏈接地址是完全不一樣的。在接下來的課程我們會學到到他們之間的不同。

剛才發生什么了？

我們把網站名字變成了鏈接，并使它鏈接到博客的主頁。

bloginfo('url') - 調用博客基本信息，具體是首頁的的地址或者 URL
<a> - 是一個用于添加鏈接的 XHTML 標簽
</a> - 鏈接的結束標簽。否則網頁將不知道哪里結束鏈接，這樣會使得頁面接下來的內容全部都變成鏈接。還記得規則 #1嗎？正確關閉打開的所有標簽。
href="" - 超文本的簡寫。在引號之間就是它的值。

最終代碼為：
<a href=”<?php bloginfo('url'); ?>”><?php bloginfo('name'); ?></a>

意思為：開始一個鏈接，鏈接的地址是博客的URL，用 PHP 函數 bloginfo('url') 去調用這個地址或者URL。這個鏈接的文本是博客的標題并使用 PHP 函數 bloginfo('name') 去調用博客的標題。最后結束鏈接。

這篇主要介紹了 WordPress 主題的 XHTML 代碼，下一篇我們將繼續 Header 模板。