子比主题
简约优雅的设计风格、模块化组件、商城支付系统
全面的前端功能、深度SEO优化、专注阅读体验
299399
  • 最新版本:V3.3
  • 更新时间:2020-07-15
  • 兼容WP:4.8及以上,推荐使用最新版
  • 兼用PHP:5.6及以上,推荐7.0及以上

Zibll子比主题专为阅读类网站开发,设计简约优雅、功能全面。UI界面模块化、多种布局、多种显示效果可选择,高度自由化,更容易搭配出自己喜欢的网站。支持付费阅读,付费下载功能和用户VIP会员系统,为站长提供有力的生产力。整体的开发理念都是围绕着阅读体验!减少花里胡哨的沉郁功能,把核心都集中在内容上。页面的布局、间距、功能都精心设计,只为让页面浏览更加自然,让用户更加易于阅读,让作者更加易于写作。

主题特色

简约优雅的设计
现代化简约设计,更幼稚的阅读体验
前端用户功能
更全面的用户中心,VIP会员系统
模块化组件
可视化模块编辑,页面高度自由化
深度SEO优化
无需任何插件,更高的搜索引擎友好度
自定义主题
自带深色主题,头部、底部主题独立设置
强大的编辑器
超多的古腾堡编辑器块,超爽的写作体验
快!再快一点
代码逻辑深度优化、动态加载,让加载更快
超多实用功能
主题功能超200项,更符合国人使用

部分特色功能

  • 自定义网站图标、logo
  • 自带夜间模式主题
  • 三种网站布局,各页面布局独立设置
  • 全站seo优化,各页面独立seo设置
  • 百度资源实时推送,自动提交
  • 自定义全局主题色
  • 多种导航布局,电脑端手机端独立设置
  • 导航、页脚主题独立自定义
  • 全局加载动画
  • 前端登录、注册,自带社会化登录
  • 前端用户中心,修改资料、头像
  • 前端发布文章、独立打赏功能
  • 文章自动生成目录树
  • 文章图片灯箱、 文章高度限制
  • 文章点赞、收藏、文章封面设置
  • 多种文章格式:图片、画廊、视频、标准
  • 文章封面支持幻灯片显示
  • 文章列表多种显示模式:卡片、多图、幻灯片
  • 首页文章多栏目显示
  • 文章专题功能、首页专题列表显示
  • 首页幻灯片功能、支持参数自定义、支持显示在顶部导航内
  • 搜索热门关键词功能
  • 付费下载、付费阅读
  • VIP会员系统功能
  • 图像异步加载
  • 全站JS代码动态加载
  • 文章AJAX动态加载
  • 系统弹窗通知
  • 分类、标签、专题独立封面设置
  • 分类、标签、专题 独立AJAX列表
  • 自动获取缩略图、缩略图尺寸设置
  • 精彩一言功能,支持替换签名
  • 文章生成分享海报功能
  • 评论AJAX提交、AJAX反野
  • 评论支持插入表情、高亮代码、图片及自定义文案
  • 支持百度熊掌号功能
  • 多个自定义代码位置
  • 外链重定向转内链功能
  • 分类url去除category该功能
  • 大量Wordpress优化功能
  • 自在邮件SMTP功能
  • 全局代码高亮功能,10+高亮主题可选
  • JS框架文件CDN加速
  • 前端快速设置链接功能

模块及古腾堡块

主题页面构建采用模块化组件,可选择实时预览配置。可将模块插入到页面的不同位置,包括顶部全宽度、顶部内容区、侧边栏、底部内容区、底部全宽度、页脚内部、移动弹出菜单内等等,不同页面也可单独配置。
古腾堡块可在编辑文章、编辑页面的时候插入相关功能,支持实时预览、以及古腾堡的全部特性。方便作者写文章时实现更多的功能及样式

以下展示部分以支持的模块及古腾堡块,更多模块还在持续添加中…

可视化模块

  • 核心文章列表模块,多种自定义搭配
  • 文章模块Mini,尺寸较小的文章列表
  • 文章目录树模块
  • 单行滚动文章列表模块
  • 多栏目文章列表
  • 多栏目文章列表mini
  • 幻灯片模块
  • 搜索框模块
  • 文章作者信息模块
  • 最近评论列表模块
  • 友情链接模块
  • 链接列表模块
  • 滚动通知栏模块

古腾堡块

  • 标题块(与主题标题样式同步)
  • 亮点块
  • 文章块
  • 引言块
  • 模态框、弹出框块
  • 折叠内容块
  • 高亮代码块
  • 隐藏内容快(评论查看、付费查看)
  • 提醒框块
  • 按钮块
  • 幻灯片块
  • 独立文字颜色工具
  • 独立文字背景色工具

购买说明

  • 兼容浏览器: IE9及以上, Chrome, Firefox, Opera, Safari, 360, Edge等主流浏览器
  • 主题更新:永久免费更新
  • 售后服务:加官方售后群,一对一技术指导
  • 购买流程:在本页面下单支付-个人中心创建授权

主题授权

主题推广阶段,现在购买可享受3个域名授权

