WordPress主題制作全過程（五）：制作header.php

你可以嘗試用文本編輯器打開從WordPress主題制作全過程（三）：HTML靜態模板制作下載到的 .html 文件，不知道你有沒有發現他們頭部的代碼都非常的相似呢？其實我們可以提取這部分相似的代碼，放到一個單獨的文件header.php中，各個頁面想用這部分代碼的時候再用php的include包含進去，省的每個頁面里面都要寫這部分代碼，更改起來也可以達到一改全改的目的。

再次提醒：如果你不打算動手編寫代碼，這個系列教程就別看了，對你無益！

接著我們上次創建的主題目錄wp-content hemesAurelius，在該目錄下新建一個php文件header.php，我們提取出index.php中的頭部代碼復制粘貼到header.php中，下面是的代碼就是目前header.php中的所有代碼了(當然不同主題的頭部代碼都是不一樣，在你實際的項目中可以自定決定)：

再用文本編輯器打開index.php、archive.php、contact.php、full_width.php、page.php和single.php，刪掉以上類似代碼，改成：

好，現在打開你的測試博客主頁，看看我們制作的主題是否還可以正常工作，答案是可以的，跟原來幾乎沒什么兩樣，但還是一片混亂。get_header()就相當于將header.php中的代碼拷貝到當前的php文件。接下來，我們將仔細探討header.php中的動態內容。header.php將會被所有的模板頁面（主頁、分類頁、頁面、標簽頁等）所包含，所以header.php中代碼應該是動態，適合不同頁面的，所以這里面需要用到PHP代碼，而不是單純的HTML。下面讓我們一起來修改header.php：

1、更改<title>

我們都知道不同頁面的title都是不一樣，而且title的設置還會直接影響到SEO的效果，所以這里應該謹慎設置。下面提供一種SEO優化的title寫法，將<title>Aurelius | Blog</title>改成：

以上添加的php代碼運用了條件判斷，針對不同的頁面采用不同title，這里解釋一下這幾個條件標簽。

• is_home() ：當前頁面為主頁時返回true
• is_category()：當前頁面為分類頁時返回true
• is_single()：當前頁面為單文章頁時返回true
• is_page()：當前頁面為單頁面時返回true
• 更詳細的內容參閱WordPress文檔：條件標簽

到目前為止，可能你對這些條件判斷標簽還沒有深入的認識，也搞不懂到底是用了這些標簽會對主題造成怎樣的影響的，隨著我們教程的進一步深入，你會慢慢理解的。

2、更改樣式表style.css路徑

在此之前你看到的首頁都是混亂的，原因是還沒加載css樣式。現在我們一起把樣式加上。你可以在header.php中找到這一段代碼：

聰明的你可能問：wp-content hemesAurelius目錄下不是已經有一個 style.css 嗎？那為什么 header.php 沒有加載css呢？結果你是可以看到的，頁面一篇混亂，可以確定確實沒有加載到css。因為這是WordPress的主題，是要被WordPress的主程序調用，經過層層解析才能把你的博客顯示出來，而不是簡簡單單的html靜態網頁文件。正確的改法：

bloginfo('stylesheet_url')輸出的是你的主題css文件絕對網址，如http://localhost/wp/wp-content/themes/Aurelius/style.css，WordPress程序會自動識別你的WordPress安裝地址，當前啟用的主題，自動輸出這個style.css鏈接。現在你可以試著更改一下，然后刷新一下你的博客首頁，查看網頁源代碼，style.css的鏈接是不是變成你的了？頁面是否可以正常顯示了呢？

不過，還有幾張圖片的路徑不對，還不能顯示出來，現在我們一起用文本編輯器打開index.php、archive.php、contact.php、full_width.php、page.php和single.php，給這些圖片加上正確的URL，搜索代碼，將所有的：src="images/，批量替換成src="<?php bloginfo('template_url'); ?>/images/。現在再刷新你的主頁，看文章的縮略圖610×150是否可以正常顯示。<?php bloginfo('template_url'); ?>用于輸出主題目錄的URL。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