WordPress 主題教程 #4a：Header 模板

Header 模板是從零開始建立 WordPress 佈景主題系列教程的第四篇。前面我向你講解了如何安裝和啟動 XAMPP，安裝 WordPress 主題以及介紹了 PHP 語言的最基礎語言，這篇我們將繼續 PHP 並學習如何調用部落格的標題和連結。 盡量輸入所有代碼而不是直接拷貝我給你的代碼，這樣可以讓你盡量記住你所學到的的。 第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 檔案。在 和 這兩個標籤之間輸入 ，然後儲存它。 返回到瀏覽器並重新整理。這時候我們應該能夠看到部落格的標題。部落格的標題是 Demo Theme Development。 剛才發生什麼了？ 我們在網頁的主體 (body) 之間加入了一行 PHP 代碼到 index.php。bloginfo() 是調用部落格的資訊的函數。其中參數 name 代表了它調用的是部落格的標題。這個名字是在 option 頁面中設定的 Weblog Title。 - 結束 PHP 代碼 每次我們在 index.php 檔案中增加或者更改任何東西之後，都可以儲存，然後重新整理頁面去查看結果。 第4步：調用部落格連結 調用了部落格的標題之後，接下來就要把部落格的標題放入超連結中，這時候需要一個 XHTML 標籤。 返回 index.php 檔案。 在同一行增加 和 。此時新行的代碼應該是： 返回到瀏覽器，重新整理，然後就可以看到部落格的標題變成了連結。 現在它是一個連結，但是它沒有連結到哪裡。因為這個是部落格的標題，我們應該讓它連結到首頁。為此，在 href=後的雙引號中輸入 儲存，現在的代碼應該是： ”> 返回到瀏覽器，重新整理，當滑鼠在連結上面的時候，瀏覽器的狀態列應該顯示 http://localhost/wordpress 現在點擊這個連結，它就會讓我們返回首頁。可能現在看到還是是相同的頁面，但是用 # 或者 http://localhost/wordpress 作為連結地址是完全不一樣的。在接下來的課程我們會學到到他們之間的不同。 剛才發生什麼了？ 我們把網站名字變成了連結，並使它連結到部落格的首頁。 bloginfo('url') - 調用部落格基本資料，具體是首頁的的地址或者 URL - 是一個用於添加連結的 XHTML 標籤 - 連結的結束標籤。否則網頁將不知道哪裡結束連結，這樣會使得頁面接下來的內容全部都變成連結。還記得規則 #1嗎？正確關閉開啟的所有標籤。 href="" - 超文本的簡寫。在引號之間就是它的值。 最終代碼為： ”> 意思為：開始一個連結，連結的地址是部落格的URL，用 PHP 函數 bloginfo('url') 去調用這個地址或者URL。這個連結的文本是部落格的標題並使用 PHP 函數 bloginfo('name') 去調用部落格的標題。最後結束連結。 這篇主要介紹了 WordPress 主題的 XHTML 程式碼，下一篇我們將繼續 Header 模板。