Sakura ?  之前咕的Hexo Sakura主题使用手册,对很多刚入门的小伙伴应该还是有所帮助的,这次写wordpress sakura主题的下载安装、使用和美化教程,主要分为三部分:1.下载安装篇 2.基础使用篇 3..进阶美化篇。基本使用篇是wordpress sakura主题标准演示自身集成的功能介绍,进阶美化篇是自己自定义的一部分(非主题集成)。 文章内容可能会比较多,建议根据右边目录索引查看。

重要通知

现在强烈推荐 Sakurairo 主题 ,主题内置很多像live2d看板娘、首页波浪和箭头等等,如果你是小白或者觉得修改代码比较难建议去看看我最新的 WordPress 主题 Sakurairo? ,可以满足你99%的需求,满足不了可以加群联系作者。

官方地址

  1. 白猫主题介绍
  2. Wordpress Sakura主题仓库
  3. Wordpress Sakura主题社区
  4. Wordpress Sakura主题演示站
  5. 我此次教程编写修改美化站点
  6. Wordpress Sakura主题QQ群:860262481

DIY说明

在自己修改主题涉及css和js,请大家去wordpress 后台 sakura主题设置里面开启本地css和js调用(默认是CDN),不然你修改本地css和js也没有效果,请根据下面步骤开启。

wordpres sakura主题

1.下载安装篇

考虑到有部分人可能对wordprss不熟悉,所以还是会简单的写一下这个下载和安装。

1.1 安装wordpress

首先你需要在服务器上安装wordpress程序,这是基础。可以看看我之前的【wordpress安装教程】(基于宝塔面板,上手最快),也可以自行百度完成wordpress的安装。

1.2 下载 sakura主题

Wordpress Sakura主题仓库下载主题文件,新手推荐下载压缩包:

wordpres sakura主题
wordpres sakura 下载

1.3 上传安装主题

在wordpress后台外观->主题里面上传下载的压缩包

wordpres sakura主题
wordpres sakura主题

1.4 启用主题

安装完成之后,在主题管理里面启用wordpress sakura主题

wordpres sakura主题
启用wordpress sakura主题
wordpres sakura主题
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;
}

如下图所示:

wordpres sakura主题

然后在sakura主题文件的header.php

wordpres sakura主题
修改这个文件方法很多,ftp、宝塔在线编辑、进入服务器vim都是可以的

加入代码如图所示的代码圈起来的是需要加进去的(上方注释掉是原来的代码)

wordpres sakura主题

