WordPress 主题 Sakura 🌸 | 樱花庄的白猫

这是我改的第二个 WordPress 主题，前后花了大半年的时间，选择在博客一周年的时候开源出来算是一个纪念。从一年前技术为零走到今天，最该感谢的就是各个开源项目和教程，我深深体会到了开源精神的力量，所以这也算是对开源社区的微小贡献吧。主题经过测试，WordPress 全新安装的情况下可直接使用，后台的设置面板可满足正常使用需要，无需手动修改代码，这里是一个演示站。

本主题在 Louie 基于 Fuzzz 的 Akina 主题修改的主题 Siren 基础上三次修改，显然与前辈比起来，我唯一的贡献就是把他们的代码搞得乱七八糟了吧 =.=

GitHub 地址在文末（从而确保你看到了注意事项）。

I. 特性

随机封面图

内带了一个返回随机图片的 API，把想要展示的图放到 /cover/gallery 中即可。

Lazyload

使用了开源库 jQuery-Lazyload，按需加载图片，优先加载缩略图或占位图，当图片显示在 viewport 上时才加载原图，提升网页加载速度。

另外首页文章列表设计了一个向上浮现的效果，算我最满意的一个小 trick~

文章封面视频

Demo

可将视频设为文章封面，支持 hls 流视频。使用说明见主题 wiki。

定制登陆及后台界面

后端登陆界面及 Dashboard 美化（配色方案 Sakura），你也可以自行设计配色方案（请留意“后台配置”页面下的说明），同时也有配合 pjax 实现的前端登陆，前端登陆需自行用模板创建新页面（page）。

支持 Bilibili 表情

后端请按提示切换后台为明亮主题（个人资料页切换），否则评论管理页将出现表情鬼畜。

QQ/Gravatar 头像

如果输入了 QQ 号，留言将拉取 QQ 头像，如果 QQ 号不存在或者是输入了邮箱，将拉取 Gravatar 头像。QQ 头像接口和 Gravatar 镜像都由我这边提供。

评论插图

该功能支持多个图床的接口的选择，目前支持的有 SM.MS、Imgur、Chevereto，使用前请在主题设置中配置相应的代理和API Key。

注意：目前此功能需要 PHP 开启 curl 支持，同时 Nginx/Apache 需要允许 POST 请求。

用户 UA 及 IP 定位

使用纯真 IP 数据库。对了，还有一个高仿 Bilibili 的等级系统，有空还打算再写一个头饰模块。

文章目录

使用了开源项目 tocbot，在需要目录的文章任意位置输入 [toc] 启用。文章首字的大写使用方法：把首字放到 [begin] 和 [/begin] 之间。

Mac 风格代码块

import banana

class Monkey:
    # Bananas the monkey can eat.
    capacity = 10
    def eat(self, n):
        """Make the monkey eat n bananas!"""
        self.capacity -= n * banana.size

    def feeding_frenzy(self):
        self.eat(9.25)
        return "Yum yum"

代码高亮渲染使用的是 highlightjs。代码块可全屏，你发现了吗？
建议通过 Markdown 语法写作以便代码块正常显示，代码高亮支持二十多种常见编程语言。

前端主题切换

这部分函数写得有些凌乱，打算以后有空重构一下，可留意主题的更新。字体请留意注意事项。

时光轴

使用了 Shawn 的设计。

相册

基于 fancybox 实现的相册功能，使用说明见主题 wiki。

邮件模板

Aplayer/HermitX 支持

修改了 APlayer 的部分样式，文章内插入音乐可使用 Hermit X 插件。

CDN 优化

因为自己博客每天访问量较大（日均 PV 3000左右），所以为了减少请求数及流量，以此控制 CDN 费用（每天0.2元左右），针对性地做了 CDN 优化：主要是合并请求，并把不同类型的资源分配到不同的域名上，这些在后台界面可以调整。其他内容相对固定的资源，如贴图和前端库都放到了 jsDeliver 的公共库上。

Github Cards

可通过短代码添加： [github repo="mashirozx/Sakura"]

移动客户端*

借助 PJAX 异步加载，便于基于 WebView 开发高性能的移动客户端，切换页面时无刷新，可以获得接近 Native 的响应速度。具体可以体验我的安卓客户端。

II. 注意事项

重要★★：

主题下载后请把文件夹名字改回 Sakura，也即，保证主题路径为 wp-content/themes/Sakura/。

启用新主题/插件前备份数据库是一个良好的习惯。虽然我保证主题不可能损坏你的数据，但是毕竟数据无价，对吧？