如果您需要授权的是顶级域名,则赠送WWW.的二级域名,如果你授权的是二级域名则不赠送

举例:
你需要授权:zibll.com 那么 www.zibll.com 也可以用
你需要授权:blog.zibll.com 那么 www.zibll.com 和 zibll.com 都不可以
三个域名授权同理

授权的域名今后可以免费更换,但是要确认本人使用非转让!

Zibll子比主题专为阅读类网站开发,设计简约优雅、功能全面。UI界面模块化、多种布局、多种显示效果可选择,高度自由化,更容易搭配出自己喜欢的网站。整体的开发理念都是围绕着阅读体验!减少花里胡哨的沉郁功能,把核心都集中在内容上。页面的布局、间距、功能都精心设计,只为让页面浏览更加自然,让用户更加易于阅读,让作者更加易于写作。

主题特色

简约优雅的设计
现代化简约设计,更幼稚的阅读体验
前端用户功能
更全面的用户中心,提高网站互动性
模块化组件
可视化模块编辑,页面高度自由化
深度SEO优化
无需任何插件,更高的搜索引擎友好度
自定义主题
自带深色主题,头部、底部主题独立设置
强大的编辑器
超多的古腾堡编辑器块,超爽的写作体验
快!再快一点
代码逻辑深度优化、动态加载,让加载更快
超多实用功能
主题功能超200项,更符合国人使用

部分特色功能

  • 自定义网站图标、logo
  • 自带夜间模式主题
  • 三种网站布局,各页面布局独立设置
  • 全站seo优化,各页面独立seo设置
  • 百度资源实时推送,自动提交
  • 自定义全局主题色
  • 多种导航布局,电脑端手机端独立设置
  • 导航、页脚主题独立自定义
  • 全局加载动画
  • 前端登录、注册,自带社会化登录
  • 前端用户中心,修改资料、头像
  • 前端发布文章、独立打赏功能
  • 文章自动生成目录树
  • 文章图片灯箱、 文章高度限制
  • 文章点赞、收藏、文章封面设置
  • 多种文章格式:图片、画廊、视频、标准
  • 文章封面支持幻灯片显示
  • 文章列表多种显示模式:卡片、多图、幻灯片
  • 首页文章多栏目显示
  • 文章专题功能、首页专题列表显示
  • 首页幻灯片功能、支持参数自定义、支持显示在顶部导航内
  • 搜索热门关键词功能
  • 图像异步加载
  • 全站JS代码动态加载
  • 文章AJAX动态加载
  • 系统弹窗通知
  • 分类、标签、专题独立封面设置
  • 分类、标签、专题 独立AJAX列表
  • 自动获取缩略图、缩略图尺寸设置
  • 精彩一言功能,支持替换签名
  • 文章生成分享海报功能
  • 评论AJAX提交、AJAX反野
  • 评论支持插入表情、高亮代码、图片及自定义文案
  • 支持百度熊掌号功能
  • 多个自定义代码位置
  • 外链重定向转内链功能
  • 分类url去除category该功能
  • 大量Wordpress优化功能
  • 自在邮件SMTP功能
  • 全局代码高亮功能,10+高亮主题可选
  • JS框架文件CDN加速
  • 前端快速设置链接功能

模块及古腾堡块

主题页面构建采用模块化组件,可选择实时预览配置。可将模块插入到页面的不同位置,包括顶部全宽度、顶部内容区、侧边栏、底部内容区、底部全宽度、页脚内部、移动弹出菜单内等等,不同页面也可单独配置。
古腾堡块可在编辑文章、编辑页面的时候插入相关功能,支持实时预览、以及古腾堡的全部特性。方便作者写文章时实现更多的功能及样式

以下展示部分以支持的模块及古腾堡块,更多模块还在持续添加中…

可视化模块

  • 核心文章列表模块,多种自定义搭配
  • 文章模块Mini,尺寸较小的文章列表
  • 文章目录树模块
  • 单行滚动文章列表模块
  • 多栏目文章列表
  • 多栏目文章列表mini
  • 幻灯片模块
  • 搜索框模块
  • 文章作者信息模块
  • 最近评论列表模块
  • 友情链接模块
  • 链接列表模块
  • 滚动通知栏模块

古腾堡块

  • 标题块(与主题标题样式同步)
  • 亮点块
  • 引言块
  • 模态框、弹出框块
  • 折叠内容块
  • 高亮代码块
  • 隐藏内容快
  • 提醒框块
  • 按钮块
  • 幻灯片块
  • 独立文字颜色工具
  • 独立文字背景色工具

主题特色简介

主题拥有全面的前端用户功能,包含前端登录、注册、找回密码、社交账号登录,用户在前端可直接发布文章,也可以直接修改资料、头像等等。用户点赞、关注、打赏等功能也可以极大的提高网站的互动性。当然,如果你只想安静的做一个个人博客,没错这些功能都是模块化可关闭的。哦,对了,前端发布文章对用户可是非常友好的,超简单的编辑器、草稿保存、自定义分类、标签都没问题,即使你做个安静的个人博客,也可以单独开启写文章投稿功能哦!

