代码WordPress实现相关文章展示-资源客

今天给自己的博客文章详情页添加了相关文章的列表，这样有助于提高用户访问量，降低跳出率。网上也有许多插件实现的（比如：无觅），但我一般都不喜欢用插件，插件的优点是配置简单，但是可能会对网站的速度造成一些小的影响，所以很多人还是比较喜欢用代码实现需要的功能，但是话又说回来了，代码实现也有缺点，就是配置复杂，不懂代码的人完全摸不着头脑或者只能照搬别人的代码，还不如用插件。好了，下面进入正题！

方法一

首先获取文章的所有标签，接着获取这些标签下的 n 篇文章，那么这 n 篇文章就是与该文章相关的文章了。现在可以见到的 wordpress 相关文章插件都是使用的这个方法。下面是实现的代码：

<ul id="tags_related">
<?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) ];
// 该方法使用 query_posts() 函数来调用相关文章，以下是参数列表
$args = array(
        'tag__in' => array($post_tag),
        'category__not_in' => array(NULL),      // 不包括的分类ID
        '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>

使用说明：”不包括的分类 ID” 指的是相关文章不显示该分类下的文章，将同行的 NULL 改成文章分类的 ID 即可，多个 ID 就用半角逗号隔开。因为这里限制只显示 6 篇相关文章，所以不管给 query_posts() 的参数 tag__in 赋多少个值，都是只显示一个标签下的 6 篇文章，除非第一个标签有 1 篇，第二个标签有 2 篇，第三个有 3 篇。。。。。。所以如果这篇文章有多个标签，那么我们采取的做法是随机获取一个标签的 id，赋值给 tag__in 这个参数，获取该标签下的 6 篇文章。

方法二

本方法是通过获取该文章的分类 id，然后获取该分类下的文章，来达到获取相关文章的目的。

<ul id="cat_related">
<?php
$cats = wp_get_post_categories($post->ID);
if ($cats) {
$cat = get_category( $cats[0] );
$first_cat = $cat->cat_ID;
$args = array(
        'category__in' => array($first_cat),
        '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>

方法三

相关文章的获取思路是：Tags 标签相关>同分类下文章，也就是说，先获取标签相同的文章，如果还达不到数量，就调用该分类下的文章补足。获取方法貌似最初来自 Willin Kan 大师，然后我参考了倡萌的写法，加上了日期的字段。我先贴一下实现的代码：

<ul>
<?php
  $post_num = 8; // 默认展示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 the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a><span class="pub-time"><?php the_time('m月d日') ?></span></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 the_permalink(); ?>"  title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a><span class="pub-time"><?php the_time('m月d日') ?></span></li>
    <?php $i++;
    } wp_reset_query();
  }
  if ( $i  == 0 )  echo '<li>没有相关文章!</li>';
  ?>
</ul>

将上面代码贴到详情页里面即可~ DOM 结构你自己根据主题来，css 样式的话自己根据主题修改，我只给个参考:

.read-list ul{margin:0;padding:0}
.read-list ul li{padding:2px 0;margin:0;font-family:Fontawesome;width:100%;list-style: square}
.read-list ul li a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-size:14px;color:#333;width:85%;float:left}
.read-list ul li span{float:right;color:#999;font-size:12px}

好了，本文到此结束，希望对你有帮助，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。如果觉得文章对你有帮助，请点个赞或者打赏支持一下，谢谢！

http://xzh.i3geek.com