
给大家介绍一些网站优化方法,可适用于mkBlog主题等WP主题,大家可以借鉴思路,耐心折腾。
一、代码高亮
mkBlog主题自带白色仿Mac的样式
个人还是喜欢黑色背景的
/*浏览器蓝色滚动条样式(不适用Firefox)*/ ::-webkit-scrollbar {width: 8px;height: 8px;} ::-webkit-scrollbar-track {background-color: rgba(73,177,245,.2);border-radius: 2em;} ::-webkit-scrollbar-thumb {background-color: #49b1f5;background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);border-radius: 2em;} ::-webkit-scrollbar-corner {background-color: transparent;} ::-moz-selection {color: #fff;background-color: #49b1f5;}
实现方式:关闭主题自带的代码高亮
安装一个插件Pure Highlightjs(2016年的,据说不支持行号)
原项目地址:https://github.com/icodechef/Pure-Highlightjs/
选择Coy即可实现仿Mac暗色样式
缺点:受残留样式影响,部分字符显黑色,与背景重叠。
解决方法:添加样式
.entry-content code {color:#E6DB74;}
此外无主题自带的运行功能。
二、修改悬浮按钮
mkBlog原版只有三个按钮:后台,界面控制,回顶部
笔者这里添加了4个按钮:去评论,公众号,QQ群,小程序
这里讲解一下去评论和悬浮图片实现方法
1、去评论
<div class="corner-btn-group">这里是按钮区</div>
按钮区去评论按钮(非首页显示)
<? php if (!is_home()) : ?> <a id="theme-comt" title="留言" class="comt corner-btn"> <i class="fa fa-commenting" aria-hidden="true"></i> </a> <? php endif; ?>
添加移动到评论区的过渡动画
<script type="text/javascript"> jQuery(document).ready(function($){ $('#theme-comt').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);}); }); </script>
2、悬浮显示图片
添加小程序按钮
<a id="theme-mnpg" title="小程序" class="mnpg corner-btn"> <i class="fa fa-link" aria-hidden="true"></i> </a> <img class="pg_img" src="https://www.jishusongshu.com/images/pg_img.png" >
添加图片样式
.pg_img{position:absolute;bottom:80px;left:-183px;display:none;max-width: 300px;}
添加图片悬浮淡入(出)动画
<script type="text/javascript"> var $mnpg = $('.corner-btn-group #theme-mnpg'); var pgImg = $('.pg_img'); $mnpg.hover(function () { pgImg.fadeIn(); }, function(){ pgImg.fadeOut(); }); </script>
3、修改图标颜色
.corner-btn{background-color:#0084FF;border-color:#0084FF;} .corner-btn .fa{color:#fff;}
三、底部文章推荐条
原版概览(作者为张戈)
插件版本:https://zhang.ge/4718.html
插件集成了友情提示和界面随音乐抖动功能
笔者一开始是使用插件版的,发现手机端登录弹窗不显示。
据说是重复调用JS导致冲突,且手机端不显示底部推荐条。
于是直接用代码版本,手机端也可以显示,顺便将字体缩小。
@media screen and (max-width:750px){ .bulletin a{float:left;font-size: 10px;} .bulletin{height:20px;color:#fff;margin:0 0 0 5px;background:url(https://www.jishusongshu.com/images/bulletin.gif) no-repeat;min-height:20px;overflow:hidden} .bulletin li{height:23px;padding-left:25px} }
四、其他优化
优化手机端显示效果
1、缩小字体和图标
主要是标题和概述的font-weight、font-size
@media screen and (max-width:750px){ .corner-btn-group{right:0.5rem;bottom:1.8rem} #scroll-to-top.corner-btn{line-height:2.8em} .corner-btn{width:2.8em;height:2.8em;} .post-item-list .entry-title { line-height: 1.4; margin: 0; font-weight: 350; font-size: 1em;} .post-item-list .archive-content { font-size: .75em; height: 6em; margin: .8em 0; line-height: 2em;} }
2、(置顶)字体标签背景(蓝)
span.inline-tag { display: inline; padding: .2em .6em .3em; font-size: 90%; font-weight: 400; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .1rem; border-radius: 6px; background-color: var(--Color); } p.blue,span.blue { --Color: rgb(0, 132, 255); --ColorA: rgba(3, 169, 244, 0.2); }
使用方法:index.php特定位置替换
<span title="首页置顶" class="inline-tag blue">置顶</span>
附上其他颜色(红绿黄灰)
p.red,span.red { --Color: rgb(233, 30, 100); --ColorA: rgba(233, 30, 100, 0.2); } p.green,span.green { --Color: rgb(139, 195, 74); --ColorA: rgba(139, 195, 74, 0.2); } p.yellow,span.yellow { --Color: rgb(255, 193, 7); --ColorA: rgba(255, 193, 7, 0.2); } p.grey,span.grey { --Color: rgb(76, 76, 76); --ColorA: rgba(76, 76, 76, 0.2); }