wordpress商业主题LightSNS主题文章底部增加相关文章

释放双眼，带上耳机，听听看~！

感谢@YXYH提供的css样式代码，目前测试的是pc文章页，手机版测试之后发布，建议老大@jinsom优化一下加入版本更新里面，根据话题（标签）数据调用效果如下

wordpress商业主题LightSNS主题文章底部增加相关文章网站开发

[reply]将以下代码添加到模板\post\single-content.php文件夹 71行

<!-- 相关文章开始 -->
<div class="xgwzzz">
<h3 class="xgwzzx"><span></span> 相关文章<span></span></h3>
      
<ul class="xgwzxh">   
<?php
$post_num = 8;
$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),
        'caller_get_posts' => 1,
        'orderby' => 'comment_date',
        'posts_per_page' => $post_num,
    );
    query_posts($args);
    while( have_posts() ) { the_post(); ?>
        <li><a rel="bookmark" href="<?php%20the_permalink();%20?>" title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a></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),
        'caller_get_posts' => 1,
        'orderby' => 'comment_date',
        'posts_per_page' => $post_num - $i
    );
    query_posts($args);
    while( have_posts() ) { the_post(); ?>
        <li><a rel="bookmark" href="<?php%20the_permalink();%20?>"  title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a></li>
    <?php $i++;
    } wp_reset_query();
}
if ( $i  == 0 )  echo '<li>没有相关文章!</li>';
?>
  
         
    </div>
<!-- 相关文章结束 -->

[/reply]

然后样式添加后台，如图所示：

wordpress商业主题LightSNS主题文章底部增加相关文章网站开发

[reply]

/*相关文章*/
.xgwzzz { padding: 10px; height:100px;display: table;margin: 10px 0;}
.xgwzzx { font-size: 18px; color: #888; letter-spacing: 0; text-align: center; line-height: 22px; font-weight: 700; border: none !important; }
.xgwzzx span { position: relative; display: inline-block; vertical-align: middle; width: 50px; margin: 0; }
.xgwzzx span:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; -webkit-transform: scaleY(1); transform: scaleY(1); background: #e6e6e6; }
.xgwzxh li { height: 20px; line-height: 22px; overflow: hidden; width: 340px; float: left; text-overflow: ellipsis; white-space: nowrap; padding: 5px 20px; }

[/reply]主题介绍地址：[bb href=’https://www.loncons.com/zt/lightsns’]立即访问[/bb]