Wordpress共5篇

子比主题全站使用阿里巴巴Iconfont图标详细图文教程

子比主题全站使用阿里巴巴Iconfont图标详细图文教程-Zibll子比主题

子比主题已经集成了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编辑,再将图标代码复制到所需位置: 主题设置中的部分内容也是支持的喔!例如在加载更多的文案中插入 教程结束,赶紧试试吧

子比主题扩展功能# Zibll# 子比主题# Wordpress

QinverQinver前天
13104

主题导航菜单设置

主题导航菜单设置-Zibll子比主题

主题菜单分为PC端顶部导航和移动端菜单两个部分,可单独设置 导航菜单样式设置 进入主题设置-顶部导航 电脑端样式 电脑端顶部导航有三种布局可选择,同时您可以设置是否固定在顶部 实际显示效果: 手机端样式 移动端顶部导航有两种布局选择,弹出菜单有可选择弹出方向 截图展示: 右侧弹出顶部弹出左侧弹出 顶部导航支持自定义背景色和前景色,如需了解请点击下方按钮 截图预览设置教程 添加菜单及设置 进入Wordpress后台-外观-菜单 在这里你可以新建菜单-并分别设置移动端和PC端的菜单 主题提供PC端菜单和移动端菜单独立设置功能(也可以只设置一个),你可以按需进行设置!为了达到更好的效果,设置菜单有一下几点请注意: PC端菜单的一级菜单不要太多,太多会导致换行显示错位移动端菜单最多只支持二级菜单,如果添加了三级菜单则不会显示PC端菜单支持多级显示,但建议不要超过二级 菜单使用图标 主题自带了Font Awesome 4.7 图标,你可以在菜单插入任意的 Font Awesome 4.7 图标而无需安装任何插件 第一步:找到你想要插入的图标代码,并复制 你可以使用此网站找到全部的图标代码,选择一个图标并复制图标代码: 第二步:粘贴在菜单名称内 搞定,保存看看效果吧! 同时除了主题自带的 Font Awesome 图标之外,您也可以插入其它图标,例如Iconfont-阿里巴巴矢量图标,当然这就需要安装对应的插件或者插入一些自定义代码了。 插入Iconfont图标教程 插入Iconfont图标是十分简单的,阿里巴巴也给出了十分详细的教程。如果您需要在导航菜单中也插入插入Iconfont图标,请点击查看一下教程! 子比主题全站使用阿里巴巴Iconfont图标详细图文教程 以上添加图标的教程可不仅仅适用于菜单喔!全站任何地方可以使用,同时大部分非子比主题网站也是可以使用的!例如下方的截图

主题配置# Zibll# 子比主题# Wordpress

QinverQinver5天前
03121

主题常用功能设置

主题常用功能设置-Zibll子比主题

登录注册验证功能 进入主题设置-常用功能 开启登录注册验证功能之后,前端会要求输入验证码(短信验证、邮箱验证即将发布) 图像异步加载(图像懒加载) 进入主题设置-常用功能 图像异步加载能极大的提高前端加载速度,它的原理就是 当页面加载时先不加载对应的图片,等待用户滚动且此图像进入用户视线内时再加在图片,这样也就能较少网页刚打开时的页面大小,提高加载速度,在图片较多的网站效果极为明显。 前端弹窗通知 进入主题设置-常用功能 弹窗通知 当用户打开网站时自动弹出的弹窗通知,可以设置标题、内容、尺寸。同时还可以添加两个按钮,按钮可以自定义内容、连接、样式。 弹窗通知24小时之内不会重复弹出

主题配置# Zibll# Wordpress# 主题设置

QinverQinver16天前
03943

子比主题基础配置-前端显示配置教程

子比主题基础配置-前端显示配置教程-Zibll子比主题

网站必要图像设置 您可以在前台登录之后点击右上角主题设置或进入Wordpress后台-在右边找到Zibll主题设置。 选择全局核心,按照顺序选择您的LOGO、图标图像,保存即可 全局图像设置 注意:主题拥有夜间模式和日间模式,则logo图像也做了对应的区分,分别选择日间模式和夜间模式的图像前端会根据当前显示模式实时切换。如果您的logo配色能同时适应日间模式和夜间模式,则仅需设置日间模式的图像即可。 布局设置 进入主题设置-主题显示 首先选择需要显示侧边栏的位置,再选择侧边栏显示在左边还是在右边显示。未开启侧边栏的位置则显示为全宽模式 主题显示及配色 进入主题设置-主题显示 日间模式及夜间模式 主题拥有日间模式及夜间模式显示效果,默认为自动根据时间切换。晚上显示为夜间模式,白天显示为日间模式。你可以在此修改显示模式。同时也可以设置是否在前端显示切换按钮 此处设置的显示模式,仅为前端的默认显示模式。实际显示模式的最高优先级来自用户选择,也就是前端切换主题按钮的结果。用户在前端点击切换主题之后,浏览器默认会保存用户设置直到用户退出浏览器。实际显示模式优先级为:用户手动切换>浏览器缓存>后台设置>自动切换 主题模式 全局主题配色及样式 进入主题设置-主题显示 全局主题配色主要应用于前端的高亮颜色,例如连接颜色、鼠标划过颜色、默认标题颜色。你可以选择预制颜色或者选择自定义颜色(注意:如果自定义颜色有内容则勾选的预置颜色则无效,如需重新选择预置颜色,请先清空自定义颜色【如图所示】) 全局圆角运用于前端所有卡片的圆角尺寸,推荐4px或者8px 全局loading动画指页面在加载前显示的动画,让页面切换拥有过度动画效果。主题自带十种动画效果部分效果如下: 顶部导航及底部页脚配色 进入主题设置-主题显示 顶部导航及底部页脚配色分为背景色和前景色(文字颜色)配色,主题默认为白色背景和黑色前景色。如果需要自定义则勾选自定义配色 主题预置了6款渐变背景配色,您也可以选择自定义颜色。 注意:修改此配色请一定注意背景色和前景色的搭配以及LOGO颜色的搭配,深色背景则选择白色的前景色 主题自带的渐变配色展示

主题配置# Zibll# 子比主题# Wordpress

QinverQinver16天前
12311

WordPress博客资讯类主题-Zibll子比主题 [主题介绍]

Wordpress博客资讯类主题-Zibll子比主题-Zibll子比主题
0

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

子比主题# Zibll# 子比主题# Wordpress

QinverQinver18天前
33654251