建议安装的插件☆

Hermit X，基于 Aplayer 的播放器。

我也在使用的插件

Easy WP SMTP，邮件支持。
WP Statistics，统计插件，主题可选择其接口以作页面访问计数。
Login LockDown，登陆尝试限制，避免前端登陆爆破。
Wordfence Security，避免爆破和评论注入。提醒：该插件将在数据库中记录访客信息，数据库体积将略有增大。
Akismet Anti-Spam，垃圾评论过滤。
AMP，生成AMP 页面，效果就是这样，有利于提升 Google 排名。
Autoptimize，页面压缩。
Glue for Yoast SEO & AMP，AMP 增强，需配合 Yoast SEO 及 AMP 插件使用。
WP Super Cache，页面缓存，为访客自动生成缓存版网页，提升访问速度。
Yoast SEO，搜索引擎优化。

其他插件我没用过，不保证兼容性。

兼容性

服务器端

WordPress 版本：4.8+
PHP 版本：7.1+

前端

兼容主流 Chromium 内核浏览器、FireFox 浏览器。不兼容 IE （360、QQ 等双核浏览器请关闭 IE 模式）。

写作规范

主题遵循 HTML5 规范，正文部分样式完全兼容标准 Markdown 语法，因此也建议配合 WP Editor.md 插件使用 Markdown 写作，可参考《Markdown 编辑器语法指南》。

主题演示站有一篇 Markdown 语法展示，文章源码在这里。

API

下面是一些主题内已经带有的接口，无需重复构建：
Cookie：see https://2heng.xin/2018/05/12/add-a-version-control-for-cookies/

后续会考虑添加更多接口。

III. FAQ

1. 为什么开源的主题和这个博客不完全一样？
我的博客上还有一些个性化的内容，因为并不是所有人都会需要，一方面影响主题性能，另一方面为了开源还需为些部分添加开关和选项，耗费时间且没意义，所有这些内容在开源的主题中都已移除。如果你有喜欢，f12 随便抄，我没意见~

PS. 其实本站主题已经很久没有更新了，开源版主题中反而有更多新功能的。 (￣▽￣)"

标准主题演示在这里。

2. 前端代码块/WP 5.3 后台崩坏？
原先推荐的 WP Editor.md 插件在 WP ５.３中存在严重的兼容性问题。目前最新版主题已经对评论部分做了处理，不再需要依赖该插件，所以如果更新到了 WP 5.3，请停用此插件。至于正文 Markdown 写作，目前没有好的方案，可以先用其他 Markdown 编辑器书写并转成 HTML，再粘贴进 WordPress。

3. 主题设置开关未生效？
启用主题后先点一次保存。

4. 时差问题
后台主题设置界面里添加了一个时差调节选项。

5. 插入全屏浏览的图片？
参见主题 wiki。

6. 使用了CDN后评论定位不正确？
如果使用了 CDN 请在 WordPress 根目录的配置文件 wp-config.php 最后加上这段：

if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
    $list = explode(',', $_SERVER['HTTP_X_FORWARDED_FOR']);
    $_SERVER['REMOTE_ADDR'] = $list[0];
}

网站建议都加上 CDN 以避免暴露服务器IP和被攻击的风险；可以使用 CloudFlare 的免费 CDN。

7. 兼容 IE 及 360 极速浏览器
前者太太太太旧啦，不考虑适配，不过 IE 浏览器可以看到一个友好的弹窗提醒。后者，明明是 IE 内核却要拼命伪装成 Chrome 内核，我能怎么办呢？

8. 文章页页首装饰图（Feature Image）
后台文章/页面编辑器中有一个设置特色图（Feature Image）的窗口，每篇文章/页面需要单独设置，没有设置时默认为空白。这不是 bug，因为并不是每篇文章都需要装饰图，视频教程。

最后，关于 bug 反馈
在提出你认为的 bug 之前，可先用这里的 Windows 调试环境（里面的主题版本是很早以前的了，请手动更新一下）复现出该问题；如果愿意帮我修改，欢迎提交 Pull request。除非是 bug，如果仅仅是其他样式/功能的需求，请自己动手吧，不过 DIY 内容也欢迎提交　Pull request。其他使用相关问题可在下面留言；主题相关问题不接受微信/邮件私信。

IV. 下载

项目发布于 GitHub：mashirozx/Sakura，如果下载速度慢可使用国内镜像，Pull Request 和 Issue 请提交到 GitHub。

