拽立网 – Loper主题相关文章样式美化

Loper主题相关文章样式美化，Loper主题自带了很简单的相关文章文字连图片效果都没一点都不好看，拽立网，自带了无觅相关文章功能本人感觉没什么用处影响我的加载速度，还是手动添加一些代码实现相关文章样式美化功能吧，今天我就把Loper主题相关文章样式美化方法分享给大家，请看以下操作！

美化前效果图！

1.登陆你的后台管理，选择【外观】-【编辑】-【文章页面 (single.php)】

直接搜索这个代码：

<div id="wumiiDisplayDiv"></div>

2.把以下全部代码删除掉！【自己看代码删除！】

<div id="wumiiDisplayDiv"></div>
php else : ?>
<ul>
    <?php
        $post_tags = wp_get_post_tags($post->ID);
        if ($post_tags) {
        foreach ($post_tags as $tag)
        {$tag_list[] .= $tag->term_id;}
        $post_tag = $tag_list[ mt_rand(0, count($tag_list) - 1) ];
        $args = array(
        'tag__in' => array($post_tag),
        'category__not_in' => array(NULL),
        'post__not_in' => array($post->ID),
        'showposts' => 6,
        'caller_get_posts' => 1
        );
        query_posts($args);
        if (have_posts()) :
        while (have_posts()) : the_post(); update_post_caches($posts); ?>
        <li><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
    <?php endwhile; else : ?>
        <li>暂无相关文章</li>
    <?php endif; wp_reset_query(); } ?>
</ul>

3.上面代码删除后，然后添加以下全部代码复制进去保存：

<div id="wumiiDisplayDiv"></div>
<?php else : ?>
<div class="clear"></div>
<div class="Related_Posts"><ul><?php $post_num = 5;$exclude_id = $post->ID;$posttags = get_the_tags(); $i = 0;if ( $posttags ) {$tags = ''; foreach ( $posttags as $tag ) $tags .= $tag->term_id . ',';$args = array('post_status' => 'publish','tag__in' => explode(',', $tags),'post__not_in' => explode(',', $exclude_id),'ignore_sticky_posts' => 1,'orderby' => 'comment_date','posts_per_page' => $post_num);query_posts($args);while( have_posts() ) { the_post(); ?><li><a href="<?php the_permalink(); ?> " rel="nofollow"><?php post_thumbnail(); ?></a><div class="Related_Posts_tittle"><a class="Related_Posts_tittle" href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></div></li><?php $exclude_id .= ',' . $post->ID; $i ++;} wp_reset_query();}if ( $i < $post_num ) {$cats = ''; foreach ( get_the_category() as $cat ) $cats .= $cat->cat_ID . ',';$args = array('category__in' => explode(',', $cats),'post__not_in' => explode(',', $exclude_id),'ignore_sticky_posts' => 1,'orderby' => 'comment_date','posts_per_page' => $post_num - $i);query_posts($args);while( have_posts() ) { the_post(); ?><li><a href="<?php the_permalink(); ?> " rel="nofollow"><?php post_thumbnail(); ?></a><div class="Related_Posts_tittle"><a class="Related_Posts_tittle" href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></div></li><?php $i++;} wp_reset_query();}if ( $i  == 0 )  echo '<li>没有相关文章!</li>';?></ul></div>
<div class="clear"></div>

4.登陆你的后台管理，选择【外观】-【编辑】-【样式表 (style.css)】

直接搜索这个代码：

/*--Relate--*/

5.然后搜索以下全部代码：【自己看代码删除！】

/*--Relate--*/
            .relatebar{clear:both; margin:10px 0;}
            .relatebar ul{margin:0px 10px 0px 65px; list-style: none;overflow:auto; width:545px;}
            .relatebar ul li{ float:left;margin:0;list-style: none; padding:3px 15px; background:url(images/sidebarli.gif) no-repeat;
                             width:230px;background-position:0 -1px}

6.把以上全部代码替换为以下全部代码：

/*--Relate--*/
/*--缩略图相关文章--*/
.relatebar {clear: both;margin: 10px 0;}
/*.relatebar ul{margin:0px 10px 0px 65px; list-style: none;overflow:auto; width:545px;}
.relatebar ul li{ float:left;margin:0;list-style: none; padding:3px 15px; background:url(images/sidebarli.gif) no-repeat;width:230px;background-position:0 -1px}    */
.relatebar .Related_Posts {width: 700px}
.relatebar .Related_Posts_tittle {
    margin-top: 3px;
    line-height: 17px;
    color: #515151 !important;
    font-size: 12px !important;
    width: 112px;
    overflow: hidden
}
.relatebar .Related_Posts li {
    float: left;
    margin: 0 6px 0 0;
    display: block;
}
.relatebar .Related_Posts ul li img {
    width: 90px;
    height: 90px;
    border-radius: 3px;
    background: #F4F4F4;
    border: 1px solid #D8D8D8;
    padding: 2px
}

美化后效果图！