分享WordPress 主题 Sakura

云柯 89 4

分享WordPress 主题 Sakura本主题在 Louie 基于 Fuzzz 的 Akina 主题修改的主题 Siren 基础上三次修改

I. 特性

随机封面图

分享WordPress 主题 Sakura

Lazyload

分享WordPress 主题 Sakura

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

PS. 因为不熟悉 WordPress 的后台界面函数,所以后台管理界面中评论图片无法自动 lazyload,已经在后台引入了相应的库,如果要加载图片,有两种方法:a. 简单粗暴地在浏览器 console 手动输入 lazyload();b. 注意到 WordPress 自带的插件 Hello Dolly 了吗?在其将显示到 dashboard 的 <p> 标签上加上一个属性 onclick=(lazyload();),在 dashboard 中点击那句话就可以了,这是我现在使用的方法。

另外首页文章列表设计了一个向上浮现的效果,专业地说是叫交互式还是响应式吗?反正这是我最满意的一个小 trick~

定制登陆界面

分享WordPress 主题 Sakura

分享WordPress 主题 Sakura

后端登陆界面及 Dashboard 美化(明亮主题),同时也有配合 pjax 实现的前端登陆,前端登陆需自行用模板创建新页面(page)。

支持 Bilibili 表情

分享WordPress 主题 Sakura

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

QQ/Gravatar 头像

分享WordPress 主题 Sakura

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

评论插图

分享WordPress 主题 Sakura

该功能使用了 SM.MS 图床的接口。

用户 UA 及 IP 定位

分享WordPress 主题 Sakura

使用纯真 IP 数据库。对了,还有一个高仿 Bilibili 的等级系统

文章目录

分享WordPress 主题 Sakura

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

Mac 风格代码块

import matplotlib
import matplotlib.pyplot as plt
import numpy as np
import pandas as pd
import sklearn
 
# Load the data
oecd_bli = pd.read_csv("oecd_bli_2015.csv", thousands=',')
gdp_per_capita = pd.read_csv("gdp_per_capita.csv",thousands=',',delimiter='\t',
                            encoding='latin1', na_values="n/a")
 
# Prepare the data
country_stats = prepare_country_stats(oecd_bli, gdp_per_capita)
X = np.c_[country_stats["GDP per capita"]]
y = np.c_[country_stats["Life satisfaction"]]

代码高亮渲染使用的是 highlightjs。代码块可全屏

前端主题切换

分享WordPress 主题 Sakura

时光轴

分享WordPress 主题 Sakura

使用了 Shawn 的设计。

邮件模板

分享WordPress 主题 Sakura

Aplayer/HermitX 支持

分享WordPress 主题 Sakura

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

CDN 优化

针对性地做了 CDN 优化:主要是合并请求,并把不同类型的资源分配到不同的域名上,这些在后台界面可以调整。其他内容相对固定的资源,如贴图和前端库都放到了 jsDeliver 的公共库上。

II. 注意事项

重要★★:

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

启用新主题/插件前备份数据库是一个良好的习惯。

务必安装下面的必装插件。

WP Statistics,统计插件,主题需要页面访问计数。
WP Editor.mdMarkdown 编辑器,请开启“将 Markdown 用于评论”,否则评论插入的颜文字将无法转义。如果你实在不想用这个插件,颜文字转义的问题请自己解决。

建议安装的插件☆

Hermit X,基于 Aplayer 的播放器。
Easy WP SMTP,邮件支持。
Login LockDown,登陆尝试限制,避免前端登陆爆破。
Wordfence Security,避免爆破和评论注入。提醒:该插件将在数据库中记录访客信息,数据库体积将略有增大。

系统兼容性

主题作者的开发环境:

# PHP 版本
$ php -v
PHP 7.1.15-0ubuntu0.17.10.1 (cli) (built: Mar 14 2018 22:30:42) ( NTS )
# MySQL 版本
$ mysql -V
mysql  Ver 14.14 Distrib 5.7.21, for Linux (x86_64) using  EditLine wrapper
# Nginx 版本
$ nginx -v
Tengine version: Tengine/2.2.2 (nginx/1.8.1)
# 系统版本
$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 17.10
Release:        17.10
Codename:       artful
# WordPress 版本
$ grep wp_version wp-includes/version.php
* @global string $wp_version
   $wp_version = '4.9.6';

* 已兼容 PHP 7.2;PHP 最低版本要求为 7.1,否则你会看到莫名其妙的报错;
* 可兼容 Windows(Wnmp),可在这里下载 Windows 调试版;
* Apache 我没用过,不清楚,不过有用过几个请求头(request header)相关的 PHP 函数好像是仅针对 Nginx 的,我已经删掉了,应该不会有兼容问题吧。

Adobe Typekit 字体

切换字体功能中的 Serif 字体使用的是开源字体 思源宋体,请 在此 登陆并选择"ADD TO KIT"将整个 font-family 导入你的 kit,后台界面要填写的 ID 是你获得的 Embed code 中的 js 文件名,如以下的就需要填写 yqo7yxr。注意每个 ID 都是与域名绑定的,所以我的 ID 在你那里自然用不了。免费账号有每月 25,000 PV 的使用次数限制,不过经过我几天的使用发现,开启了主题的 pjax 异步加载后似乎只会计算到第一次着陆时的访问,所以猜测 Adobe 应该是用 yqo7yxr.js 这个文件的下载次数计数的。

<script src="https://use.typekit.net/yqo7yxr.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

如果你认为首页加载字体影响了网页加载速度,或者很介意 console 里的404信息(这实际是 Adobe 那边的问题),那么三个 ID 都空着就可以了,就像我的演示站那样。你也可以选择本地安装思源宋体以免去加载网络字体

下载链接

极速下载

 

打赏
发表评论
表情 图片 链接 代码

  1. Austen
    Austen Lv 1

    php7.2路过但是一堆不兼容

    • 云柯
      云柯 博主

      @Austen他做的应该是适用于nginx的

  2. 青山
    青山 Lv 2

    二次元风

    • 云柯
      云柯 博主

      @青山挺不错的一个主题,偶然看见。作者也是无私开源[aru_50]

分享
微信
微博
QQ