Zibll子比主题-海报分享功能简介以及图片跨域问题解决方法

海报分享功能,简单的说就是把文章生成一张带有二维码链接的图片,方便在社交软件进行分享。一般说需要插件才能实现此功能,但是子比主题自带此功能,全自动生成,使用简单、简洁好看

顺便说一下此功能的加载方式,在主题功能介绍中就提到过:主题的功能也才用模块动态加载的方式,就是为了让页面加载更快!
那么到底是什么意思呢?此功能才用JS-canvas 绘图的方式,所需要的全部代码文件一共12KB!但是这12KB的文件的并不会在页面加载的时候加载此文件!而是在点击分享按钮之后才会加载这12KB的文件并生成图片!
使用这样的逻辑,在页面加载的时候相当于没有开启此功能一样,同时主题大量的采用了这样的动态加载方案,目的只有一个!那就是快!再快!

功能设置

  • 在Wordpress后台-主题设置-文章页功能:开启生成海报分享功能
  • 同时设置好默认的默认图像、logo和 底部文案
  • 保存后在每一篇文章的分享按钮中就会增加 海报分享 按钮啦【查看截图】

解决图片跨域问题

如果您网站的图片是保存在云储存上,例如阿里OSS,腾讯OCS,七牛云等等,并且此功能一直显示加载中而不能生成图片!那么请继续往下看!

这是什么原因造成的呢?简单的说就是因为浏览器安全策略导致跨域的图片不能加载!解决的方式也十分简单,给图片添加Access-Control-Allow-Origin请求头即可!

很简单,也就几步搞定,以下我就按照阿里云OSS为例详细的教大家设置此功能!其它云储存都差不多

1.登录阿里云对象储存OSS控制台,选择你的Bucket,找到跨域设置

2.按照下面截图设置保存!

3.重点请注意!

设置好跨域规则前,已经上传的图片是无效的!
设置好跨域规程后 ,新上传的图片才有效!

所以,大家懂了吧,此功能需要获取文章的特色图像,所以设置好跨域规则前上传的特色图像,就需要重新上传一下啦
我自己测试阿里云OSS是这样的,其它的云存储请自己测试一下!

4.最后细节

如果完成了上面的教程,还是不能生成!
那么请检查一下是不是服务器或者宝塔等管理程序屏蔽了POST请求!

© 版权声明
THE END
文章不错?点个赞呗
点赞14赞赏
分享
评论 抢沙发

请登录后发表评论