![](https://cdn.jishusongshu.com/images/2020/10/sakfc.jpg)
Sakura主题是 Mashiro 在 Louie 基于 Fuzzz 的 Akina 主题修改的 Siren 主题基础上三次修改的。
它有 WordPress 和 hexo 两个版本。官网:https://2heng.xin/theme-sakura/
笔者使用 WordPress 版本,感觉主题很优秀,但也有些不足。下面介绍主题优化经验。
一、增加悬浮按钮
样式如下:
悬浮/点击变色
所需图片
代码如下:
<div id="share">
<a id="btn-top" title="回顶部"><i class="fa fa-chevron-up" aria-hidden="true"></i></a>
<a class="fgzh" onclick="showgzh()" title="公众号"></a>
<?php if((!is_home()) && (!is_user_logged_in()) && (!wp_is_mobile())) { ?>
<img id="qr_img" src="https://www.jishusongshu.com/images/qr_img.png" style="display:block">
<?php }else{ ?>
<img id="qr_img" src="https://www.jishusongshu.com/images/qr_img.png" >
<?php } ?>
<a href="https://jq.qq.com/?_wv=1027&k=5KYuhQa" target="_blank" class="tencent" title="加QQ群"></a>
<a class="mnpg" onclick="showpg()" title="小程序"></a>
<img id="pg_img" src="https://www.jishusongshu.com/images/pg_img.png" >
<a class="tocomment" title="留言"></a>
</div>
样式代码:
#share{position:fixed;bottom:70px;right:27px;width:30px;zoom:1;z-index:99;}
#share a{background-image:url(https://www.jishusongshu.com/images/share.png);background-repeat:no-repeat;display:block;width:47px;height:47px;overflow:hidden;text-indent:-999px;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
#share .mnpg{background-position:0 0;position:absolute;bottom:0px;border-radius:12px;cursor: pointer;box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);}
#share a.mnpg:hover{background-position:-48px -2px;border-radius:12px;}
#share .tencent{background-position:-1px -48px;position:absolute;bottom:110px;border-radius:12px;cursor: pointer;box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);}
#share a.tencent:hover{background-position:-48px -48px;}
#share .fgzh{background-position:0px -96px;position:absolute;bottom:55px;border-radius:12px;cursor: pointer;box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);}
#share a.fgzh:hover{background-position:-48.5px -96px;}
#share .tocomment{background-position:-1px -144px;position:absolute;bottom:165px;border-radius:12px;cursor: pointer;box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);}
#share a.tocomment:hover{background-position:-48px -144px;}
#share #btn-top{background-position:0px -192px;position:absolute;bottom:220px;border-radius:12px;cursor: pointer;box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);}
#share a#btn-top:hover{background-position:-48px -192px;}
#qr_img{position:absolute;bottom:72px;left:-183px;display:none;max-width: 300px;z-index:9999}
#pg_img{position:absolute;bottom:20px;left:-183px;display:none;max-width: 300px;z-index:9997}
#moblieGoTop{display:none;}
JS函数:
1、点击显示图片
<script>
function showpg(){
if(document.getElementById("pg_img").style.display=="block"){
document.getElementById("pg_img").style.display="none";
}
else{
document.getElementById("pg_img").style.display="block";
}
if(document.getElementById("qr_img").style.display=="block"){
document.getElementById("qr_img").style.display="none";
}
}
function showgzh(){
if(document.getElementById("qr_img").style.display=="block"){
document.getElementById("qr_img").style.display="none";
}
else{
document.getElementById("qr_img").style.display="block";
}
if(document.getElementById("pg_img").style.display=="block"){
document.getElementById("pg_img").style.display="none";
}
}
</script>
2、点击渐滚到顶部(评论)
<script type="text/javascript">
jQuery(document).ready(function($){
$('#share .tocomment').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});
});
jQuery(document).ready(function($){
$('#share #btn-top').click(function(){$('html,body').animate({scrollTop:$('#page').offset().top}, 800);});
});
</script>
二、下载按钮优化
原按钮除了比较大,在夜间模式还会变成一大块(颜色重叠)
感觉应该优化后的按钮要好看一些,实现方法:
在functions.php文件第778行修改
// 下载按钮
function download($atts, $content = null)
{
return '<a href="' . $content . '" target=_blank title="下载地址" rel=nofollow><button type="button" class="srdown"><i class="fa fa-download"></i>文件下载</button></a>';}
add_shortcode("download", "download");
添加按钮样式:
.srdown {
border-radius: 5px;
color: #ffffff!important;
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
padding: 10px 15px;
background-color: #0084FF;
text-decoration: none!important;
text-indent: 0!important;
}
三、其他界面优化
1、图像加载问题
(1)图片懒加载
若遇到图片加载不出,可关闭图片懒加载:【其他】-【文章内图片启用 lazyload】不勾选
(2)头像加载
若头像加载失败,可以另选代理,比如:cn.gravatar.com/avatar/
另外可以选择不延时加载
(3)首页头图
在themes/Sakura/manifest/gallary内增删图片
2、页脚跳动颜文字
花了一点时间在别人的css里面扣出来了
<span class="my-face">(●'◡'●)ノ</span>
.my-face{animation: my-face 5s infinite ease-in-out;display: inline-block;margin: 0 5px}@keyframes my-face{2%{transform: translate(0,1.5px) rotate(1.5deg)}4%{transform: translate(0,-1.5px) rotate(-0.5deg)}6%{transform: translate(0,1.5px) rotate(-1.5deg)}8%{transform: translate(0,-1.5px) rotate(-1.5deg)}10%{transform: translate(0,2.5px) rotate(1.5deg)}12%{transform: translate(0,-0.5px) rotate(1.5deg)}14%{transform: translate(0,-1.5px) rotate(1.5deg)}16%{transform: translate(0,-0.5px) rotate(-1.5deg)}18%{transform: translate(0,0.5px) rotate(-1.5deg)}20%{transform: translate(0,-1.5px) rotate(2.5deg)}22%{transform: translate(0,0.5px) rotate(-1.5deg)}24%{transform: translate(0,1.5px) rotate(1.5deg)}26%{transform: translate(0,0.5px) rotate(0.5deg)}28%{transform: translate(0,0.5px) rotate(1.5deg)}30%{transform: translate(0,-0.5px) rotate(2.5deg)}32%{transform: translate(0,1.5px) rotate(-0.5deg)}34%{transform: translate(0,1.5px) rotate(-0.5deg)}36%{transform: translate(0,-1.5px) rotate(2.5deg)}38%{transform: translate(0,1.5px) rotate(-1.5deg)}40%{transform: translate(0,-0.5px) rotate(2.5deg)}42%{transform: translate(0,2.5px) rotate(-1.5deg)}44%{transform: translate(0,1.5px) rotate(0.5deg)}46%{transform: translate(0,-1.5px) rotate(2.5deg)}48%{transform: translate(0,-0.5px) rotate(0.5deg)}50%{transform: translate(0,0.5px) rotate(0.5deg)}52%{transform: translate(0,2.5px) rotate(2.5deg)}54%{transform: translate(0,-1.5px) rotate(1.5deg)}56%{transform: translate(0,2.5px) rotate(2.5deg)}58%{transform: translate(0,0.5px) rotate(2.5deg)}60%{transform: translate(0,2.5px) rotate(2.5deg)}62%{transform: translate(0,-0.5px) rotate(2.5deg)}64%{transform: translate(0,-0.5px) rotate(1.5deg)}66%{transform: translate(0,1.5px) rotate(-0.5deg)}68%{transform: translate(0,-1.5px) rotate(-0.5deg)}70%{transform: translate(0,1.5px) rotate(0.5deg)}72%{transform: translate(0,2.5px) rotate(1.5deg)}74%{transform: translate(0,-0.5px) rotate(0.5deg)}76%{transform: translate(0,-0.5px) rotate(2.5deg)}78%{transform: translate(0,-0.5px) rotate(1.5deg)}80%{transform: translate(0,1.5px) rotate(1.5deg)}82%{transform: translate(0,-0.5px) rotate(0.5deg)}84%{transform: translate(0,1.5px) rotate(2.5deg)}86%{transform: translate(0,-1.5px) rotate(-1.5deg)}88%{transform: translate(0,-0.5px) rotate(2.5deg)}90%{transform: translate(0,2.5px) rotate(-0.5deg)}92%{transform: translate(0,0.5px) rotate(-0.5deg)}94%{transform: translate(0,2.5px) rotate(0.5deg)}96%{transform: translate(0,-0.5px) rotate(1.5deg)}98%{transform: translate(0,-1.5px) rotate(-0.5deg)}0%,100%{transform: translate(0,0) rotate(0deg)}}
拿走,不谢
附
件
下
载
文件名称:sakura-3.4.0
适用版本:WordPress
更新日期:2021-08-01
文件大小:9.63 M
提示:遇问题或链接失效请联系站长,本站欢迎捐赠!
![](http://img.szfx.top/banner/soft-banner.jpg?x-oss-process=style/wp)
![](https://cdn.jishusongshu.com/banner/banner-bottom.jpg?x-oss-process=style/wp)
Invitation
QQ Group
1095632335
created:04/01/2020
Welcome to the Group
Use this card to join us and participate in a pleasant discussion together .
Welcome to JISHUSONGSHU Group,wish you a nice day .