WordPress布景改写成HTML5的前置步骤

2020-05-22 5030

最近已经将自己的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有几个地方需要注意一下,首先就是针对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下语法放到标籤之前即可。

 

不想加入在header.php,当然你可以开启functions.php,加入下面这段语法。

function add_ie_html5_shim () {echo '';}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。

修改DOCTYPE宣告

在HTML5下,头部的一些宣告都可以简略,不需要写一长串的东西了。请编辑布景主题里面的header.php档案,将顶部,也就是 标籤之前的一些语法改写成以下模式。以下语法来自WordPress的「twentyeleven」布景主题。

> 

去除head的Profile属性

在PHOETRY的文末也提到,Profile属性值在HTML5中已经过期了,因此,别忘了修改布景主题中的header.php,找到此语法: ,将它改成 ,这样才能通过校验。

修改meta资讯

对于SEO技巧,一般来说最喜欢在meta部分加入一大堆属性值,但是这些属性值,很多在HTML5中已经被删除了,其实删除的还蛮多的,像是distribution、copyright、revisit-after等等,这些都是过期属性。meta部分该怎修正,您可以将网站丢到validator.nu检测,根据它提供的资讯进而修改网站,或是参考w3school的资料修正。

以上这些可以算是将WordPress布景改造成HTML5的一些前置步骤,如果有漏掉或是错误的的部分也希望各位可以提醒一下啰!



上一篇:
下一篇:

相关推荐