目前正在重构主题，Sakura v3.x 版本人基本不再维护。重构版主题采用 webpack 打包，更易于维护和 DIY，重构项目预览（务必阅读 README）：https://github.com/mashirozx/Sakura2。

主题交流群：860262481

另有 hexo 版主题分支：honjun/hexo-theme-sakura

需要服务器吗？我现在在用的这家最低 $3.5/月（$2.5 版没有 IPv4），下面的邀请链接可以获得 $10 的奖励~

若有幸您采用了我的主题，欢迎交换友链。您若喜欢，打赏一下也是极吼的~

赏

server { listen 443 ssl; listen [::]:443 ssl; ssl on; ssl_certificate fullchain.cer; ssl_certificate_key 2heng.xin.key; ssl_session_timeout 5m; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; ssl_prefer_server_ciphers on; root /var/www/html/dev/wordpress; index index.php index.html index.htm index.nginx-debian.html; error_page 405 =200 $uri; server_name dev.2heng.xin; client_max_body_size 50M; location / { # First attempt to serve request as file, then # as directory, then fall back to displaying a 404. #try_files $uri $uri/ =404; try_files $uri $uri/ /index.php$is_args$args; add_header Access-Control-Allow-Origin *; } location ~ \.php$ { include snippets/fastcgi-php.conf; fastcgi_pass unix:/run/php/php7.2-fpm.sock; } location ~ /\.ht { deny all; } location = /favicon.ico { log_not_found off; access_log off; } location = /robots.txt { log_not_found off; access_log off; allow all; } location ~* \.(css|gif|ico|jpeg|jpg|js|png|cur|otf|woff)$ { expires 30m; log_not_found off; } location ~* \.(ttf|woff|otf|js|css)$ { add_header Access-Control-Allow-Origin *; } location ~ /var/www/html/wp-config.php { return 404; } }

查看评论 - 1,964 条评论

Comments | 1,964 条评论

博主 ° 毒药poison。
发布于 2019-03-15 01:27 ( Google Chrome 72.0.3626.121 Windows 10 )( ) 来自: 江苏省徐州市电信
问一下后台时差哪里到底怎么设置，怎么填都不对
博主 KiritoLifeF
发布于 2019-03-14 12:50 ( Google Chrome 68.0.3440.106 Windows 7 )( ) 来自: 福建省泉州市晋江市电信

主题设置怎么成这样了
- 博主 Mashiro
  发布于 2019-03-14 18:02 ( Google Chrome 72.0.3626.121 Windows 10 )( ) 来自: 上海市移动
  @KiritoLifeF 看起来你这个样式表文件没有加载出来
博主元仙僧
发布于 2019-03-13 10:15 ( Edge 17.17134 Windows 10 )( ) 来自: 北京市电信
大佬，我在安装主题的时候老是出现如下错误
Fatal error: Can’t use function return value in write context in /home/bae/app/wp-content/themes/Sakura/functions.php on line 1532
能告诉我是什么原因吗
- 博主冷水薄荷
  发布于 2019-03-13 15:33 ( SouGou Browser 2.X Windows 10 )( ) 来自: 浙江省杭州市桐庐县电信
  @元仙僧 PHP版本太低了，7.1以上
博主取个名字真麻烦
发布于 2019-03-13 07:54 ( Google Chrome 72.0.3626.121 Mac OSX 10_14_3 )( ) 来自: 浙江省杭州市电信
请教个问题，樱花庄的白猫的Moe-Mashiro字体是怎么弄来的，我也想给自己博客搞一个这个萌萌的字体o(≧v≦)o
- 博主 Mashiro
  发布于 2019-03-14 18:03 ( Google Chrome 72.0.3626.121 Windows 10 )( ) 来自: 上海市移动
  @取个名字真麻烦我用的是这个工具
博主 QIUYU
发布于 2019-03-12 14:55 ( Google Chrome 72.0.3626.121 Windows 10 )( ) 来自: 广东省广州市电信
问下博主，我修改了CSS文件之后页面没有效果怎么解决？求dalao解疑(｡･ω･｡)
- 博主 Mashiro
  发布于 2019-03-14 18:05 ( Google Chrome 72.0.3626.121 Windows 10 )( ) 来自: 上海市移动
  @QIUYU 后台切换使用本地css
博主ソ初ヲ
发布于 2019-03-12 14:43 ( Google Chrome 61.0.3163.128 Android 8.1.0 )( ) 来自: 福建省移动数据上网公共出口

时光轴出现bug，设置特色图片出现显示问题，求修复
- 博主释怀
  发布于 2019-03-13 21:29 ( QQBrowser 10.3.2601.400 Windows 10 )( ) 来自: 广东省揭阳市移动
  @ソ初ヲ你一定是用的小米浏览器
  - 博主ソ初ヲ
    发布于 2019-03-13 22:54 ( QQBrowser 6.2 Android 8.1.0 )( ) 来自: 福建省厦门市电信
    @释怀其他浏览器也一样，每个页面都没问题，唯独这个
    - 博主 Mashiro
      发布于 2019-03-14 18:10 ( Google Chrome 72.0.3626.121 Windows 10 )( ) 来自: 上海市移动
      @ソ初ヲ归档页忘记写装饰图了（我自己没用就。。
- 博主 Suyeq
  发布于 2019-03-14 04:45 ( Google Chrome 72.0.3626.121 Windows 10 )( ) 来自: 湖南省电信
  @ソ初ヲ我也是，设置归档页面图片后，就会出现这个bug
  ps:不会PHP以及第一次使用WordPress，否则就帮你改了
博主你与未来
发布于 2019-03-12 12:30 ( Google Chrome 63.0.3239.132 Windows 10 )( ) 来自: 云南省红河州电信
谢谢分享（￣▽￣）
博主无名的南瓜君
发布于 2019-03-12 12:26 ( QQBrowser 10.4.3318.400 Windows 10 )( ) 来自: 广东省广州市电信
站长，你的服务器用的是几刀一月的，我搬瓦工单核的搭不起来，CPU使用率都100了，最近一段时间一直这样（没搭之前也是）
- 博主 Mashiro
  发布于 2019-03-14 18:11 ( Google Chrome 72.0.3626.121 Windows 10 )( ) 来自: 上海市移动
  @无名的南瓜君 5刀
博主郁结
发布于 2019-03-12 07:51 ( Google Chrome 72.0.3626.121 Windows 10 )( ) 来自: 湖南省湘西州吉首市吉首大学
没事了，可能我那个地方配置除了问题，现在解决了
博主郁结
发布于 2019-03-12 05:02 ( Google Chrome 72.0.3626.121 Windows 10 )( ) 来自: 湖南省电信
不知道为什么乱码了
博主郁结
发布于 2019-03-12 01:23 ( Google Chrome 72.0.3626.121 Windows 10 )( ) 来自: 湖南省湘西州吉首市吉首大学
谢谢大佬的开源，让我一个后端狗可以用有一个博客，不过我不会PHP，有点难受，虽然搭好了，下载后解压的主题，友链和归档居然不是对应的模板，让我这个第一次接触WordPress的人疑惑了好久，然后手动把这两个保存为对应的模板就好了
博主 nice
发布于 2019-03-09 14:56 ( Google Chrome 72.0.3626.121 Windows 10 )( ) 来自: 广东省东莞市 (南城区)电信
很漂亮的主題，很可惜我不會安裝
博主小柒吃地瓜
发布于 2019-03-08 10:17 ( Google Chrome 72.0.3626.121 Mac OSX 10_14_1 )( ) 来自: 江西省吉安市电信
这个博客好看,我也想换这个!
博主章
发布于 2019-03-07 03:07 ( SouGou Browser 2.X Windows 10 )( ) 来自: 湖南省长沙市联通
部分图片一直转圈，点击能打开是怎么回事呢？有些图片又没问题。
- 博主 spirit1431007
  发布于 2019-03-09 11:15 ( Google Chrome 72.0.3626.121 Windows 10 )( ) 来自: 天津市电信
  @章看了看，出现问题的图像class里面没有lazyload
  - 博主章
    发布于 2019-03-14 13:45 ( SouGou Browser 2.X Windows 10 )( ) 来自: 湖南省长沙市电信
    @spirit1431007 那要怎么解决呢？超出我能力范围了，呵呵。谢谢。
博主へキシス雪桜
发布于 2019-03-06 15:02 ( Google Chrome 74.0.3702.2 Android 8.0.0 )( ) 来自: 山东省泰安市移动
请问代码框为什么会出现这种情况
- 博主 Mashiro
  发布于 2019-03-14 18:12 ( Google Chrome 72.0.3626.121 Windows 10 )( ) 来自: 上海市移动
  @へキシス雪桜好像已经解决了？
  - 博主へキシス雪桜
    发布于 2019-03-16 13:38 ( Google Chrome 75.0.3734.0 Android 8.0.0 )( ) 来自: 山东省泰安市移动
    @Mashiro 好吧，虽然不知道为什么突然间又好了，但还是谢谢