🚀 サイト構築が難しい？手取り足取りご案内します——「WordPressサイト構築伴走」サービスを詳しく見る →
🔍 サイト内検索はこちら
経験とテクニックの共有

WordPressで関連記事を追加するいくつかの方法

📅 2019年5月18日
👤 Lee
⏱️ 読了時間：4分
🔄 最后更新：2025年2月26日

给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文件，添加以下内容：

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

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

}
相关文章

方法一高级调用方法

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

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

 wcr_related_posts(); ?>

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

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

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

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

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

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

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


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

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

代码版方法二

这种方法相对来说简单点，调用特色图的相关文章，如果你不是每篇文章都有特色图，最好自己添加一张，或者安装WordPressランダム表示アイキャッチ画像プラグイン：Random Post Thumbnails

WordPress相关文章

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



相关文章

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();
  ?>

上面代码中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后台的设置-媒体处把缩略图大小设置为一样的。

代码版方法三

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

 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 ); ?>

使用此代码需要自定义.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

 YARPP – Yet Another Related Posts Plugin

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

🚀 チュートリアルを見てもまだ迷っていますか？私が直接手を取ってご案内しましょう

「WordPressサイト構築伴走サービス」——ドメイン名の選択、ホスティングの購入から、Themeのインストール、公開、投稿まで、すべてのステップで私が伴走し、遠回りをせずに目標に直行します。

👉 サイト構築伴走サービスについて詳しく知る
🔒

コメントは閉鎖されました

この記事のコメント機能は閉鎖されています。ご質問がある場合は、他の方法でお問い合わせください。

×
二维码

QRコードをスキャンしてフォロー