用Extra模板重装修网站、搞定Polylang与Extra不兼容问题、在AMP页面上安装ADSENSE代码

2018-09-22 约 2275 字 预计阅读 5 分钟

前天到elegantthemes的网站上逛了逛,发现他们除了DIVI以外,还有一个Extra模板。号称是针对博客网站开发的。

排版方式类似于西方的杂志排版。且菜单比之DIVI更为摩登现代。

好,既然我的会员资格涵盖了这个模板,我就用这个重新“装修”一下网站。

Wordpress的装修很方便,用不同的模板设置完后,只要不清空数据库,随时又可以回到原来DIVI那个界面。

好了,简单介绍一下Extra模板。

他同样内嵌了Divi Builder这个可视化工具。增加了很多针对帖子的排版优化。内置了给帖子评分的功能,支持多作者。完全可以按此模板做一个类似Medium或者简书的网站。

好,看看我的首页如何设计的:



最上方插入了一个Featured Posts Slider,这个只要每个帖子附带一张高质量的图片,这个图片slider的效果还是不错的。

下方放了三个Posts,可以设置最近发布、最热门帖子、评分最高等排序。

再下方放了个Posts Carousel,这个是类似电影胶片效果的帖子预览。

最后放了Tabbed Posts,可以将分类目录的帖子集中在此。

这几个模块统统都是DIVI没有提供的,看到不少DIVI的客户在吐槽,为何ET公司要做两个独立的模板,而不将功能整合在一起。

估计是两个团队做出来的产品,其实EXTRA应该是后开发,用EXTRA模板就可以用到DIVI的绝大部分功能,而且还有自己的特色。

安装新模板的小经验:

因为一个新模板装修网站不是短时间就能设置正确,所以需要用All-in-One WP Migration插件 先将正运行网站数据全部导出,然后在本地或者用一个空置域名重新设个调试用的wordpress站点,在调试站点导入正运行网站数据。

然后在调试站配置装修完全后,再用导出-导入的功能,可以使正运行网站瞬间更换装修风格。 警告:数据导入导出有一定的风险,先要做好服务器端的备份。互联网时代数据就是货币,要像爱惜黄金白银一般爱惜  :-)

另外要设置EXTRA的比DIVI更夺眼球的菜单功能了。

设置十分简单。生成菜单后,添加一个目录到菜单项,然后选择MEGA MENU的选项,就可以有酷酷的菜单了。



大体设置都比较简单,没有特别复杂的。

Polylang与Extra不兼容问题


到了双语切换时有点问题了。Polylang的英文首页/en/ 出现了大量的中文区的帖子。

到了ET的论坛检索有没有同类问题,结果发现有不少人问跟Polylang的兼容问题,ET公司的回答是暂不支持,要等待更新。

这咋等待。。。

好吧,英文首页链接不就是/en/ 吗?我再建一个en的目录layout试试看。

页面建好了,可是访问/en/还是用的中文缺省首页,看来Polylang的优先级要高一些。

只好将en的目录名称改为english,访问/english/页面完全没有问题。但是Polylang的监测浏览器语言会自动将首页指向/en/ 链接。

那我们重定向/en/ 到/english/好了。打开Extra的theme option



在integration里在head增加下面几句
<script>
var str = window.location.href;
var pos = str.indexOf("/en/");

if (pos > 0)
{
window.location.assign("https://jesselau.com/english/");
}
</script>

我用这个代码是因为我的网站除了英文首页外,没有链接还有"/en/"字样了。你们需要根据自己的情况修改。

Polylang的自动中英切换菜单不知道我们有这种问题啊,所以还是指向的/en/链接。

这样的话,每次点菜单还需要重定向太浪费网速。

我们再在body处加上下列代码


<script>

var str = document.getElementById("menu-item-1432-en").innerHTML;
var res = str.replace("/en/", "/english/");
document.getElementById("menu-item-1432-en").innerHTML = res;

</script>

脚本功能就是将英文菜单的链接/en/改为/english/.

其中那个menu-item-1432-en是本人网站上的那个英文菜单,你们需要自己看源代码,搜索到自己的英文菜单链接,找到那个ID。

这样EXTRA和POLYLANG不兼容的问题就靠这两个简单代码暂时解决了。

AMP页面安装ADSENSE代码


取消掉redirect重新提交Adsense后,收到了申请通过信。



为了显示adsense广告,因为网站可能会有一些欧洲的流量,故此必须要再装23号插件,前21个插件22号插件传送门

23、EU Cookie Law

这个插件的功能就是为了应对欧盟的法律的,欧盟法律规定需要页面位置公示用户网站的cookie政策,故此需要一个小提醒在页面底端,链接上本站的隐私政策。



登入Adsense界面,有提示贴入代码的指引。正常页面都没什么问题。但是AMP页面是通过AMP插件生成的,没地方贴代码。

Adsense要求AMP的Auto ADS代码如下:



 

这样我们又需要修改源文件了。

先要运行下列命令,让我们可以有权限在浏览器wordpress操作界面上修改插件的源码。
cd /var/www

sudo chown www-data:www-data -R *

sudo find . -type d -exec chmod 755 {} \;

sudo find . -type f -exec chmod 644 {} \;

然后打开Plugin Editor,找到amp/templates/html-start.php文件



在</head>之上贴上
<script async custom-element="amp-auto-ads"
src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>

再找到amp/templates/html-end.php文件



在</body>之上贴上:
<amp-auto-ads type="adsense"
data-ad-client="ca-pub-123456789">
</amp-auto-ads>

红色部分需要改成你自己的id,不然你的广告收入就给了不知名的某个id为123456789的客户啦 :)

好了,过一段时间检查一下,AMP页面也有广告显示了。

有些朋友可能未经思考就对广告有所排斥。不过君子爱财取之有道。广告作为一个正常的市场经济行为,对人类的交流沟通、推动历史都有积极的正面作用。

Google Adsense是目前通过网站赚钱谋取自动化收入的最简单方法之一。以后我再慢慢介绍其他自动化收入方式。

而AMP是目前移动设备网页的趋势,故此如果有志从Adsense开始进入自动化收入生活,不妨多研究研究AMP。

 

 

author

本文由Jesse Lau原创

2012年定居新西兰至今,自由职业者,从事网站和程式交易,曾获得Dukascopy外汇程序交易比赛2届月度冠军(id:Tradingwithea).
本文采用知识共享署名 4.0 国际许可协议进行许可。


留点评论吧:

本网站使用cookie技术以提高用户体验度。 了解我们的隐私政策 我已了解