低调与华丽wordpress V5.0版本置顶文章样式修改

很多朋友看到我博客置顶文章显示样式很好,希望我也可以将出售模板的置顶样式修改成我这样的,于是张力就将模板置顶样式做了一下修改,而今天这篇文章是为之前做过模板升级的朋友写的一个修改教程。

实际我们想将低调与华丽wordpress v5.0版本置顶文章的样式修改是很简单的,我们只需要修改一下CSS和index.php文件就可以了,下面我就来具体讲一下如何修改?

第一步:我们将以下CSS代码复制粘贴到模板样式表中。

#post-list-news{clear:both;margin:0px 5px 0px 13px;position:relative;overflow:hidden;background: url(images/sline.png) no-repeat 50% 100%;padding: 5px 0 12px;text-align: left;width:705px;}
#post-list-news h3{font-size:13px;font-weight:normal;}
#post-list-news li{float: left;width: 330px;background:url(images/hot.gif) 0 0 no-repeat;padding-left:22px; font-size:14px;}
#post-list-news li a{line-height: 28px;text-decoration:none;color:#F00;}
#post-list-news li a:hover{text-decoration: underline;color :#450A11;}

第二步:我们将以下DIV代码复制下来,然后去模板中找到相应的位置粘贴上就可以了。

<div class=”notice”>
<h4><?php $options = get_option(‘xiaohan_options’); if($options[‘icp’]<>”) echo($options[‘icp’]);?></h4>
</div>
<div id=”post-list-news”><ul>
<?php query_posts(); if(have_posts()) : while(have_posts()) : the_post(); ?>
<?php if(is_sticky()) : ?>
<h3><li><a href=”<?php the_permalink() ?>” rel=”bookmark” target=”_blank” title=”<?php the_title(); ?>”><?php the_title(); ?> </a></li></h3>
<?php endif; ?>
<?php endwhile;else : ?>
<?php endif; ?>
</ul></div>

第三步:通过FTP将主题文件images文件夹中的hot.gif图片进行一下修改,去掉下面的小尾巴。

简单三步就完成了模板置顶样式的修改。希望对大家有用处。懒得修改的朋友请直接到这里下载,然后上传到相应位置。下载地址:http://pan.baidu.com/share/link?shareid=3254404028&uk=2418274263

低调与华丽wordpress V5.0版本置顶文章样式修改》有 12 个想法

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注