WP笔记

通过YARPP实现WordPress相关文章缩略图显示

最后更新于 2012 年 11 月 20 日

YARPP简介

YARPP是有名的WordPress相关文章插件，全称Yet Another Related Posts Plugin，特点如下：

  • 支持模板系统，可以自定义模板
  • 具备相关文章（related posts）、相关页面（related pages）以及自定义的文章类型相关链接
  • 缓存结果，提高性能
  • 在RSS中输出相关文章
  • 可以提出某些目录或标签

相关文章推荐

《如何设置WordPress文章特色图像（Featured Image）》 – WordPress内置的缩略图功能

《管理WordPress图片，防止图片炸弹》- 管理WordPress的缩略图和原始图片

通过YARPP实现WordPress相关文章缩略图显示

YARPP支持模板系统，我们可以通过修改模板实现缩略图显示。

Step1. 安装插件后，找到/wp-content/yet-another-related-posts-plugin/yarpp-templates，将yarpp-template-thumbnail.php拷贝到主题根目录下。

Step 2.到后台YARPP的设置页面（设置 >> 关联文章（YARPP）），勾选“使用自定义模板”，并在下拉列表中选择yarpp-template-thumbnail.php。

Step 3.修改模板，利用WordPress的特色图像功能实现缩略图显示。

此时YARPP已经默认调用yarpp-template-thumbnail.php显示相关文章了，我们只要定制这个模板就可以修改显示效果。

定制缩略图效果

Step 1. 将yarpp-template-thumbnail.php的代码替换成如下所示的代码

<?php /*
Post Thumbnail Template
Author: Zach Dunn (www.buildinternet.com)
*/
?>
<div style="clear:both"></div>
<div class="box-style1 sola_related" id="sola_related">
<h2 class="meta">相关阅读 Discovery More ...</h2>
<br />
</div>

<?php if ($related_query->have_posts()):?>

	<ol class="related-posts">
		<?php while ($related_query->have_posts()) : $related_query->the_post(); ?>

			<?php
				//设置默认图片，当文章没有特色图像时调用
				$default_thumbnail = get_bloginfo("stylesheet_directory").'/img/default.gif';
			?>

			<li>
				<a href="<?php the_permalink() ?>" rel="bookmark">
				<?php if ( has_post_thumbnail() ) : ?>
					<?php the_post_thumbnail('related-post-thumb'); ?>
				<?php else : ?>
					<img src="<?php echo $default_thumbnail; ?>" alt="<?php the_title(); ?>"
					 <?php if( in_category('ost')) { ?> height="110" <?php } ?> />
				<?php endif; ?>

				<?php the_title(); ?></a>
			</li>

		<?php endwhile; ?>
	</ol>

<?php else: ?>

	<p>暂无相关文章，过段时间再来看看</p>

<?php endif; ?>

Step 2. 打开主题的style.css，将下面的样式加入

/* Related Posts */
ol.related-posts {
	clear:both;
	padding:0;
	margin:10px 0px 0px 0px;
}
ol.related-posts li{
	display:inline-block;
	margin-left:5px;
	padding:0;
	text-align:center;
	vertical-align:top;
	width:112px;
}
#ie7 ol.related-posts li {
	display:inline;
	line-height:150%;
}
#ie6 ol.related-posts li {
	display:block;
	height:220px;float:left;
}
ol.related-posts img{
	background:#F7F7F7;
	border:1px solid #DDD;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	clear:both;
	height:75px;
	padding:5px;
	width:100px;
	-moz-box-shadow:2px 2px 3px 1px #999;
 	-webkit-box-shadow: 2px 2px 3px 1px #999;
	box-shadow:2px 2px 3px 1px #999;
}
ol.related-posts img:hover {
	filter: alpha(opacity=50);
	opacity: 0.5;
}
ol.related-posts a{
	border:none;
	clear:both;
	display:block;
	text-decoration:none;
}
ol.related-posts li{
	font-size:12px;
}

最终效果图

YARPP缩略图显示

注意事项

1. 在样式表中有两个样式开头是#ie7、#ie6，这是为了兼容IE7和IE6写的样式，要使这两个id起作用，就需要让网页被这两个浏览器打开时产生相应的id，方法很简单，打开主题的header.php，开头替换成

<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 9]>
<html id="ie9" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]>
<html <?php language_attributes(); ?>>
<![endif]-->

当然你也可以使用其他的css hack方式

2. 具体的效果因主题而异（背景、字体颜色、字体类型等），请根据自己的需要修改CSS

3. 阴影、圆角等特效需要高级CSS的支持，IE9以下的版本不支持这些特效。

19条评论

  1. 好像还有一个替代无觅的国外插件，无觅就是模仿那个的~

  2. 我下载最新版的3.5.1，首页要修改表的索引类型为myisam，我改了。

    但在页面还是没有显示出相关的文章，怎么解决这个问题？

    我印象中以前的版本是有匹配设置的，现在这个版本就只有一个自动插入模板，其他的就没有了。

    1. 无觅插件是第三方相关文章插件，主要文件在无觅的服务器上，自己装的无觅插件只不过是用来调用他的js文件的。YARPP是安装在自己服务器上的，当然负载也由自己承担，这点跟无觅比是劣势。

      不过无觅的相关文章链接都是经过他服务器做的跳转，总觉得对搜索引擎不友好，而且还得带着一个无觅的链接。

      特别是看流量分析的时候，显示大部分引荐流量来自无觅网络，也不知道是因为用户点击自己网站的相关文章都要经过他的服务器跳转造成的引荐流量，还是真的从无觅网站来的流量，看着麻烦，就用YARPP了，反正这个也有缓存的。

  4. 关于友链的问题，看到你的留言了，我的网站也是新站，只要快照正常被收录，一样可以交换链接，没问题的，我可以和你交换首页链接，www.seo-tmall.com.QQ:39844579

    1. 是啊，就是不想用无觅的插件了才用了这个。你起的真早啊，勤劳的孩子

      2. 我也不太想用无觅了，这个支持英文么，你的网站很好，因为我找几个插件通过Google都找到你了，呵呵，能做个友链么，我先加上你的~

        1. 如果面向国外用户，不用无觅最好，国外经常无法加载。英文站，强烈推荐使用outbrain或者nrelate，国外极流行的内容发现平台

  6. 额，建议博客的背景图片宽度再弄大点，宽屏电脑访问会出现空白

    1. 要适应宽屏电脑或者图片搞成渐变的或者弄成repeat的背景，不过我就是喜欢这图片，所以也不想换了，反正也没啥人看，哈哈

评论已关闭。