下面给出我修改后这一部分主要代码(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 -->

更新修改过的代码,就可以看到效果了。

wordpres sakura主题

我自己已经将别人的字体css复制过来了,字体设置可以查看上面的原文地址设置一下,这里时间原因就不细说了。

2.2 顶部导航栏

顶部导航栏的添加编辑其实是属于wordpress的基础使用,是wordpress的通用功能,在外观 -菜单里面设置:

wordpres sakura主题
刚刚搭建的wordpress默认的

下面教大家如何添加一个有图标的导航栏,

wordpres sakura主题

就用默认的Menu 1直接创建一个导航菜单,并且将显示位置修改为导航菜单,然后保存,具体如下图:

wordpres sakura主题

然后访问你的博客首页,查看效果:

wordpres sakura主题

可以看到首页已经出现了,但是并没有图标,如我的博客首页:

wordpres sakura主题

下面教大家如何加上去,在菜单中找到首页对应的选项,打开它的属性部分:

wordpres sakura主题
展开首页这个菜单的属性

将导航标签修改为下面的内容:

<i class="fa fas fa-home fa-1x"></i>  首页

如图所示:

wordpres sakura主题

然后去首页查看效果,可以看到效果啦

wordpres sakura主题

图标是用的Fontawesome的图标库,css主题已经引入了,可以直接复制标签使用

wordpres sakura主题

这就是wordpress sakura主题的导航栏教程。

2.3 封面图和效果

这个在sakura主题设置里面

wordpres sakura主题

保存后查看效果

wordpres sakura主题

补充:这里讲一下多张图片切换问题,因为我自己一般都是默认使用一张图作为封面,一开始写教程没考虑到这个问题,补一下。

将自己想要使用的多张图片放到主题文件下的 /manifest/gallary/ 下面如下图:

然后在主题 第一屏 中开启 内置随机图:

查看一下随机效果

随机图1
随机图2

顶部图片效果仍然在第一屏设置里面可以看到背景图滤镜设置

wordpres sakura主题

修改完查看效果

wordpres sakura主题

2.4 头像设置

头像设置在sakura主题设置中基本设置里面

wordpres sakura主题

个人头像logo和文字版logo效果分别如下

头像版
wordpres sakura主题
文字版

2.5 个人描述

sakura主题设置 -基本设置里面,如下图所示:

wordpres sakura主题

效果查看

wordpres sakura主题

2.6 社交栏

社交栏在sakura主题设置里面有专门的设置 社交网络,如图:

wordpres sakura主题

这里演示我就先随便填几个查看一下效果吧!

wordpres sakura主题

2.7 网站公告

在sakura主题设置 其他里面可找到如下设置

wordpres sakura主题

修改后可查看效果

wordpres sakura主题

2.8  Discovery 设置

在sakura主题设置的 第一屏 可找到相关设置

wordpres sakura主题

我先随便修改一下,看看效果

wordpres sakura主题

2.9 文章相关设置

文章页的相关设置在 Sakura主题设置的文章页设置里面:

wordpres sakura主题

建议大家自己全部看一下,然后关于首页文章显示的两中模式介绍一下,图文模式和标准模式:在 基本设置 里面可以找到相关设置

wordpres sakura主题

下面是两种模式的效果演示:

wordpres sakura主题
标准模式圆形特色图
wordpres sakura主题
标准模式方形图
wordpres sakura主题
图文模式左右交替(只有一个看不出来)...

其他几种设置自己试试把,这里不一一演示了。

2.10 左下角播放器歌单设置

播放器设置在sakura主题设置里面的 其他 里面

wordpres sakura主题

网易云歌单id获取打开网易云音乐网页版的具体一个歌单,在地址栏可以获取到:

wordpres sakura主题

把这个id填进去就可以用自己的网易云歌单了。

2.11 友链页面设置

友链其实是主题自带的功能,只不过主题文档并没有详细说,很多人是新手对wordpress不太熟悉,就很容易找不到。要想开启一个友链页面,首先在wordpress后台点击页面,然后新建一个页面,并在页面属性选择links模板

wordpres sakura主题

设置一下特色图,然后发布

wordpres sakura主题

从上面的固定链接查看一下这个页面

wordpres sakura主题

可以看到什么都没有,只有一个特色图,我们去链接里面添加一个友链,如下图:

wordpres sakura主题

添加友链基本数据设置

wordpres sakura主题
友链设置第一页
wordpres sakura主题
友链设置第二页
wordpres sakura主题
友链设置第三页

现在一个友链基本设置完成,点击添加链接保存一下;

wordpres sakura主题

再访问友链页面查看效果:

wordpres sakura主题

然后再按照之前的导航栏教程,把这个添加到导航栏即可

wordpres sakura主题

首页查看导航栏

wordpres sakura主题

至此友链的相关基本介绍完成了,大家可以根据自己需要去修改。

2.12 时光轴设置

时光轴设置基本和友链类似,只需要去新建一个页面,模板选择为时光轴即可

wordpres sakura主题

发布后查看效果:

wordpres sakura主题

去导航栏添加一下:

wordpres sakura主题

查看效果

wordpres sakura主题

如果你是直接跳到这里,不知道怎么添加导航icon(图标),可以去上面看看导航栏教程。

2.13 文章目录索引

这里我就以我这篇文章为例,只需要在文章任意区块加入 toc 标签即可,如下图所示:

wordpres sakura主题

阅览查看效果

wordpres sakura主题

这个比较简单,没有太多好说的

2.14 文章首字大写

文章首字母大写也是wordpress sakura主题自带的功能,使用也比较简单将要大写的字放入 标签对 即可,以我这篇文字为例给大家截图演示:

wordpres sakura主题

预览查看效果

wordpres sakura主题

2.15 主题基本色调

这个其实说的有点晚,但是还是顺带提一下,这个在sakura 主题设置的基本设置里面可以设置,如下图所示:

wordpres sakura主题

2.16 主题评论设置

这个是在skaura主题设置的 其他 设置中

wordpres sakura主题

下面还有UA信息设置开关

wordpres sakura主题

开启之后可以评论一下查看效果

wordpres sakura主题

2.17 邮件相关设置

wordpress sakura主题是带邮件功能,但是需要配合邮件开启SMTP才能使用,先介绍一下如何开启邮件功能。

首先需要安装一个插件 WP Mail SMTP (我自己用的这个,也有其他类似插件)下面会给两个下载地址,一个是官方商城,另外一个上传到可道云,因为国内有的时候是访问不了wordpress 官网,wordpress后台插件商城也用不了,需要代理才能正常访问。

  1. wordpres 官方插件商城
  2. 本地下载(推荐)

安装完插件如下图所示,并且启用插件

wordpres sakura主题

开始设置插件相关数据,下面我以QQ邮件配置为示例

wordpres sakura主题 SMTP
截图1

SMTP主机填写:smtp.qq.com

wordpres sakura主题 SMTP
截图3

上面有一点需要注意,就是如果选用SSL 465端口,记得去服务器防火墙放行465端口

wordpres sakura主题 SMTP

填入SMTP密码然后保存,关于SMTP密码获取请往下面看。

下面给大家讲一下如何获取QQ邮箱SMTP密码,首先去QQ邮箱网页版

wordpres sakura主题 SMTP

点击设置,选择账户

wordpres sakura主题 SMTP

在下方找到 POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务点击生成授权码

wordpres sakura主题 SMTP

点击之后进行安全验证

wordpres sakura主题 SMTP

验证完成之后,就可以拿到授权码,也就是SMTP密码,如下图所示:

wordpres sakura主题 SMTP

复制一下,填到SMTP密码框中,如下图所示:

wordpres sakura主题 SMTP

然后保存一下设置。

这时候可以用插件的测试功能测试一下,SMTP是否配置成功,如下

wordpres sakura主题 SMTP

去邮箱查看邮件

wordpres sakura主题 SMTP

先去sakura 主题设置 其他 里面开启评论邮件回复

wordpres sakura主题

另外测试环境得设置一下评论审核等问题

wordpres sakura主题

评论通知测试

测试成功

关于邮件模板,这个是在sakura主题的functions.php下面,具体如下图

wordpres sakura主题 邮件

可以根据需要修改一些html风格和样式。下面是我自己博客的演示截图:

wordpres sakura主题 邮件

2.18 修改固定链接404

修改固定链接格式之后文章等页面会出现404错误,其实就是伪静态的问题。只需要在nginx的配置文件加入下面的伪静态规则:

 location / {
try_files $uri $uri/ /index.php?$args;
                }
rewrite /wp-admin$ $scheme://$host$uri/ permanent;

如果是宝塔面板可以有下面的两种方式:

1.直接在宝塔的伪静态规则里面加入即可
2.配置文件中加入亦可以

3.进阶美化篇

3.1 动态波浪效果

这个其实之前已经写过了,但是为了不让大家再打开一个网页这里就再写一次

首先去主题文件夹下面的header.php加入下面的两行代码:

<div id="banner_wave_1"></div>
<div id="banner_wave_2"></div>

位置可以参考我的,如下图所示:

wordpres sakura主题首页波浪

在主题下面的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;
 }
}

