Sakura主题优化教程

118 2 2020年10月23日

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

提示：遇问题或链接失效请联系站长，本站欢迎捐赠！

点击下载

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 .

使用 CardLink 库生产卡片式链接

使用 CardLink 库生产卡片式链接

[WordPress]懒加载插件a3 Lazy Load

[WordPress]懒加载插件a3 Lazy …

留言添加访客操作系统及浏览器

网站用户显示QQ头像（加密），…

[WordPress]免费夜间模式插件DarkLooks

[WordPress]免费夜间模式插件Da…

# Sakura主题# 网站主题优化
×