网站主题界面功能优化!

松鼠小

发表文章数:103

松鼠工具箱

一个汇集海量优质在线工具网站的精美网址导航。

立即查看
首页 » WordPress » 网站主题界面功能优化!

给大家介绍一些网站优化方法,可适用于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/

现分享网友的优化版:https://songzifx.lanzous.com/iHBRahh9buj" target=_blank title="下载地址" rel=nofollow>

选择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/4628.html

插件版本: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);
}

转载请注明出处: 转载或复制请以 超链接形式 并注明出处 技术松鼠
原文地址:《网站主题界面功能优化!》 作者:松鼠小,发布于2020-10-17

分享到:
赞(0) 打赏

评论 抢沙发

评论前必须登录!

  注册



这里木有人,抢个沙发呗 o(๑◕ ▽ ◕๑)~


长按图片转发给朋友

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

支付宝扫一扫打赏

微信扫一扫打赏

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

登录

忘记密码 ?

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

切换登录

注册