这几天一直在研究sns，发觉Kayo's Melody和Appfans都有一个通病——站内文章的关联性不大，尤其是Appfans文章页里基本没有其他文章的信息，于是想到在文章页里添加一个“相关文章”栏目，增加文章之间的联系，这样用户便能更方便地在文章页里发现一些其它感兴趣的文章。因为在一个独立博客里看到过“无觅”相关文章插件，马上就喜欢上它的样式和功能了，可是试用了一下，加载实在太慢了，毕竟要加载外部的元素，而且在点击相关文章时浏览器地址栏上还会出现第三方的url，这使到我极为不满意，但我又不舍这华丽丽的功能与样式，于是二话不说，自己动手做一个。具体效果可以浏览本站文章内容的底部。
因为代码比较简洁，所以我没有把它做成插件的形式（请原谅我的懒惰）。
先简略说一下原理，先获取当前文章的分类，根据分类用query_posts控制显示一定数量的同分类文章，输出文章的标题和特色图片，如果没有特色图片会自动用默认的图片代替（可自行修改默认图片）
直接上代码：
以下是功能代码，放到single.php希望显示“相关文章”栏目的地方
<div class="same_cat_posts">
<h3>你可能也喜欢</h3>
<ul class="same_cat_posts_ul">
<?php
foreach(get_the_category() as $category){
$cat = $category->cat_ID;
}
query_posts('cat=' . $cat . '&orderby=rand&showposts=5'); //控制相关文章排序为随机，显示5篇相关文章
while (have_posts()) : the_post();
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');
?>
<li>
<?php if ( has_post_thumbnail() ) { ?>
<a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php echo $thumbnail[0]; ?>" alt="<?php the_title(); ?>" /></a>
<? } else { ?>
<a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/wordpress_default.gif" alt="<?php the_title(); ?>" ></a>
<? } ?>
<h3 class="same_cat_posts_tittle"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
</li>
<?php endwhile; wp_reset_query(); ?>
</ul>
</div>
<h3>你可能也喜欢</h3>
<ul class="same_cat_posts_ul">
<?php
foreach(get_the_category() as $category){
$cat = $category->cat_ID;
}
query_posts('cat=' . $cat . '&orderby=rand&showposts=5'); //控制相关文章排序为随机，显示5篇相关文章
while (have_posts()) : the_post();
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');
?>
<li>
<?php if ( has_post_thumbnail() ) { ?>
<a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php echo $thumbnail[0]; ?>" alt="<?php the_title(); ?>" /></a>
<? } else { ?>
<a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/wordpress_default.gif" alt="<?php the_title(); ?>" ></a>
<? } ?>
<h3 class="same_cat_posts_tittle"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
</li>
<?php endwhile; wp_reset_query(); ?>
</ul>
</div>
以下是css
.entry .same_cat_posts a {color: #555; text-decoration: none; }
.entry .same_cat_posts {width: 568px; height: 170px; margin: 20px 0px 60px 20px; }
.entry .same_cat_posts h3 {margin-bottom: 10px; font-weight: bolder; font-size: 10pt;}
.entry .same_cat_posts ul {list-style: none; margin-left: 10px; }
.entry .same_cat_posts ul li {float: left; padding: 5px; border-right: 1px solid #CCCCCC; }
.entry .same_cat_posts ul li:hover {background: #dddddd; }
.entry .same_cat_posts ul li img {width: 96px; height: 90px; padding: 2px; border: 1px solid #CCCCCC; }
.entry .same_cat_posts ul li .same_cat_posts_tittle { margin-left: 2px; width: 96px; height: 50px; font-size: 9pt; text-decoration: none; }
.entry .same_cat_posts {width: 568px; height: 170px; margin: 20px 0px 60px 20px; }
.entry .same_cat_posts h3 {margin-bottom: 10px; font-weight: bolder; font-size: 10pt;}
.entry .same_cat_posts ul {list-style: none; margin-left: 10px; }
.entry .same_cat_posts ul li {float: left; padding: 5px; border-right: 1px solid #CCCCCC; }
.entry .same_cat_posts ul li:hover {background: #dddddd; }
.entry .same_cat_posts ul li img {width: 96px; height: 90px; padding: 2px; border: 1px solid #CCCCCC; }
.entry .same_cat_posts ul li .same_cat_posts_tittle { margin-left: 2px; width: 96px; height: 50px; font-size: 9pt; text-decoration: none; }
最后上传一张当文章没有特色图片时显示的默认图片到主题文件夹里的images文件夹，我使用的是“无觅”的默认图片（很喜欢那蓝色的天和大海），点我下载 。如果你使用的是自己的图片，记得修改图片名或功能代码中相应的文件名。
到这里你的网站就有了一个华丽丽的“相关文章”栏目了，相信这一定能增加网站的浏览时间。如果对以上内容有建议和意见欢迎提出，我会尽力改进。
本文由 Kayo Lee 发表，本文链接：https://kayosite.com/imitate-wumi-related-articles.html
评论列表
哈哈，仿的还真像
看起来还不错，就是css呵呵
@倡萌 嗯嗯，仿得像不像就看css了！
请问如果要获取文章中的图片，代码该要怎么改
更改几处地方就行了
1.
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');
改为
$imgContent = $post->post_content; $imgser = '~<img [^\>]*\ />~'; // 搜索所有符合的图片 preg_match_all( $imgser, $imgContent, $aimgs ); $imgnum = count($aimgs[0]); // 检查一下至少有一张图片
2.
<a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php echo $thumbnail[0]; ?>" alt="<?php the_title(); ?>" /></a>
改为
<a class="same_cat_posts_img" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo $aimgs[0][1];//如果没有启用jQuery图片延时加载就改为[0][0] ?></a>
@沐歌 刚才贴代码的时候才发现WP的评论贴代码非常麻烦，所以改了几次，可能沐歌会收到几封邮件噢！明天写个文章详细跟童鞋们说说吧！
@Kayo 但是邮件里确实只有一封哦，哈哈。这个我用另一种方法实现了，但是现在再来折腾下你的，你这个代码少很多
@沐歌 嗯嗯，收到一封就好。希望代码能帮助到沐歌！
@沐歌 还有if ( has_post_thumbnail() )要改为if ( $imgnum > 0 ) 噢！
看到这个我表示我又可以去掉一个插件了哦
@雨帆 嘻嘻，不妨试试这个！
不错，很优秀。
这样子就可以避免用无觅的ajax加载了。
而且，还生成到了页面上面。
这样子搜索引擎也能看到了。
呵呵。过几天我也自己去弄弄。
@肌肤问题 其实无觅的也很好，只是我喜欢原生的，引入第三方的也会较慢。
相关日志功能在emlog很容易实现的。也有相关插件。博主，求个友情链接呗
@sprityaoyao 嗯，WP也有这类插件，不过个人比较喜欢原生的！
一开始只接受内页链接，不知道介意否？
不过那只是文字显示，像无觅这样的还没有。
按tags显示 咋整呢 朋友