查看效果

wordpres sakura主题首页波浪

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

wordpres sakura主题首页箭头

添加完成更新一下文件就可以看到效果了

wordpres sakura主题首页箭头

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>

参考位置:

wordpres sakura主题看板娘

保存更新一下文件,查看效果:

wordpres sakura主题看板娘

之前的教程说要引入fontawesome的css外链,因为主题本身已经引入了,所以其实没必要再加上了。如果其他主题则可能需要引入。

3.4 网页樱花飘落特效

这个樱花飘落特效和live2d看板娘一样需要在footer.php加入下面的js外链

<script src="https://cdn.jsdelivr.net/gh/yremp/yremp-js@1.5/sakura.js"></script>

加入的位置可以参考我,如下图所示:

wordpres sakura主题樱花

保存更新一下文件,查看效果:

wordpres sakura主题樱花

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, 下面是我替换后的效果 :

wordpres sakura主题logo

3.6 关于|botui自动对话

白猫的关于页面有一个自动对话机器人,感觉还是挺有趣,下面给大家介绍一下,这是修改后教程,简单很多。

首先是去新建一个 “关于”页面,如下:

wordpres sakura主题

按照图中步骤添加一个html区块

wordpres sakura主题

在自定义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主题也是可以配合这个插件做统计。

wordpres sakura主题插件

4.2 WP Mail SMTP

这是SMTP插件,邮件发送需要此插件

wordpres sakura主题插件

4.3 Yoast SEO

SEO 插件,我一直用的这个做SEO优化

wordpres sakura主题插件

4.4 Page Loader

页面预加载动画插件,添加过渡动画

wordpres sakura主题插件

4.5 Google Fonts Typography

Google字体排版 ,可以修改主题的字体,让主题不再单调

wordpres sakura主题插件

4.6 Wechat Social

社交网络快捷登录插件,快速接入QQ、微博等登陆方式

wordpres sakura主题插件

插件暂时先介绍这些,都是我比较常用的插件,大家可以根据自己的需求安装其他插件。

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 Github Hexo IDEA JavaScript jsDeliver JS樱花特效 JVM Linux Live2D markdown Maven MyBatis MyBatis-plus MySQL Navicat Oracle Pictures QQ Sakura SEO Spring Boot Spring Cloud Spring Cloud Alibaba SpringMVC Thymeleaf Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运 通信原理

Wordpress Sakura?主题使用手册
Wordpress Sakura?主题使用手册