模块化是子比主题的核心之一,说到模块化想必首先想到的就是界面自定义。没错,整个主题除开核心的内容之外,几乎所有地方都可以单独插入模块,UI样式就完全掌握在自己手中了。

但是!除了UI的模块化,功能也是模块化的。这个是什么意思呢?又有什么用? 一款主题会有很多人使用,而不同的网站对功能的需求也是不一样的。主题把功能所需要的代码及文件都单独封装,采用动态加载,按需加载所需要的文件以及页面交互。这样就大大的提高了前端页面的加载速度!注意!动态加载并不是开启了什么功能加载什么代码,而是目前所浏览的页面有哪些功能,那么才会加载相对应的代码与页面交互。

举个例子:比如你开启了”文章海报分享功能”,这个功能代码量其实是比较大的,大约200KB,但是在浏览文章的时候并不会加载这200BK的内容,也不会在页面加载的时候产生交互,而是在当用户点击”文章海报分享”的按钮之后才会加载对应代码,并生成海报,那么这个功能就不会对页面加载产生任何的延迟,就和没开这功能一样!

说到页面交互,就的说说快!主题除开核心的文件,其他均文件采用动态按需加载。同时针对图片全站所有的图片均可开启”图片延迟加载功能”,看哪里加载那里。另外针对WordPress特性,主题也优化了大量的WordPress功能。同时页面大量采用AJAX动态加载内容,提高浏览体验,也提高了加载速度!

主题购买

  • 主题售价:399元
  • 兼容浏览器: IE9及以上, Chrome, Firefox, Opera, Safari, 360, Edge等主流浏览器
  • 主题更新:永久免费更新
  • 售后服务:加官方售后群,一对一技术指导

购买说明

主题授权

主题推广阶段,现在购买可享受3个域名授权

如果您需要授权的是顶级域名,则赠送WWW.的二级域名,如果你授权的是二级域名则不赠送

举例:
你需要授权:zibll.com 那么 www.zibll.com 也可以用
你需要授权:blog.zibll.com 那么 www.zibll.com 和 zibll.com 都不可以用
三个域名授权同理

授权的域名今后可以免费更换,但是要确认本人使用非转让!


更新日志

V3.3

2020-07-15

新功能

  • 新增 文档模式的付费功能支持
  • 新增 链接列表 页面模板(例如友情链接) :支持链接提交、页面配置等功能 【查看截图】
  • 新增 后台链接管理功能【查看截图】
  • 新增 新版链接列表小工具模块:采用后台链接管理系统
  • 新增 前台登录兼用模式-主题设置-扩展功能(解决网站开启全站静态缓存后,前台可能不能弹出登录框的问题)
  • 新增 全新的前端页面、文章配置功能,可在前端快速修改页面、文章的参数 【查看教程】
  • 新增 所有页面、文章独立设置布局的功能-前台设置
  • 新增 4种页面头部标题样式设置功能-前台设置
  • 新增 页面、文章-多种前台设置功能
  • 新增 面包屑导航用“首页”替代网站名称

优化内容

  • 修复 移动端购买vip不能切换支付方式的bug
  • 修复 用户中心会向其他人显示未审核评论的bug
  • 修复 仅开启一级会员下,会员可见功能失效的bug
  • 优化 文章归档页面模板显示效果
  • 优化其它显示细节

V3.0

2020-06-20

新功能

  • 全新的VIP会员系统功能:
    • VIP分级设置功能
    • 自定义分级的名称:如钻石VIP、黄金VIP
    • 自定义购买会员的商品选项
    • 用户昵称vip徽章显示
    • 站内资源对vip会员单独定价功能
    • 管理员可后台修改用户的vip信息
    • [点此查看详细使用教程]
  • 支付系统 新增码支付收款接口
  • 更新百度资源提交,新增快速提交功能
  • 付费功能新增:免费资源 登录可见 选项
  • 新增全站一键关闭评论功能(主题设置-扩展功能 )
  • 新增全新的”隐藏内容-古腾堡块”:支持评论可见、登录可见、付费可见、会员可见【查看截图】
  • 新增评论作者标签

优化内容

  • 优化后台发布文章也会发邮件的bug
  • 优化付款支付逻辑
  • 优化海报分享功能,支持图片跨域(使用了图片oss等云储存请设置跨域规则)
  • 修复海报分享的副标题标题显示错误的bug
  • 优化用户个人资料默认不公开
  • 优化用户中心链接及资料隐藏用户名
  • 修复文章可能会错位的bug
  • 修复文章图片可能会遮住文字的bug
  • 修复前台发布文章时上传图片出错的bug
  • 修复前台发布文章保存可能出错的bug
  • 修复评论用户信息会与表情框重贴的bug
  • 修复非管理员进入后台会出现错误的bug
  • 修复支付宝付款后可能会重复发送邮件的bug
  • 修复文章列表显示错误以及间距不一致的bug
  • 修复某些情况下个人中心404的bug
  • 修复某些情况下切换付款方式会黑屏的bug
  • 修复和优化其它细节等

更新提醒

V2.2

2020-04-22

