向你的WordPress加个过W3C验证的Google +1 按钮

教你向WordPress添加过W3C验证的Google +1 按钮,并有我在用的代码做例子。

由于 google +1 按钮更新佐,所以重新写一份教程。

google +1 按钮的WP插件以经一堆了,不过我唔建议你用,因为同你自己的主题界面式样有关,而且,添加是好简单的事,你应该自己来。

官方教程:(原来code.google.com上有中文的,不过改版后就冇佐了)

https://developers.google.com/+/plugins/+1button/

简单的总结

核心代码净系得两行

其中第一行:

呢行一定要放系最尾,就系</body>前边,千奇唔好放</head>前边或者页面元素里边,因为呢段嘢要登陆google,又再要读好几个地址的,仲有我地景德镇大局域网的问题,大家心照就系,另外教程上边都有写放系边都得。

第二行:

系用来放系要显示+1按钮的位置

如果系文章页面(is_single())上边,g:plusone可以唔加href属性,不过页面要有rel=”canonical”

当然,我建议唔理是边种页面,都加href属性,咁是最好的。

一个PHP例子(第一个div用来定位,g:plusone自身会重置style,不能用来定位)

异步加载

新版官方增加async属性,呢个是HTML5的元素,用于异步加载js,唔使等(就是页面加载js果阵唔会停住系度,等加载完先继续生成后边D嘢)

官方的代码:

动态创建JS实现无阻塞并行加载,async是声明异步加载,要浏览器支持HTML5(IE6/7/8?没人爱的了,你仲用关我X事)

过W3C验证

g:plusone唔是标准的元素,过唔到W3C的,唔紧要官方俾佐解决方案

就是改成div同系元素前加“data-”,class=”g-plusone”是固定的,唔好改。

以之前果段PHP为例,依家改成

OK,咁就可以过W3C验证了。

我自己的代码

《向你的WordPress加个过W3C验证的Google +1 按钮》有0个评分

★★★★★
★★★★
★★★
★★
0
0
0
0
0

发表评论

电子邮件地址不会被公开。 必填项已用*标注