Sakura主题优化教程

松鼠小

发表文章数:82

松子工具箱

站长开发的集阅读、音乐、影视、工具等功能的安卓应用。

查看详情
首页 » WordPress » Sakura主题优化教程

Sakura主题是 Mashiro 在 Louie 基于 Fuzzz 的 Akina 主题修改的 Siren 主题基础上三次修改的。它有 WordPress 和 hexo 两个版本。笔者使用 WordPress 版本,感觉主题很优秀,但也有些不足。下面介绍我的主题优化经验。

一、增加悬浮按钮

样式如下:

Sakura主题优化教程

悬浮/点击变色

Sakura主题优化教程

所需图片

代码如下:

<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 type="text/javascript">
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>

二、下载按钮优化

Sakura主题优化教程 Sakura主题优化教程

原按钮除了比较大,在夜间模式还会变成一大块(颜色重叠)

感觉应该优化后的按钮要好看一些,实现方法:

在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/

Sakura主题优化教程

另外可以选择不延时加载

Sakura主题优化教程

(3)首页头图

在themes/Sakura/manifest/gallary内增删图片

Sakura主题优化教程

2、页脚跳动颜文字

花了一点时间在别人的css里面扣出来了 Sakura主题优化教程

<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主题优化教程

转载请注明出处:作者:松鼠小, 转载或复制请以 超链接形式 并注明出处 技术松鼠
原文地址:《Sakura主题优化教程》 发布于2020-10-23

分享到:
赞(0) 打赏

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册