php缩略图乱码怎么办,通过YARPP实现WordPress相关文章缩略图显示

YARPP简介

YARPP是有名的WordPress相关文章插件，全称Yet Another Related Posts Plugin，特点如下：支持模板系统，可以自定义模板

具备相关文章(related posts)、相关页面(related pages)以及自定义的文章类型相关链接

缓存结果，提高性能

在RSS中输出相关文章

可以提出某些目录或标签

通过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)

*/

?>

相关阅读 Discovery More ...

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

<?php while ($related_query->have_posts()) : $related_query->the_post(); ?>

//设置默认图片，当文章没有特色图像时调用

$default_thumbnail = get_bloginfo("stylesheet_directory").'/img/default.gif';

?>

<?php if( in_category('ost')) { ?> height="110" <?php } ?> />

暂无相关文章，过段时间再来看看

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;

}

最终效果图

注意事项

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

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

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

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