WordPress佈景改寫成HTML5的前置步驟

發表時間： 2011-10-28

最近已經將自己的WordPress佈景主題改寫成HTML5架構(imXD5)，不過中途倒是遇到許多小問題，因為HTML5是屬於語意標籤，如果用錯標籤，可能會讓網站的SEO出問題，所以改到一半的時候有點退卻，不過睡一覺後，又是一條好漢，所以爬了許多相關的HTML5資料，首先必須先做好前置步驟，讓所有瀏覽器都可以吃HTML5標籤。

目前可支援HTML5的瀏覽器有Google Chrome、Firefox、Safari、Opera以及IE9，那舊版IE呢？那只需要加上一個小小的hack，就可以讓他懂得HTML5標籤了。除此之外，在WordPress環境下，為了讓網頁規範符合HTML5，可以讓網站通過檢測，還必須變更rel所帶的參數，因為WordPress自己產生的rel屬性並不符合HTML5標準規範。

WordPress整體架構一直是遵循著W3C標準規範在前進，不過，目前尚未完全跟上HTML5腳步，或許現在還不是急迫的需要跟上，因此整體架構沒有朝著HTML5走。但我們不難發現，WordPress在3.2版本中的預設主題「twentyeleven」已經是採用HTML5的語意架構了。而網路上也越來越多是採用HTML5架構撰寫的佈景主題慢慢浮現，不過每一個佈景是否都遵循著標準規範呢？

前面提到，想要採用HTML5架構OK，IE不支援也有hack可以解決，那這樣是否就可以進行了？這句話存著有很大疑問，雖然HTML是語意標籤，不過這個語意可是英文並不是中文，所以在理解上會有一些小小落差，一但有了落差與誤解，使用錯誤的HTML標籤，很容易讓網站的搜尋排名下滑，甚至很難在搜尋引擎上找到。

看到這邊，我想很多使用者可能非常憂心這樣的問題，當然我也不例外，看到關於上述的網路文章時，確實立刻停擺目前正在改的WordPress佈景。但後來想想，未來一定會朝著這樣的方向邁進，因為連古老的IE，在第9版開始都逐漸支援HTML5了。

文章目錄

讓IE瀏覽器也可以看懂HTML5
讓WordPress佈景通過HTML5檢測
修改DOCTYPE宣告
去除head的Profile屬性
修改meta資訊

讓IE瀏覽器也可以看懂HTML5

回到正題，要讓WordPress佈景主題或是一般網頁支援HTML5有幾個地方需要注意一下，首先就是針對IE的部分。在IE8以下版本(IE7、IE6…)，基本上是不支援HTML5，也無法理解HTML5標籤，因此我們需要進行小小的hack讓IE瀏覽器看懂。最常見的標準做法就是透過HTML5 shiv這個不到3Kb的JS，讓IE瀏覽器可以識別這些HTML5標籤。

這個JS，主要是讓IE支援HTML5元素，JS內是簡單的document.createElement聲明，並且利用IE的代碼讓IE瀏覽器可以讀取，其他瀏覽器並不會讀取這段JS，也就表示在非IE瀏覽器下，不會多出這個http請求。(利用html5shiv)

因此，請開啟佈景主題的header.php，把html5shiv下語法放到</head>標籤之前即可。

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

不想加入在header.php，當然你可以開啟functions.php，加入下面這段語法。

function add_ie_html5_shim () {
echo '<!--[if lt IE 9]>';
echo '<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>';
echo '<![endif]-->';
}
add_action('wp_head', 'add_ie_html5_shim');

讓WordPress佈景通過HTML5檢測

因為WordPress本身超連結產生出來的rel屬性並不符合HTML5的規範，因此我們必須透過語法將其屬性改成符合HTML5規範，這樣未來才可以通過HTML5的檢測。目前網路上有兩種方法，一種是將站內所有的rel標籤去除掉，這樣檢測時可以通過，另一種是寫PHP去取代掉原本的屬性，讓屬性可以符合HTML5標準。

其中的分類就是問題的最大宗，因為在HTML5的rel中，並不存在category的屬性。所以解決方法可以去除所有rel屬性，或者是改變錯誤的屬性。

第一種方法是透過內建的語法去刪除不符合規定的rel屬性，但經過使用後，有些部分依然無法解決HTML5的檢驗問題，因此我們改用第二種方法：改變錯誤的屬性變成正確的。以下程式碼複製並貼到佈景主題的functions.php即可。以下語法來自於：PHOETRY。

<?php
foreach(array(
'rsd_link',
'index_rel_link',
'start_post_rel_link',
'wlwmanifest_link'
) as $xx)
remove_action('wp_head',$xx);
function the_category_filter($thelist){
  return preg_replace('/rel=".*?"/','rel="tag"',$thelist);
}
add_filter('the_category','the_category_filter');
?>

修改DOCTYPE宣告

在HTML5下，頭部的一些宣告都可以簡略，不需要寫一長串的東西了。請編輯佈景主題裡面的header.php檔案，將頂部，也就是 <html> 標籤之前的一些語法改寫成以下模式。以下語法來自WordPress的「twentyeleven」佈景主題。

<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->

去除head的Profile屬性

在PHOETRY的文末也提到，Profile屬性值在HTML5中已經過期了，因此，別忘了修改佈景主題中的header.php，找到此語法： <head profile=”http://gmpg.org/xfn/11″> ，將它改成 <head> ，這樣才能通過校驗。

修改meta資訊

對於SEO技巧，一般來說最喜歡在meta部分加入一大堆屬性值，但是這些屬性值，很多在HTML5中已經被刪除了，其實刪除的還蠻多的，像是distribution、copyright、revisit-after等等，這些都是過期屬性。meta部分該怎修正，您可以將網站丟到validator.nu檢測，根據它提供的資訊進而修改網站，或是參考w3school的資料修正。

以上這些可以算是將WordPress佈景改造成HTML5的一些前置步驟，如果有漏掉或是錯誤的的部分也希望各位可以提醒一下囉！