Facile-WordPress 一个简洁的 WordPress 博客主题
Facile 是我开发的一个 Typecho 博客主题 ,也是我的博客正在使用的主题,最近也把这个主题移植到了 WordPress。
Github:https://github.com/changbin1997/facile-wordpress
主题下载地址:https://github.com/changbin1997/facile-wordpress/releases
Typecho 版可以看 https://www.misterma.com/archives/899/ 。
截图
首页浅色模式截图:
首页深色模式截图:
关于移植
WordPress 和 Typecho 的主题开发区别还是比较大的,除了外观设计和部分 JS 能通用外,大部分功能都需要重写。
WordPress 提供了大量的 API 函数,很多在 Typecho 中需要手动实现的功能,在 WordPress 中都可以通过 API 函数实现。比如 WordPress 的侧边栏组件,可以直接通过 API 函数生成,不需要专门编写侧边栏组件,对于比较简单的主题可以说是比较方便的,开发者只需要专注于 CSS 的编写,不需要关心各种组件和表单的编写。
但是对于我这种想要移植其它平台主题的开发者来说,WordPress 主题开发起来就会比较麻烦,很多 API 函数生成的 HTML 结构不是我想要的,想要重写这些组件就给按照 WordPress 提供的 API 来编写,不能根据自己的方式来编写。
如果想要上传到 WordPress 官方的主题目录,要求就会更严格,有些组件只能通过 WordPress 提供的 API 函数生成,不能自己编写。有些功能 WordPress 认为应该通过插件来实现,即便主题能实现也不能包含在主题中。
安装
主题目前还需要手动下载安装,后续我会上传到 WordPress 官方的主题目录,上传完成后就可以一键安装了。
方式一
- 进入 Releases 下载 facile 最新版本的 zip 文件
- 登录 WordPress 后台,进入
外观
-主题
- 点击
安装新主题
,点击上传主题
,选择下载的主题 zip 文件,点击立即安装
- 安装完成后可以点击
转到主题页面
,看到 facile 主题就可以点击启用
方式二
- 还是一样的进入 Releases 下载 facile 最新版本的 zip 文件
- 把主题上传到 WordPress 目录下的
wp-content/themes
- 解压 facile 主题的 zip 文件,解压后应该能看到一个
facile
目录 - 登录 WordPress 后台,进入
外观
-主题
,这时应该能看到 facile 主题,点击启用
特点和功能
- 响应式设计
- 无障碍适配(Accessibility)
- 包含浅色和深色两套配色(可根据系统主题配色自动调节)
- 代码高亮
- 文章列表支持多种排版方式
- 丰富的设置选项
- 详细的帮助文档
- 支持多语言
- 长期维护
多语言
主题目前支持简体中文和英文,主题的语言会跟随 WordPress 使用的语言,如果 WordPress 使用的是中文,主题显示的也是中文,如果 WordPress 使用的是其它语言,主题使用的就是英文。
主题的前台和后台设置都支持多语言。
因为需要根据 WordPress 的标准来开发,所以无法让访问的用户切换语言,也不能根据访问用户的系统语言来选择语言,只能由站长来设置语言。
开发和依赖
主题用到了下面几个库:
- bootswatch 不同风格的 Bootstrap 主题
- jQuery DOM 操作和 Bootstrap 依赖
- highlight.js 代码高亮
- clipboard.js 一键拷贝代码
后端 PHP 没有用到任何库。
主题的图标使用的是 IcoMoon 的字体图标,IcoMoon 的图标可以自定义,所以主题中只包含几个用到的图标。
侧边栏小工具
主题完美支持 WordPress 官方的侧边栏小工具,除了官方的小工具外,Facile 还加入了下面几个小工具:
- Facile配色模式选择:配色选择小工具可以让访问的用户手动选择浅色或深色,选择的颜色会通过 Cookie 保存到本地,用户下次访问网站时,看到的就是他们选择的颜色。
- Facile最新评论:Facile加入的最新评论显示小工具相比官方的最新评论小工具要更简洁,可访问性也更好。
- Facile标签云:Facile标签云小工具可以随机生成彩色标签,在可访问性方面也要更好。
名称以 Facile 开头的就是 Facile 加入的小工具。
无障碍(Accessibility)
上网对于大多数人来说是一件再简单不过的事,但是对于一些身体有缺陷的残障人士来说却是一件非常困难的事。
Facile 主题针对屏幕阅读器做了大量优化,并在 NVDA 和 VoiceOver 这两款屏幕阅读器上做过测试,无论是 PC 还是移动设备都能完美朗读,主题能准确传达需要朗读的内容和信息,对于盲人来说,使用标准的屏幕阅读器基本可以无障碍操作。
主题可完美支持键盘访问,颜色对比度也符合标准。
兼容性
主题用到了少量的 CSS3,常见的浏览器都能完美兼容,IE 系列浏览器需要达到 IE10 才能完美兼容。
JavaScript 用到了 ES6,打包的发行版可以完美兼容 IE,开发版不支持 IE 系列浏览器和一些较老的浏览器。
版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权。
本文地址:https://www.misterma.com/archives/950/
如果对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。