海报分享功能，简单的说就是把文章生成一张带有二维码链接的图片，方便在社交软件进行分享。一般说需要插件才能实现此功能，但是子比主题自带此功能，全自动生成，使用简单、简洁好看
![图片[1]-Zibll子比主题-海报分享功能简介以及图片跨域问题解决方法](https://oss.zibll.com/zibll.com/2020/07/poster_886-673x1024.png)
顺便说一下此功能的加载方式，在主题功能介绍中就提到过：主题的功能也才用模块动态加载的方式，就是为了让页面加载更快！
那么到底是什么意思呢？此功能才用JS-canvas 绘图的方式，所需要的全部代码文件一共12KB！但是这12KB的文件的并不会在页面加载的时候加载此文件！而是在点击分享按钮之后才会加载这12KB的文件并生成图片！
使用这样的逻辑，在页面加载的时候相当于没有开启此功能一样，同时主题大量的采用了这样的动态加载方案，目的只有一个！那就是快！再快！
V4.1版本更新：
1、更新动态加载方式：页面全部加载完毕后延迟2秒加载相关JS文件或者点击按钮立即加载，这样即保证了页面加载速度，也保证了该功能的加载速度
2、更新了图片获取的错误处理：很多朋友都遇到了海报不能正常生成的情况，大多数原因都是因为图片跨域或其他原因导致的图片不能加载的问题。本次更新之后，在加载海报图片时候，会按照以下进行加载：
文章缩略图->主题设置设置的默认海报图->主题文件夹内自带的默认海报图。
不管是什么原因导致的图片未能加载，均依次向后加载。确保此功能一定能生成！
如果此时你发现，海报生成的图片并不是你设置的文章缩略图，那么就请按照下方的教程设置好跨域规则！
功能设置
- 在Wordpress后台-主题设置-文章页功能：开启
生成海报分享功能 - 同时设置好默认的默认图像、logo和 底部文案
- 保存后在每一篇文章的分享按钮中就会增加 海报分享 按钮啦【查看截图】
另外如果网站图片使用了OSS等云存储，一定要先设置好跨域规则！教程请参考下方
解决图片跨域问题
如果您网站的图片是保存在云储存上，例如阿里OSS，腾讯OCS，七牛云等等，并且此功能一直显示加载中而不能生成图片！那么请继续往下看！
这是什么原因造成的呢？简单的说就是因为浏览器安全策略导致跨域的图片不能加载！解决的方式也十分简单，给图片添加Access-Control-Allow-Origin请求头即可！
很简单，也就几步搞定，以下我就按照阿里云OSS为例详细的教大家设置此功能！其它云储存都差不多
1.登录阿里云对象储存OSS控制台，选择你的Bucket，找到跨域设置
![图片[2]-Zibll子比主题-海报分享功能简介以及图片跨域问题解决方法](https://oss.zibll.com/zibll.com/2020/07/image-16-1024x777.png)
2.按照下面截图设置保存！
![图片[3]-Zibll子比主题-海报分享功能简介以及图片跨域问题解决方法](https://oss.zibll.com/zibll.com/2020/07/image-17-664x1024.png)
3.重点请注意！
设置好跨域规程后 ，新上传的图片才有效！
所以，大家懂了吧，此功能需要获取文章的特色图像，所以设置好跨域规则前上传的特色图像，就需要重新上传一下啦
我自己测试阿里云OSS是这样的，其它的云存储请自己测试一下！
4.最后细节
如果完成了上面的教程，还是不能生成！
![付费阅读、付费资源、付费图库、付费视频等商城功能详解[图文教程]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/支付功能-列表图.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_700,h_490)
![子比主题官方推广计划正式上线，推广可获高额奖励[限时推广]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/11/推广计划.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_429,h_300)
![Zibll子比主题-最新版V8.0已更新[2024-10-15][更新日志]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/更新日志.jpg)
![给导航菜单添加自定义徽章及多种样式菜单设置方法[图文教程]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/10/菜单设置.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_417,h_300)
![为文章添加多剧集的视频封面教程[视频剧集功能详解]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2021/06/视频剧集封面-列表图.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_700,h_490)
![接入百度API内容审核并开启免人工审核功能详细教程[V6新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2021/12/api内容审核-列表图.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_700,h_490)
- 最新
- 最热
只看作者