新功能

  • 新增支付宝企业支付接口以及企业H5支付
  • 新增商品购买后给用户发送邮件
  • 新增评论审核后用户发送邮件
  • 新增投稿审核后用户发送邮件
  • 新增邮箱验证码注册功能
  • 新增修改用户前端修改邮箱功能
  • 新增自定义邮件发件人昵称功能、自定义追加邮件代码功能
  • 新增文章列表标题文字显示为粗体的选项
  • 首页幻灯片增加5种切换动画选择
  • 完全重写海报分享功能,减少80%代码量,极大的提高了速度

优化内容

  • 更新授权逻辑,提高安全性,解决可能会掉授权的bug
  • 修复页脚微信二维码跳动的bug
  • 修复用户页面存在的蜘蛛爬取空白链接的漏洞
  • 修复部分页面可能会出现的OSS漏洞以及SQL注入漏洞
  • 修复分类页面文章数量显示错误的bug
  • 优化社会化登录后返回原链接
  • 修复评论内容不换行的bug
  • 修复因网速过慢可能会造成幻灯片错位的bug
  • 调整社会化登录按钮的顺序

更新提醒

V2.1.2

2020-04-08

新增功能

  • 全新功能:支付系统、付费阅读、付费下载功能 【查看详情】
  • 多种支付接入:微信官方、支付宝当面付、虎皮椒
  • 搜索功能新增:热门关键词选项、最大关键词数量设置、搜索框默认占位符设置
  • 全局顶部搜索框新增:自定义开关关键词显示、自定义开关分类搜索、自定义分类搜索的分类
  • 新增撤销授权功能
  • 优化主题检测更新逻辑,增加跳过此次更新功能
  • 新增图片灯箱增加点击空白处关闭功能,同时支持下滑关闭
  • 新增文章内插入文章的古腾堡块

优化内容

  • 优化社交登录获取的头像非https会导致的网站不安全问题
  • 优化授权验证逻辑,修复极少情况可能出现的效验失败的bug
  • 优化了用户中心的显示效果
  • 更新百度资源主动推送接口,优化推送逻辑
  • 优化移动端选择输入框的样式
  • 优化部分js文件逻辑,解决加载过慢的现象
  • 修复搜索页文章mini模块编号显示错误的bug
  • 修复安装主题可能会出现functions.php的错误
  • 修复文章海报和摘要会显示隐藏内容的bug
  • 修复移动端内容超出宽度导致左右滚动的bug
  • 修复分享到qq不显示标题的bug
  • 修复幻灯片不显示标题简介的bug
  • 修复小工具会显示未审核评论的BUG
  • 修复面包屑导航不能关闭的bug
  • 优化了大量的显示细节

更新提醒

  • 本次更新了部分小工具代码,更新主题可能会造成小工具配置丢失的情况,请重新配置一下
  • 本次更新调整了授权验证逻辑,可能会出现丢失授权的情况,在后台重新授权一下即可
  • 更新主题后,请务必清空浏览器缓存

V2.0

3月20日

新增功能

  • 增加专题SEO深度优化功能,可以单独给专题设定SEO
  • 增加百度资源自动推送功能,无需开启熊掌号,所有连接自动提交,再次的增加了百度的收录速度
  • 增加侧栏随动功能,添加侧边栏模块时直接可以设置
  • 增加授权和在线更新
  • 增加GitHub登录功能
  • 增加封面图异步加载开关
  • 添加隐藏内容css样式
  • 增加外链重定向功能将目标链接加密功能
  • 增加社交帐号绑定和解绑功能
  • 增加自定义时间格式功能
  • 增加logo 区分日间、夜间主题,且实时切换
  • 增加禁止重复昵称开关功能,修改昵称不允许修改为已存在的昵称
  • 所有的文章模块增加时间限制功能,如:最近7天
  • 增加是否开启AJAX加载选项
  • 增加社社交帐号按钮样式选择

优化内容

  • 修复移动端菜单显示错位的BUG
  • 修复缩略图在有些浏览器不显示的bug
  • 修复图片灯箱下拉关闭失效的bug
  • 修复社会化登录跳转404问题
  • 修复文章页极少情况下文章页可能不能打开的bug
  • 修复前端发布文章-添加媒体的弹出框文字错位的bug
  • 修复markdown 内联代码解析为块级元素的bug
  • 修复后台设置有两个幻灯片图像异步加载功能
  • 修复AJAX获取文章之后,幻灯片缩略图不显示的bug
  • 修复 昵称是否有保留字符 功能失效的bug
  • 修复前端登录如果密码错误则不能再点击按钮的bug
  • 修复评论模块时间显示不正确的bug
  • 修复修改昵称后可能跳转404的bug
  • 修复评论填入呢称时社交登录标题错位的bug
  • 优化文章内链接高亮颜色显示
  • 优化文章内标题的显示样式
  • 优化文章内表格的显示样式
  • 优化大量位置的显示细节

关于侧栏随动功能
侧栏随动功能,因为我想实现多模块随动。但是由于底部自定义空间太大,导致没有很好的逻辑来处理触底检测,所以目前这个功能如果你开启了太多的随动模块,可能会出现触底抖动的现象!此问题我会继续优化,建议开启的模块不要超过3个!

