Varinat主题优化几个问题

不得不说，我很爱折腾；这主题几年前的了，如今用起来效果还是很不错哇，不过总是有些地方不符合我的要求。

上篇文章也解决了这个主题的两个大问题，这篇文章就写下几个细节的优化

1、顶部区域添加博客名称
2、菜单栏弹出样式修改
3、分类目录页面添加标题
4、文章列表前置增加图标
5、搜索弹出层优化样式
6、首次点击下一页js调整

顶部区域添加博客名称，修改主题文件下面的各个模板文件，添加一行代码

html代码
···
<div class="inner">
     <p class="title"><span>靳闯博客</span></p>
</div>
····
CSS样式代码
添加到style.css最下面即可
.title{position: relative;top: 30%;color: white;font-size: 36px;}
.title span:hover{border-radius:5px;padding:4px 10px;box-shadow: 0px 0px 40px white;}
@media screen and (max-width:719px){.title{top:20%}}

效果图：

 

菜单栏弹出优化样式

效果图：

分类目录页面优化细节，增加页面标题

修改archive.php模板文件，增加一行
······
<div class="wrapper">
     <h1 class="post-title">
         <?php wp_title(); ?>
</h1>
······

效果图：

文章列表前置优化图标，增加文章形式（日志、相册、图形、视频、链接）图标

#修改functions.php，注释掉原有代码，添加新的代码
······
//给WordPress添加文章形式
//add_theme_support( 'post-formats', array( 'status', 'audio' ) );
add_theme_support( 'post-formats', array( 'aside', 'chat','gallery','image','link', 'quote', 'status', 'video', 'audio' ) );
······

主题默认用的iconfont图标文件，但是图标比较少种类不全，我就添加了需要图标替换原来的字体图标，增加后的图标文件下载：iconfont.tar

#修改style.css文件，增加新的图标演示
.icon-x:before {content: "\78";}
.icon-uniE600:before {content: "\e600";}
.icon-uniE601:before {content: "\e601";}
.icon-uniE602:before {content: "\e602";}
.icon-uniE603:before {content: "\e603";}
.icon-uniE604:before {content: "\e604";}
.icon-uniE605:before {content: "\e605";}
.icon-uniE606:before {content: "\e606";}
.icon-uniE607:before {content: "\e607";}
.icon-uniE608:before {content: "\e608";}
.icon-uniE609:before {content: "\e609";}
.icon-uniE60A:before {content: "\e60a";}
.icon-uniE60B:before {content: "\e60b";}
.icon-uniE60C:before {content: "\e60c";}
.icon-uniE60D:before {content: "\e60d";}
.icon-uniE60E:before {content: "\e60e";}
.icon-uniE60F:before {content: "\e60f";}
.icon-uniE610:before {content: "\e610";}
.icon-uniE611:before {content: "\e611";}
.icon-uniE612:before {content: "\e612";}
.icon-uniE613:before {content: "\e613";}
.icon-uniE614:before {content: "\e614";}
.icon-uniE615:before {content: "\e615";}
.icon-uniE616:before {content: "\e616";}
.icon-uniE617:before {content: "\e617";}
.icon-uniE618:before {content: "\e618";}
.icon-shipin:before {content: "\e620";}
.icon-xiangce:before {content: "\e621";}
.icon-heart:before {content: "\e625";}
.icon-lianjie-:before {content: "\e636";}
.icon-rizhi2:before {content: "\e622";}
.icon-tuxiang3:before {content: "\e624";}
.icon-rizhi:before {content: "\e623";font-size:34px;}

创建对应的模板文件，比如日志形式：excerpt-aside.php
······
<li class="post">
<div class="type">
<div class="mask">
<!-- 修改此处对应的图标类名即可 -->
<i class="iconfont icon-rizhi"></i>
</div>
</div>
<h2 class="no-background" style="color: #666666">
<span>
<a href="<?php the_permalink(); ?>"><?php the_title_attribute(); ?></a>
</span>
<div class="post-time">
<?php the_time('Y-m-d') ?>
</div>
</h2>
<div class="post-category">
<?php the_category(', ') ?>
</div>
</li>
······

修改主题原有的模板代码替换为下面代码，需要修改的文件：index.php，archive.php，search.php
······
<?php if( has_post_format( 'aside' )) { //日志 ?>
<?php include( 'includes/excerpt-aside.php' );?>
<?php } else if( has_post_format( 'status' )) { //状态 ?>
<?php include( 'includes/excerpt-status.php' );?>
<?php } else if ( has_post_format( 'image' )) { //图像 ?>
<?php include( 'includes/excerpt-image.php' );?>
<?php } else if ( has_post_format( 'link' )) { //链接 ?>
<?php include( 'includes/excerpt-link.php' );?>
<?php } else if ( has_post_format( 'video' )) { //视频 ?>
<?php include( 'includes/excerpt-video.php' );?>
<?php } else if ( has_post_format( 'audio' )) { //音频 ?>
<?php include( 'includes/excerpt-audio.php' );?>
<?php } else{ //标准 ?>
<?php include( 'includes/excerpt.php' );?>
······

效果图：

首次点击下一页 js效果调整

调整前：默认点击后需要上下滚动操作才会加载下一页的内容
调整后：点击后立马加载下一页内容

修改srcipt.js文件

#修改后的代码：
$('.js-next a').on('click', function (e) {
$(infinite_scroll.contentSelector).infinitescroll(infinite_scroll);

var $body = $('html,body');
$body.scroll;
$body.scrollTop($body.scrollTop() - 1);

e.preventDefault();
})