WordPress添加相关文章的几种方法

给WordPress添加相关文章代码，对于网站的体验和SEO来说都有好处，本文就分享一下WordPress相关文章的代码实现方式，新手的话建议使用主题自带功能或者插件实现。

代码版方法一

修改主题文件前记得先备份，有问题再还原。

1、在主题函数文件functions.php里面添加下面的内容

/**
 * Related posts
 * 
 * @global object $post
 * @param array $args
 * @return
 */
function wcr_related_posts($args = array()) {
    global $post;

    // default args
    $args = wp_parse_args($args, array(
        'post_id' => !empty($post) ? $post->ID : '',
        'taxonomy' => 'category',
        'limit' => 3,
        'post_type' => !empty($post) ? $post->post_type : 'post',
        'orderby' => 'date',
        'order' => 'DESC'
    ));

    // check taxonomy
    if (!taxonomy_exists($args['taxonomy'])) {
        return;
    }

    // post taxonomies
    $taxonomies = wp_get_post_terms($args['post_id'], $args['taxonomy'], array('fields' => 'ids'));

    if (empty($taxonomies)) {
        return;
    }

    // query
    $related_posts = get_posts(array(
        'post__not_in' => (array) $args['post_id'],
        'post_type' => $args['post_type'],
        'tax_query' => array(
            array(
                'taxonomy' => $args['taxonomy'],
                'field' => 'term_id',
                'terms' => $taxonomies
            ),
        ),
        'posts_per_page' => $args['limit'],
        'orderby' => $args['orderby'],
        'order' => $args['order']
    ));

    include( locate_template('related-posts-template.php', false, false) );

    wp_reset_postdata();
}

2、新建一个related-posts-template.php文件，添加以下内容：

<?php if (!empty($related_posts)) { ?>
    <div class="related-posts">
        <h3 class="widget-title"><?php _e('相关文章', ''); ?></h3>

        <ul class="related-posts-list">
            <?php
            foreach ($related_posts as $post) {
                setup_postdata($post);
            ?>
            <li>
                <a class="title" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                    <?php if (has_post_thumbnail()) { ?>
                    <div class="thumb">
                        <?php echo get_the_post_thumbnail(null, 'medium', array('alt' => the_title_attribute(array('echo' => false)))); ?>
                    </div>
                    <?php } ?>
                    <h4><?php the_title(); ?></h4>
                </a>
            </li>
            <?php } ?>
        </ul>
        <div class="clearfix"></div>
    </div>
<?php
}

方法一高级调用方法

如果要调用相关文章代码，只需要在你主题合适的位置，通常是添加到single.php文件里面。

1、显示3个相关文章内容代码

<?php wcr_related_posts(); ?>

这种相关文章是根据分类来展示的。

2、根据文章TAG来展示相关文章

<?php 
wcr_related_posts(array(
   'taxonomy' => 'post_tag',
   'limit' => 6
));
?>

数字6自行修改，为展示文章数量。

3、根据分类的热门评论文章展示

<?php 
wcr_related_posts(array(
   'limit' => 6,
   'orderby' => 'comment_count',
   'order' => 'ASC'
));
?>

4、根据特定文章的TAG展示相关文章

<?php
wcr_related_posts(array(
   'limit' => 6,
   'taxonomy' => 'post_tag',
   'post_id' => 145
));
?>

最后，你可能还需要自己修改下css样式让相关文章更好看。

代码版方法二

这种方法相对来说简单点，调用特色图的相关文章，如果你不是每篇文章都有特色图，最好自己添加一张，或者安装WordPress随机显示特色图片插件：Random Post Thumbnails

在你主题文章页面合适的位置添加下面这段代码

<div class="relatedposts">
<h3>相关文章</h3>
<?php
  $orig_post = $post;
  global $post;
  $tags = wp_get_post_tags($post->ID);
   
  if ($tags) {
  $tag_ids = array();
  foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
  $args=array(
  'tag__in' => $tag_ids,
  'post__not_in' => array($post->ID),
  'posts_per_page'=>4, // 相关文章显示数量.
  'caller_get_posts'=>1
  );
   
  $my_query = new wp_query( $args );
 
  while( $my_query->have_posts() ) {
  $my_query->the_post();
  ?>
   
  <div class="relatedthumb">
    <a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
    <?php the_title(); ?>
    </a>
  </div>
   
  <? }
  }
  $post = $orig_post;
  wp_reset_query();
  ?>
</div>

上面代码中the_post_thumbnail(array(150,100)的150，100是控制缩略图大小的。

.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}
.relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }
.relatedthumb {margin: 0 1px 0 1px; float: left; }
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}
.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}
.relatedthumb a:hover {background-color: #ddd; color: #000;}

CSS文件，width: 640px是宽度。

使用这种代码的话，最好在WP后台的设置-媒体处把缩略图大小设置为一样的。

代码版方法三

这个代码是展示同分类的其他文章

<?php
		// 默认参数
		$args = array(
			'posts_per_page' => 4, // 要显示的项目数
			'post__not_in'   => array( get_the_ID() ), // 排除当前帖子
			'no_found_rows'  => true, 
		);

		// 检查当前的帖子类别，并将tax_query添加到查询参数中
		$cats = wp_get_post_terms( get_the_ID(), 'category' ); 
		$cats_ids = array();  
		foreach( $cats as $wpex_related_cat ) {
			$cats_ids[] = $wpex_related_cat->term_id; 
		}
		if ( ! empty( $cats_ids ) ) {
			$args['category__in'] = $cats_ids;
		}

		// 查询文章
		$wpex_query = new wp_query( $args );

		// 输出文章
		foreach( $wpex_query->posts as $post ) : setup_postdata( $post ); ?>
		<div id="related_posts">
			<ul class="live">
				<li><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>"><?php the_title(); ?></a></li>
			</ul>
		</div>
		<?php
		// 结束循环
		endforeach;
		wp_reset_postdata(); ?>

使用此代码需要自定义.live的样式，下面是奶爸建站笔记目前使用的样式

.live {
overflow: hidden;
margin: 0!important;
}
.live a{
text-decoration: none;
color: #32373c;
}
.live a:hover {
color: #009cee;
}
.live > li {
list-style: none;
position: relative;
padding: 0 0 0 2em;
margin: 0 0 .5em 10px;
-webkit-transition: .12s;
transition: .12s;
}
.live > li::before {
position: absolute;
content: '\2022';
font-family: Arial;
color: #111;
top: 0;
left: 0;
text-align: center;
font-size: 2em;
opacity: .5;
line-height: .75;
-webkit-transition: .5s;
transition: .5s;
}
.live > li:hover {
color: #333;
}
.live > li:hover::before {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
opacity: 1;
text-shadow: 0 0 4px;
-webkit-transition: .1s;
transition: .1s;
}

插件版方法

插件版的方法相对来说适合新手一些，热门的WordPress相关文章插件有以下几个。

Related Posts for WordPress

WordPress Related Posts

WPJAM-Basic（中文插件，功能强）