期待已久的文章付费功能已经来了。作为一款资讯阅读类的优质主题,付费阅读、付费下载、付费VIP等功能是必不可少的,子比主题本次更新则带来了付费相关的新功能。现在无需任何插件,开心的建站收钱吧

简略介绍

  • 支持付费阅读功能
  • 支持付费下载功能
  • 支持免登陆购买
  • 移动端支持支付宝APP跳转购买
  • 支持微信内购买
  • 完全自定义购买卡片的文案
  • 后台统计数据、订单明细显示
  • 用户中心统计数据、订单明细显示

目前已接入的收款方式

  • 虎皮椒(无需营业执照,申请方便)
  • 码支付
  • 支付宝官方、支付宝当面付
  • 微信官方(微信企业支付)

关于接入的支付方式,大家都各种各样的需求。由于时间关系目前接入较少
主要原因还是因为测试条件有限,可能是因为之前做生意的原因,我居然连支付宝当面付都没申请通过….
微信就更不说了。
接入其实是很简单的,如果你有需要接入的SDK且有对应的授权权限,欢迎骚扰!
另外,关于功能。子比主题是一款资讯类主题,那么它的的支付功能也会围绕着资讯相关的方向来做。为什么我会单独说一下,也就是说,花里胡哨的功能是不会做的了,也不会把子比主题做成资源类型的主题。当然如果你还有好点子,那赶紧联系我

功能设置截图

使用教程

支付设置

进入后台-主题设置-商城设置

在这里设置一些基本功能,以及设置接入方式,并填写相关的ID和秘钥

请注意收款接口设置,在这里分别选择微信和支付宝的收款方式,也可以关闭对应的收款方式
比如你只想用支付宝,那么把微信的接口关闭就行了

虎皮椒接入

虎皮椒是讯虎旗下的支付接口,主要特色就是无需营业执照,无需企业,申请十分简单!
支持扫码支付、JSAPI支付、小程序支付,同时无需挂机,无需提现,收款T+1直接到银行卡
缺点呢就很纯粹了,要收费!借用虎皮椒官方的话: 这世上最贵的就是免费,请珍惜你宝贵的时间。。

接入方式:在虎皮椒官网签约之后-将对应的APPID和秘钥填入对应的设置-保存
设置收款接口为虎皮椒

码支付接入

码支付也是无需营业执照就,个人就能申请的支付方式,接入方便

接入方式:在码支付官网设置完成之后-将对应的码支付ID、通讯秘钥和 Token 填入对应的设置-保存
设置收款接口为码支付

资源设置

你可以在后台编辑文章的最下方找到付费功能设置

付费阅读

  1. 勾选付费模式为付费阅读
  2. 设置付费价格以及其它信息(非必填项可以不用填)
  3. 在文章中插入 付费隐藏内容

使用古腾堡编辑器插入付费阅读内容

推荐使用古腾堡编辑器插入,选择 隐藏内容(新版) 模块,并将隐藏模式设置为:付费阅读

使用经典编辑器插入 付费隐藏内容

您可使用短代码的方式插入 付费隐藏内容

付费下载

  1. 勾选付费模式为付费资源
  2. 设置付费价格以及其它信息(非必填项可以不用填)
  3. 填写下载链接

下载链接填写的格式和要求:

  1. 一行一个按钮,需要几个按钮就填写几行
  2. 每一行的格式(用竖线 | 分开): 链接 | 按钮显示的文字 | 更多内容 | 颜色代码
  3. 每一行的链接是必填项,其它的可以不用填
  4. 在只填写了链接的情况下,会自动匹配常用的网盘并设置按钮的图标、颜色
  5. 网盘链接则跳转下载,本地链接则直接下载(本地下载地址是加密隐藏的)
  6. 本地链接支持填写相对地址
  7. 颜色代码请填写 1-5 的数字,分别为:绿

格式模板:

#一行一个按钮,每一行格式:链接 | 按钮显示的文字 | 更多内容 | 颜色代码
http://xxxx.com/wp-content/uploads/zibpaydown/a2d6e86fdf47.jpg|本地连接|这里是简介|5
http://onedrive.com/a2d6e86fdf47.jpg|onedrive|支持多多地址插入
http://pan.baidu.com/download/sdfasd|百度网盘|提取密码:XXXX
http://www.lanzou.com/sdfgsdf
http://docs.qq.com/doc/DQUlVeWtDdUdad3B2
/wp-content/uploads/2020/03/文件.zip

其它设置

标题:可选项,单独设置付费内容的标题,支持HTML代码,默认显示当前文章为标题

简介:可选项,单独设置付费内容的简介,支持HTML代码,默认显示付费类型的介绍

更多详情:可选项,显示在付费卡片下方的内容,可插入版权信息、下载提示等内容,支持HTML代码

额外隐藏内容:可选项,购买后显示在付费卡片下方的内容,可插入解压密码等隐藏内容,支持HTML代码

建议:以上可选项均可使用HTML代码,如果您你懂HTML代码,可以直接填文字就行,留空效果也佳

