Sakura 🌸 之前咕的Hexo Sakura主题使用手册，对很多刚入门的小伙伴应该还是有所帮助的，这次写wordpress sakura主题的下载安装、使用和美化教程，主要分为三部分：1.下载安装篇 2.基础使用篇 3..进阶美化篇。基本使用篇是wordpress sakura主题标准演示自身集成的功能介绍，进阶美化篇是自己自定义的一部分（非主题集成）。 文章内容可能会比较多，建议根据右边目录索引查看。
重要通知
现在强烈推荐 Sakurairo 主题 ，主题内置很多像live2d看板娘、首页波浪和箭头等等，如果你是小白或者觉得修改代码比较难建议去看看我最新的 WordPress 主题 Sakurairo🌸 ，可以满足你99%的需求，满足不了可以加群联系作者。
官方地址
- 白猫主题介绍
- Wordpress Sakura主题仓库
- Wordpress Sakura主题社区
- Wordpress Sakura主题演示站
- 我此次教程编写修改美化站点
- Wordpress Sakura主题QQ群：860262481
DIY说明
在自己修改主题涉及css和js，请大家去wordpress 后台 sakura主题设置里面开启本地css和js调用（默认是CDN），不然你修改本地css和js也没有效果，请根据下面步骤开启。
1.下载安装篇
考虑到有部分人可能对wordprss不熟悉，所以还是会简单的写一下这个下载和安装。
1.1 安装wordpress
首先你需要在服务器上安装wordpress程序，这是基础。可以看看我之前的【wordpress安装教程】（基于宝塔面板，上手最快），也可以自行百度完成wordpress的安装。
1.2 下载 sakura主题
去Wordpress Sakura主题仓库下载主题文件，新手推荐下载压缩包：
1.3 上传安装主题
在wordpress后台外观->主题里面上传下载的压缩包
1.4 启用主题
安装完成之后，在主题管理里面启用wordpress sakura主题
至此，wordpress sakura主题的下载和安装已经完成了，下面会开始基础使用篇。
2.基础使用篇
基础使用篇我也采用从首页顶部自上而下的顺序写，比较直观一点。
2.1 顶部Logo
（补充：这个应该不属于主题自带，算是进阶美化，比较懒就先放这里了）我自己的博客logo不是按照白猫的logo设计的，然后去问了一下QQ群的小伙伴有人提供了教程地址： https://hyacm.com/acai/ui/143/sakura-logo/ ，可以去参考一下，我自己下面结合他们的教程介绍一下。
首先去 sakura 主题设置里自定义css面加入下面的css代码：
/* logo */
.logolink a {
color: #464646;
float: left;
font-size: 20px;
font-weight: 800;
height: 56px;
line-height: 56px;
padding-left: 35px;
padding-right: 15px;
padding-top: 11px;
text-decoration-line: none
}
.logolink .sakuraso {
background-color: rgba(255, 255, 255, .5);
border-radius: 5px;
color: #464646;
height: auto;
line-height: 25px;
margin-right: 0;
padding-bottom: 0px;
padding-top: 1px;
text-size-adjust: 100%;
width: auto
}
.logolink a:hover .sakuraso {
background-color: orange;
color: #fff;
}
.logolink a:hover .shironeko,
.logolink a:hover .no,
.logolink a:hover rt {
color: orange;
}
.logolink.moe-mashiro a {
color: #464646;
float: left;
font-size: 25px;
font-weight: 800;
height: 56px;
line-height: 56px;
padding-left: 6px;
padding-right: 15px;
padding-top: 11px;
text-decoration-line: none;
}
.logolink.moe-mashiro .sakuraso,.logolink.moe-mashiro .no {
font-size: 25px;
border-radius: 9px;
padding-bottom: 2px;
padding-top: 5px;
}
.logolink.moe-mashiro .no {
font-size: 20px;
display: inline-block;
margin-left: 5px;
}
.logolink a:hover .no {
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
.logolink ruby {
ruby-position: under;
-webkit-ruby-position: after;
}
.logolink ruby rt {
font-size: 10px;
letter-spacing:2px;
transform: translateY(-15px);
opacity: 0;
transiton-property: opacity;
transition-duration: 0.5s, 0.5s;
}
.logolink a:hover ruby rt {
opacity: 1
}
.moe-mashiro {
font-family: 'wenyihei-subfont', 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;;
}
.chinese-font {
font-family: 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
}如下图所示：
然后在sakura主题文件的header.php
加入代码如图所示的代码圈起来的是需要加进去的（上方注释掉是原来的代码）
下面给出我修改后这一部分主要代码（header.php头部一些代码省略）
<!-- <header class="site-header no-select" role="banner"> -->
<header class="site-header no-select is-homepage gizle sabit" role="banner">
<div class="site-top">
<div class="site-branding">
<?php if (akina_option('akina_logo')){ ?>
<div class="site-title">
<a href="<?php bloginfo('url');?>"><img src="<?php echo akina_option('akina_logo'); ?>"></a>
</div>
<?php }else{ ?>
<span class="site-title">
<!-- <span class="logolink serif"> -->
<span class="logolink moe-mashiro">
<a href="<?php bloginfo('url');?>">
<!-- <span class="site-name"><?php echo akina_option('site_name', ''); ?></span> -->
<ruby>
<span class="sakuraso">流年</span>
<span class="no">の</span>
<span class="shironeko">小破站</span>
<rp></rp>
<rt class="chinese-font">Yremp's Blog</rt>
<rp></rp>
</ruby>
</a>
</span>
</span>
<?php } ?>
<!-- logo end -->更新修改过的代码，就可以看到效果了。
我自己已经将别人的字体css复制过来了，字体设置可以查看上面的原文地址设置一下，这里时间原因就不细说了。
2.2 顶部导航栏
顶部导航栏的添加编辑其实是属于wordpress的基础使用，是wordpress的通用功能，在外观 -菜单里面设置：
下面教大家如何添加一个有图标的导航栏，
就用默认的Menu 1直接创建一个导航菜单，并且将显示位置修改为导航菜单，然后保存,具体如下图：
然后访问你的博客首页，查看效果：
可以看到首页已经出现了，但是并没有图标，如我的博客首页：
下面教大家如何加上去，在菜单中找到首页对应的选项，打开它的属性部分：
将导航标签修改为下面的内容：
<i class="fa fas fa-home fa-1x"></i> 首页如图所示：
然后去首页查看效果，可以看到效果啦
图标是用的Fontawesome的图标库，css主题已经引入了，可以直接复制标签使用
这就是wordpress sakura主题的导航栏教程。
2.3 封面图和效果
这个在sakura主题设置里面
保存后查看效果
补充：这里讲一下多张图片切换问题，因为我自己一般都是默认使用一张图作为封面，一开始写教程没考虑到这个问题，补一下。
将自己想要使用的多张图片放到主题文件下的 /manifest/gallary/ 下面如下图：
然后在主题 第一屏 中开启 内置随机图：
查看一下随机效果
顶部图片效果仍然在第一屏设置里面可以看到背景图滤镜设置
修改完查看效果
2.4 头像设置
头像设置在sakura主题设置中基本设置里面
个人头像logo和文字版logo效果分别如下
2.5 个人描述
sakura主题设置 -基本设置里面，如下图所示：
效果查看
2.6 社交栏
社交栏在sakura主题设置里面有专门的设置 社交网络，如图：
这里演示我就先随便填几个查看一下效果吧！
2.7 网站公告
在sakura主题设置 其他里面可找到如下设置
修改后可查看效果
2.8 Discovery 设置
在sakura主题设置的 第一屏 可找到相关设置
我先随便修改一下，看看效果
2.9 文章相关设置
文章页的相关设置在 Sakura主题设置的文章页设置里面:
建议大家自己全部看一下，然后关于首页文章显示的两中模式介绍一下,图文模式和标准模式：在 基本设置 里面可以找到相关设置
下面是两种模式的效果演示：
其他几种设置自己试试把，这里不一一演示了。
2.10 左下角播放器歌单设置
播放器设置在sakura主题设置里面的 其他 里面
网易云歌单id获取打开网易云音乐网页版的具体一个歌单，在地址栏可以获取到：
把这个id填进去就可以用自己的网易云歌单了。
2.11 友链页面设置
友链其实是主题自带的功能，只不过主题文档并没有详细说，很多人是新手对wordpress不太熟悉，就很容易找不到。要想开启一个友链页面，首先在wordpress后台点击页面，然后新建一个页面，并在页面属性选择links模板
设置一下特色图，然后发布
从上面的固定链接查看一下这个页面
可以看到什么都没有，只有一个特色图，我们去链接里面添加一个友链，如下图：
添加友链基本数据设置
现在一个友链基本设置完成，点击添加链接保存一下;
再访问友链页面查看效果：
然后再按照之前的导航栏教程，把这个添加到导航栏即可
首页查看导航栏
至此友链的相关基本介绍完成了，大家可以根据自己需要去修改。
2.12 时光轴设置
时光轴设置基本和友链类似，只需要去新建一个页面，模板选择为时光轴即可
发布后查看效果：
去导航栏添加一下：
查看效果
如果你是直接跳到这里，不知道怎么添加导航icon（图标），可以去上面看看导航栏教程。
2.13 文章目录索引
这里我就以我这篇文章为例，只需要在文章任意区块加入 toc 标签即可，如下图所示：
阅览查看效果
这个比较简单，没有太多好说的
2.14 文章首字大写
文章首字母大写也是wordpress sakura主题自带的功能，使用也比较简单将要大写的字放入 标签对 即可，以我这篇文字为例给大家截图演示：
预览查看效果
2.15 主题基本色调
这个其实说的有点晚，但是还是顺带提一下，这个在sakura 主题设置的基本设置里面可以设置，如下图所示：
2.16 主题评论设置
这个是在skaura主题设置的 其他 设置中
下面还有UA信息设置开关
开启之后可以评论一下查看效果
2.17 邮件相关设置
wordpress sakura主题是带邮件功能，但是需要配合邮件开启SMTP才能使用，先介绍一下如何开启邮件功能。
首先需要安装一个插件 WP Mail SMTP （我自己用的这个，也有其他类似插件）下面会给两个下载地址，一个是官方商城，另外一个上传到可道云，因为国内有的时候是访问不了wordpress 官网，wordpress后台插件商城也用不了，需要代理才能正常访问。
安装完插件如下图所示，并且启用插件
开始设置插件相关数据，下面我以QQ邮件配置为示例
SMTP主机填写：smtp.qq.com
上面有一点需要注意，就是如果选用SSL 465端口，记得去服务器防火墙放行465端口
填入SMTP密码然后保存，关于SMTP密码获取请往下面看。
下面给大家讲一下如何获取QQ邮箱SMTP密码，首先去QQ邮箱网页版
点击设置，选择账户
在下方找到 POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务，点击生成授权码
点击之后进行安全验证
验证完成之后，就可以拿到授权码，也就是SMTP密码，如下图所示：
复制一下，填到SMTP密码框中，如下图所示：
然后保存一下设置。
这时候可以用插件的测试功能测试一下，SMTP是否配置成功，如下
去邮箱查看邮件
先去sakura 主题设置 其他 里面开启评论邮件回复
另外测试环境得设置一下评论审核等问题
评论通知测试
关于邮件模板，这个是在sakura主题的functions.php下面，具体如下图
可以根据需要修改一些html风格和样式。下面是我自己博客的演示截图：
2.18 修改固定链接404
修改固定链接格式之后文章等页面会出现404错误，其实就是伪静态的问题。只需要在nginx的配置文件加入下面的伪静态规则：
location / {
try_files $uri $uri/ /index.php?$args;
}
rewrite /wp-admin$ $scheme://$host$uri/ permanent;如果是宝塔面板可以有下面的两种方式：
3.进阶美化篇
3.1 动态波浪效果
这个其实之前已经写过了，但是为了不让大家再打开一个网页这里就再写一次
首先去主题文件夹下面的header.php加入下面的两行代码：
<div id="banner_wave_1"></div>
<div id="banner_wave_2"></div>位置可以参考我的，如下图所示：
在主题下面的style.css文件最后加上下面的css代码
@-webkit-keyframes wave1/*Safari and Chrome*/
{
0% { left:-1500px;bottom:-5px}
50%{ left:0px;bottom:0px}
100%{ left:-1500px;bottom:-5px}
}
@-webkit-keyframes wave2
{
0% { left:-1450px}
50%{ left:0px}
100%{left:-1450px}
}
@keyframes wave1/*Safari and Chrome*/
{
0% { left:-1500px;bottom:-5px}
50%{ left:0px;bottom:0px}
100%{ left:-1500px;bottom:-5px}
}
@keyframes wave2
{
0% { left:-1450px}
50%{ left:0px}
100%{left:-1450px}
}
#banner_wave_1 {
width:auto;
height:65px;
background:url("https://cdn.jsdelivr.net/gh/yremp/resource@2.0/img/other/wave1.png") repeat-x;
_filter:alpha(opacity=80);
position:absolute;
bottom:0;
width:400%;
left:-236px;
z-index:5;
opacity:1;
transiton-property:opacity,bottom;
animation:wave1 90s infinite;
-webkit-animation:wave1 90s infinite;
}
#banner_wave_2 {
width:auto;
height:80px;
background:url("https://cdn.jsdelivr.net/gh/yremp/resource@2.0/img/other/wave2.png") repeat-x;
_filter:alpha(opacity=80);
position:absolute;
bottom:0;
width:400%;
left:0;
z-index:4;
opacity:1;
transiton-property:opacity,bottom;
animation:wave2 90s infinite;
-webkit-animation:wave2 90s infinite;
}
.banner_wave_hide,.banner_wave_hide_fit_skin {
opacity:0 !important;
bottom:-999px !important
}
@media(max-width:860px) {
#banner_wave_1,#banner_wave_2 {
display:inline-block;
}
@-webkit-keyframes wave1/*Safari and Chrome*/
{
0% { left:-750px;bottom:-2px}
50%{ left:0px;bottom:0px}
100%{ left:-750px;bottom:-2px}
}
@-webkit-keyframes wave2
{
0% { left:-750px}
50%{ left:0px}
100%{left:-750px}
}
@keyframes wave1/*Safari and Chrome*/
{
0% { left:-750px;bottom:-2px}
50%{ left:0px;bottom:0px}
100%{ left:-750px;bottom:-2px}
}
@keyframes wave2
{
0% { left:-750px}
50%{ left:0px}
100%{left:-750px}
}
#banner_wave_1 {
width:auto;
height:65px;
background:url("https://cdn.jsdelivr.net/gh/yremp/resource@2.0/img/other/wave1.png") repeat-x;
_filter:alpha(opacity=80);
position:absolute;
bottom:0;
width:400%;
left:750px;
z-index:5;
opacity:1;
transiton-property:opacity,bottom;
animation:wave1 90s infinite;
-webkit-animation:wave1 60s infinite;
}
#banner_wave_2 {
width:auto;
height:80px;
background:url("https://cdn.jsdelivr.net/gh/yremp/resource@2.0/img/other/wave2.png") repeat-x;
_filter:alpha(opacity=80);
position:absolute;
bottom:0;
width:400%;
left:0;
z-index:4;
opacity:1;
transiton-property:opacity,bottom;
animation:wave2 90s infinite;
-webkit-animation:wave2 60s infinite;
}
}查看效果
3.2 首页下拉小箭头
这个之前也是写过的，这里仍然再写一次，首先在Sakura主题文件 layouts下面imgbox.php添加如下代码
<div class="headertop-down faa-float animated" onclick="headertop_down()"><span><i class="fa fa-chevron-down" aria-hidden="true"></i></span></div>添加位置如下图所示：
然后在style.css里面加入下面的css代码：
/* 首页下拉箭头样式*/
.headertop-bar::after {
content: '';
width: 150%;
height: 4.375rem;
background: #fff;
left: -25%;
bottom: -2.875rem;
border-radius: 100%;
position: absolute;
z-index: 4;
}
.headertop-down {
position: absolute;
bottom: 50px;
left: 50%;
cursor: pointer;
z-index: 5;
}
@media (max-width: 860px) {
.headertop-down {
display: none
}
}
.headertop-down i {
font-size: 28px;
color: #fff;
-ms-transform: scale(1.5,1); /* IE 9 */
-webkit-transform: scale(1.5,1); /* Safari */
transform: scale(1.5,1); /* Standard syntax */
}
然后在sakura-app.js 里面加入下面的js代码实现点击下拉效果
/* 首页箭头下拉效果 */
function headertop_down() {
var coverOffset = $('#content').offset().top;
$('html,body').animate({
scrollTop: coverOffset
},
600);
}添加位置在最后就ok
添加完成更新一下文件就可以看到效果了
3.3 白猫同款看板娘
这个看板娘其实是美化过的，我也是找了很长时间才找到，自己之前也没画过一个wordpress 看板娘插件，但是前端水平和php水平有限，效果不是很好。关于wordpress sakura主题看板娘我之前也已经写过一个文章，这里仍然再写一次。并且顺便修改了一下live2d看板娘的tips.json,之前的1.0版本是直接用的被人的，json里面有别人自定义的tips，我修改恢复成比较公正（没有夹带私货）。一起来看看把。这里放上之前写的教程：【Sakura博客主题添加Live2D看板娘】，我这里直接上上主要教程，关于使用 【GitHub+Jsdelivr自建CDN】建议大家也去看一下。
在footer.php加入下面的代码：
<script src="https://cdn.jsdelivr.net/gh/yremp/live2d@2.0/autoload.js"></script>参考位置：
保存更新一下文件，查看效果：
之前的教程说要引入fontawesome的css外链，因为主题本身已经引入了，所以其实没必要再加上了。如果其他主题则可能需要引入。
3.4 网页樱花飘落特效
这个樱花飘落特效和live2d看板娘一样需要在footer.php加入下面的js外链
<script src="https://cdn.jsdelivr.net/gh/yremp/yremp-js@1.5/sakura.js"></script>加入的位置可以参考我，如下图所示：
保存更新一下文件，查看效果：
3.5 底部logo
这个一开始没打算写的，但是群里有人问，就顺便写一下算了。没什么太难的地方，一起来看看吧！
这个是在主题的 footer.php,里面，把原来 <div class=“footer-device"> 替换成我下面的部分，然后自己再DIY一下就可以了。
<div class="footer-device">
<p style="font-family: 'Ubuntu', sans-serif;">
<span style="color: rgba(0,0,0,.4);font-size:16px">
<!-- 备案信息 -->
© 2019 Yremp <a href="http://www.beian.miit.gov.cn/" target="_blank" style="color: rgba(0,0,0,.4);;text-decoration:none">陕ICP备19014014号</a>
</p>
<!-- 底部图标 -->
<a href="https://www.aliyun.com/" target="_blank" alt="ALiYun" rel="nofollow">
<img src="https://yremp.live/wp-content/uploads/2019/07/aliyun.png" alt="aliyun" style="height: 1.7em; max-height: 1.8em;padding-bottom: 0px;">
</a>
<a href="https://www.jsdelivr.com/" target="_blank" alt="Free CDN" rel="nofollow">
<img src="https://www.yremp.live/images/2019/08/17/JsDelivr_Logo0bd9a.png" alt="jsDelivr" style="height: 2em; max-height: 2em;padding-bottom: 0px;">
</a>
<a href="https://github.com/" target="_blank" alt="Github" rel="nofollow">
<img src="https://yremp.live/wp-content/uploads/2019/07/Github.png" alt="github" style="height: 2.2em; max-height: 2.5em;padding-bottom: 0px;">
</a>
<a href="https://2heng.xin" target="_blank" alt="Mashiro" rel="nofollow">
<img src="https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.8/img/logo/mashiro-logo.png" alt="Mashiro" style="height: 2.5em; max-height: 2em;padding-bottom: 0px; margin-bottom:0.2em">
</a>
</div>大家可以根据我的代码修改内容，具体的图标需要去网上寻找资源，找到合适logo， 下面是我替换后的效果 ：
3.6 关于|botui自动对话
白猫的关于页面有一个自动对话机器人，感觉还是挺有趣，下面给大家介绍一下，这是修改后教程，简单很多。
首先是去新建一个 “关于”页面，如下：
按照图中步骤添加一个html区块
在自定义html中加入下面的代码：（部分根据自己 需求 修改）
<div class="entry-content">
<div class="moe-mashiro" style="text-align:center; font-size: 50px; margin-bottom: 20px;">[さくら荘の白猫]</div>
<div id="hello-mashiro" class="popcontainer" style="min-height: 300px; padding: 2px 6px 4px; background-color: rgba(242, 242, 242, 0.5); border-radius: 10px;">
<center>
<p>
</p>
<h4>
与 <ruby>
Mashiro <rp>
（</rp>
<rt>
真（ま）白（しろ）</rt>
<rp>
）</rp>
</ruby>
对话中...</h4>
<p>
</p>
</center>
<bot-ui></botui>
</div>
</div>
<script src="/wp-content/themes/Sakura-master/js/botui.js"></script>
<script>
bot_ui_ini()
</script>上面/wp-content/themes/Sakura-master/js/botui.js 内容是主要是对话内容，就不详细展开，直接给你们文件，自己下载下来修改里面的对话内容，按照上面路径放到主题文件夹下面就可以了。
下载修改以后放到如下图所示位置：
之后打开这个页面即可查看效果
4.插件推荐篇
4.1 WP Statistics
这是一款统计插件，sakura主题也是可以配合这个插件做统计。
4.2 WP Mail SMTP
这是SMTP插件，邮件发送需要此插件
4.3 Yoast SEO
SEO 插件，我一直用的这个做SEO优化
4.4 Page Loader
页面预加载动画插件，添加过渡动画
4.5 Google Fonts Typography
Google字体排版 ，可以修改主题的字体，让主题不再单调
4.6 Wechat Social
社交网络快捷登录插件，快速接入QQ、微博等登陆方式
插件暂时先介绍这些，都是我比较常用的插件，大家可以根据自己的需求安装其他插件。
5.参考|推荐教程
5.1. logo制作
在上面基本使用篇第一个logo制作，并非我自己摸索，而是参考了 阿才的 https://hyacm.com/acai/ui/143/sakura-logo/ 这篇文章而完成的教程。
5.2 Sakura 手机端优化
教程地址： https://fz6m.com/136
5.3 Sakura QQ号显示错误
教程地址： https://fz6m.com/149
5.4 Sakura 背景美化
教程地址： https://fz6m.com/158
5.5 Sakura文章列表美化
教程地址： ttps://fz6m.com/175
6.欢迎反馈问题
教程是我花了差不多两天时间完成，可能仍然有不足之处或者错误，欢迎大家反馈指正，同时也欢迎大家留言提交比较好的wordpress sakura主题使用|美化教程，让更多人能看到各位的作品。后续有好的教程我会继续补充。
标签云
ajax AOP Bootstrap cdn Chevereto CSS Docker Editormd GC Hexo IDEA IPA JavaScript jsDeliver JS樱花特效 JVM Linux markdown Maven MyBatis MyBatis-plus MySQL Pictures Sakura SEO shadowrocket Spring Boot Spring Cloud Spring Cloud Alibaba SpringMVC SSR Thymeleaf V2ray Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运 苹果iOS国外账号 苹果IOS账号
Comments | 45 条评论
博主您好，我看到您的代码块上方显示“text”，而我的代码块只有“markdown”格式，我最近想要放置python代码，不知道代码块要怎么设置，我附上了我的邮箱，希望博主看的话能教我一下
大佬,时间错误的问题可以说一下吗
谢谢分享经验，非常感谢