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

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

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

V4.1版本更新:
1、更新动态加载方式:页面全部加载完毕后延迟2秒加载相关JS文件或者点击按钮立即加载,这样即保证了页面加载速度,也保证了该功能的加载速度
2、更新了图片获取的错误处理:很多朋友都遇到了海报不能正常生成的情况,大多数原因都是因为图片跨域或其他原因导致的图片不能加载的问题。本次更新之后,在加载海报图片时候,会按照以下进行加载:
文章缩略图->主题设置设置的默认海报图->主题文件夹内自带的默认海报图。
不管是什么原因导致的图片未能加载,均依次向后加载。确保此功能一定能生成!
如果此时你发现,海报生成的图片并不是你设置的文章缩略图,那么就请按照下方的教程设置好跨域规则!

功能设置

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

解决图片跨域问题

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

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

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

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

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

3.重点请注意!

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

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

4.最后细节

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

© 版权声明
THE END
文章不错?点个赞呗
点赞20赞赏
分享
评论 共6条

请登录后发表评论

    • 南墨🍃
    • 上传在后台媒体库有什么需要注意的吗,我的有的生成很快有的则一直加载
      -1月前
    • 九三
    • 如果文章特色图是引用的图床上的图片怎么弄呢?
      51天前
      • 糖花生
        老唐作者0
        你可以不设置特色图像,然后主题会自动获取文中第一张图片为缩略图。
        30天前@九三
    • 林浩楠
    • 第三点才是重点啊,难怪之前无论如何设置都不管用,明明就没设置错,差点成了不解之谜。。。。如今有答案了,现在尝试了一下,可以了。谢谢老唐
      1月前