订单统计

教程就到此结束了,是不是十分简单啊!另外细心的你可能已经发现了,后台还有有详细的订单统计功能。方便快速查看订单情况已经收款情况哦

截图展示:

在线体验

这个功能很简单,使用频率很高,在文章中插入其他文章的卡片。通常我们只能以链接的方式插入其他文章的链接,但是这样的显示效果太太太普通了!使用子比主题,搭配古腾堡编辑器,仅需一步即可插入漂亮的文章卡片!

使用方法:

简单一步:选择古腾堡zibll-文章块,输入文章的ID,搞定!

那么,问题来了,可能有些小伙伴不知道ID是什么。。。。 很简单,在编辑文章的时候,查看链接你就明白了!

最后,来看一下效果吧

扩展使用:

可能还一部分小伙伴没有使用古腾堡编辑器,所以此功能也支持使用短代码的方式使用,但是不推荐哦

使用方法如图:

之前我们已经简单的介绍了古腾堡模块了,在子比主题V3.1版本更新后,带来了全新的隐藏内容模块。取代了之前的 隐藏内容-评论可见块和付费阅读块,同时还增加了登录可见以及仅会员可见的隐藏模式!

顾名思义,隐藏内容块就是把内容隐藏,满足一定条件后才可以查看。

支持的功能

  • 付费阅读可见
  • 登录可见
  • 评论回复可见
  • 一级会员可见
  • 二级会员可见

使用教程

使用十分简单,一共三步

  1. 选择 隐藏内容(新版)块
  2. 插入需要隐藏的内容,支持插入任意内容和其他模块
  3. 设置隐藏可见模式

如图所示:

注意事项:

  • 选择付费阅读,则必须和文章的付费阅读功能配合使用
  • 选择会员可见,则必须和网站的会员功能配合使用

了解会员功能和付费阅读功能可以查看以下文章

扩展使用

此功能其实还支持短代码的,但是不推荐使用。

如果需要请按照以下格式使用段代码:

在V2.0版本更新后,加入优雅的支付体验,带来了全新的付费下载和付费阅读功能,极大的方便了站长做付费内容。

在V3.0版本更新后,子比主题带来了全新的VIP会员系统,支持多级会员、会员属性设置、会员单独定价等功能。通过付费资源和会员系统搭配,就大大的增加了网站的互动性,也让子比主题正式的走进资源主题的行列!

目前会员系统的功能及特色:

  • 支持两级会员分级,可独立选择是否开启
  • 每一级会员均支持自定义会员名称(例如黄金会员、钻石会员等)
  • 支持自定义会员简介、权益设置
  • 每一级会员均支持最多4个会员商品
  • 每一个会员商品均可独立设置价格、有效期、促销活动等
  • 站内的所有资源均可针对不同的级别的会员单独定价
  • 前台开通会员的流程一气呵成、优雅自然
  • 已开通会员的用户均有徽章显示
  • 网站管理员可在后台管理任意用户的会员信息

会员系统主要的三个开发逻辑:

  1. 会员属性 (自定义设置会员的名称、简介等)
  2. 会员商品 (自义定用户可以购买的会员商品)
  3. 会员特权 (自义定不同会员享受的不同资源价格)

通过这三个逻辑,整个会员系统就十分的清晰简单了,同时又拥有了高度的自由化,更加容易实现各种不同类网站的需求,那么接下来我们围绕这三点开始详细教程!

会员属性设置

准备工作:使用会员功能,请务必保证支付收款系统正常使用,不然怎么购买会员呢?设置教程请查看以下文章:

进入主题设置-商城设置

在此处请设置好开通会员的简介和开通会员的详细说明( 可以为提醒事项、用户协议等,支持HTML代码 )

接下来再根据需要 选择开启一级会员和二级会员,当然请注意以下几点:

  • 一级会员和二级会员都关闭,则相当于关闭了会员功能
  • 如果只需要一个会员分级,请开启一级会员关闭二级会员
  • 也就说不能开启二级会员而关闭一级会员
  • 会员分级开关最好一开始设置好后就尽量不要修改,以免后期用户会员信息错误

会员商品设置

会员商品设置也就是用户可以购买的会员商品,你可以理解为淘宝购物的商品选项,而这一部分的功能设置是可以搭配多种组合的

  • 每一级会员可以设置最少1个最多4个商品选项(可任意开关)
  • 每个商品选项都可以单独设置价格和会员有效期
  • 执行价不允许为0!
  • 有效期选0则为永久有效

通过修改会员商品选项的有效期和会员名称,可以有多种组合搭配,举几个例子大家参考一下:

  • xxa网站只有一种会员:贝壳VIP,购买会员时候,不同价格享受的会员有效期不同
  • xxb网站有两种会员:黄金会员和铂金会员,购买的时候不同价格购买的会员不同,但是都是永久有效
  • xxc网站有两种会员:包月会员和包年会员,购买的时候不同价格购买不同有效期的会员

会员权益设置

针对不同级别的会员,文章的付费内容是可以单独定价的,当然也可以设置为0元,则为XX会员免费

付费内容特权

