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

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

目前可支援HTML5的瀏覽器有Google ChromeFirefox、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有幾個地方需要注意一下,首先就是針對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屬性,或者是改變錯誤的屬性。

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

第一種方法是透過內建的語法去刪除不符合規定的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的一些前置步驟,如果有漏掉或是錯誤的的部分也希望各位可以提醒一下囉!