设置的方法非常简单,编辑文章时在下方的付费功能中设置对应会员的价格即可!设置为0则为该会员免费!

隐藏内容特权

除了付费内容之外呢,主题本次更新新增了全新的古腾堡块-隐藏内容快,你可以在文章中插入部分隐藏内容,同时你可以设置隐藏可见的模式:

  • 登录可见
  • 评论可见
  • 付费阅读可见(此模式则依靠付费功能设置)
  • 一级会员可见
  • 二级会员可见

其它功能

到这里教程部分就结束了,会员系统在前端用户中心会显示用户的会员信息和订单信息,在此就不一一介绍了,下面展示部分截图

此次更新的会员系统还有很多的不足以及功能的缺失,在接下来的更新中我也会不断的优化和增加新功能,同时欢迎大家提出您的好点子!

子比主题才用模块化的开发理念,让页面更加的自由化。页面布局可使用小工具模块,那么文章内则使用古腾堡块。

古腾堡编辑器是Wordpress5.0版本开始引入使用的一个全新编辑器,这个编辑器岂止于强大,当然呢也有很多习惯了经典编辑的朋友再使用古腾堡编辑器觉得很不顺手,没错我刚开始使用古腾堡编辑器时候也是这样的。但是这个编辑用了你就会后悔,后悔没有早点用!

这片文章就带大家熟悉古腾堡编辑器,以及主题的编辑器扩展

熟悉古腾堡编辑器

使用Wordpress 5.0及以上版本,新建文章、页面的编辑器就是古腾堡编辑器了,

左上角可以添加块功能-右侧则是选中块的设置项

古腾堡自带模块已经很丰富了,能实现大部分的文章编写功能,建议每一个都试一下,这样慢慢就熟悉了

子比主题模块

在添加模块的时候,划到最下方就能看到子比主题的块了,每一个模块都有相应的介绍。选中某个模块之后,屏幕右侧则会出现该模块的设置选项

一样的推荐您每一个模块都是试一下,看看是什么效果,下面我也对子比主题的模块做一个展示

模块展示

首先是标题模块:支持自定义颜色

子比主题-标题块-默认颜色同全局主题色

子比主题-标题块-自定义颜色

子比主题-标题块-自定义颜色2

官方-标题快-H1

官方-标题快-H2

官方-标题快-H3

官方-标题快-H4

亮点块

亮点块用户图标和文字显示,用于展示亮点,建议4个一组使用

简约优雅的设计
现代化简约设计,更幼稚的阅读体验
前端用户功能
更全面的用户中心,提高网站互动性
模块化组件
可视化模块编辑,页面高度自由化
深度SEO优化
无需任何插件,更高的搜索引擎友好度
自定义主题
自带深色主题,头部、底部主题独立设置
强大的编辑器
超多的古腾堡编辑器块,超爽的写作体验
快!再快一点
代码逻辑深度优化、动态加载,让加载更快
超多实用功能
主题功能超200项,更符合国人使用

按钮块

通过按钮块快速添加各种样式的按钮。一共15种样式,每个样式可以选择是否圆角

按钮 按钮 按钮 按钮 按钮
按钮 按钮 按钮 按钮 按钮
按钮 按钮 按钮 按钮 按钮

引言块

引言块就不介绍了,更加单就是这个样子的。
支持自定义颜色,可以插入链接

这是自定义颜色的引言块

提醒框

文章块

在文章内插入其它文章的模块

隐藏内容模块

隐藏内容块分为:评论查看和付费查看 两种

幻灯片模块

折叠框模块

折叠框标题

折叠框就是可以折叠内容的模块,适用于较长内容且不是很重要的那种,或者就是需要分类的内容,可以设置默认是展开还是折叠状态

这是一个嵌套模态框展示-设置为默认折叠状态

代码高亮模块

//用于显示代码的模块,自动高亮,支持20+以上语言,支持显示行号、自定义主题、支持代码组显示
add_filter('get_avatar', 'zib_get_avatar', 1, 5);
function zib_get_avatar($avatar, $id_or_email, $size, $default, $alt)
{
	$user_id = zib_get_user_id($id_or_email);
	$custom_avatar = get_user_meta($user_id, 'custom_avatar', true);
	$alt = $alt ? $alt : get_the_author_meta('nickname', $user_id);

	$avatar = $custom_avatar ? $custom_avatar : zib_default_avatar();
	$avatar = preg_replace("/^(https:|http:)/", "", $avatar);
	$avatar = "<img alt='{$alt}' src='{$avatar}' class='lazyload avatar avatar-{$size}' height='{$size}' width='{$size}' />";
	return $avatar;
}

模态框模块

模态框也就是弹出框-使用此模块可以在文章中方便插入弹出的模态框

扩展功能

最后提一下小细节,也是我觉得古腾堡唯一不方便的地方。那就是居然不支持选择部分文字设置颜色….

所以主题也就有了这个功能……

选中部分文字,点此自定义颜色,设置颜色或者背景色,搞定

子比主题自带强大的图片的灯箱功能,点击文章内的图片将自动打开图片的原图,即图片灯箱功能!

主题的灯箱功能分为两种模式:单图放大模式、画廊幻灯片模式

解释一下这两种模式: 单图放大模式 也就是点击图片弹出此图片的原图,再次点击关闭。 画廊幻灯片模式 是由多张图片为一个组合,点击任意一张图则弹出这些图的幻灯片灯箱,可以切换上一张、下一张

功能介绍

此功能采用全自动图片识别,且支持全局动态加载。解释一下:当你在未点击图片时候,页面不会加载此功能的任何文件,当你点击图片之后,自动添加JS文件->创建灯箱->弹出灯箱->最后再动态加载原图,这样的流程全程不到0.5秒,但可极大的优化文章打开的速度,图片越多越明显!另外,即使文章内使用的是缩略图,灯箱也会自动搜索原图并显示,真正实现查看原图的功能,而不仅仅是图片放大而已。

另外两种模式的功能区别

单图放大模式:点击弹出、再次点击关闭、支持下滑关闭

画廊幻灯片模式:点击弹出、再次点击空白处关闭、支持双击缩放、双指缩放、键盘左右切换、下滑关闭

评论的图片算不上画廊,所以评论图片仅支持 单图放大模式

使用方法

主题默认开启此功能,设置位置:主题设置-文章页功能-文章功能-图片灯箱

单图放大模式使用就不说了,默认即可

使用 画廊幻灯片模式 仅需在编辑图片时候将图片链接到媒体文件即可,提醒:古腾堡自带的图片块不支持设置图片链接到,使用画廊块即可

同时 画廊幻灯片模式 还支持直接填入图片链接打开灯箱,点击下方按钮体验

最后我们随意加几张图片,方便大家体验

子比主题使用模块可以在任何位置插入幻灯片,那么如果要在文章内插入幻灯片怎么办呢?

对于文章内插入幻灯片一直都是Wordpress的难题,但是使用了子比主题,再搭配古腾堡编辑器,这就十分简单啦

1.找到主题的幻灯片块

在编辑文章或者页面时候,点击插入块-选择最下方的zibll块分类-选择幻灯片块

2.选择画廊图片插入

选择并插入图片就很简单了,就不截图了

3.设置幻灯片参数

点击幻灯片块右上角的设置图标,右侧即可出现幻灯片的设置选项

幻灯片支持5种动画显示,同时可以设置切换时间和其它设置

为了保证幻灯片图片的尺寸显示效果良好,建议调整长款比例实现最佳显示

4.显示灯箱

文章中所有图片点击都会弹出图片灯箱,如果您需要弹出的灯箱支持幻灯片,请将图片链接到媒体文件

提醒:所有文章图片均可这样设置以实现高级灯箱功能

子比主题已经集成了Font Awesome 图标,您可以在全站使用Font Awesome图标而无需任何插件。

要使用Font Awesome图标教程十分简单,如图所示,仅需两步:

具体方法请参看:在菜单插入图标教程

Iconfont-阿里巴巴矢量图标是国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。可以使用GitHub帐号登录,数百万的图标免费使用,官方也提供了详细的教程

一、新建Iconfont项目

接下来我们就一步一步的教大家如何在使用阿里巴巴Iconfont图标

Iconfont 支持GitHub帐号登录,登录之后你就可以寻找自己需要的图标啦

首先呢,寻找自己的需要的图标,通通点进购物车!

再把购物车的图标加入到项目,如果还未创建项目,那就新建一个就是了

二、网站集成

使用 Iconfont图标 图标官方也有详细的教程,同时官网提供三种集成方式:Unicode、class、Symbol。这三种集成方式各有优劣势,具体请查看官方教程

这里我推荐使用 Symbol 的方式集成到网站中,当然你也按照官方的教程使用其它方式集成

第一步:将刚刚新建的项目生成 Symbol 接入链接,并复制

第二步:将代码保存到主题设置

将以下代码中的链接替换为您刚刚复制的链接,然后 进入 主题设置-自定义代码-自定义底部代码 ,粘贴后保存主题设置

<script src="//at.alicdn.com/t/font_1706672_oa811wlg9gl.js"></script>

简单吧!网站集成 Iconfont图标 就已经全部搞定了!接下来就是使用 Iconfont图标 了!

提醒:请勿直接将代码写入到主题源码,已更新就没了。

三、使用 Iconfont图标

在已经添加到你项目中查找图标并复制图标代码,然后按照下面的格式替换href="#iconxxx"中的图标代码,将代码插入到你需要显示图标的地方!

<svg class="icon" aria-hidden="true"><use xlink:href="#iconxxx"></use></svg>

还是按照在导航菜单中添加图标为例:

复制图标代码
在导航菜单中插入

最后我们看看效果吧!

是不是很简单啊,接下来我我们再试试在文章中插入

使用古腾堡编辑器需要将内容转换为HTML编辑,然后再复制图标代码:

先转换为HTML编辑
然后再将代码复制到所需位置

使用经典编辑器也是需要先转为HTML编辑,再将图标代码复制到所需位置:

主题设置中的部分内容也是支持的喔!例如在加载更多的文案中插入

教程结束,赶紧试试吧