SKY..fly..

Home / PHP & Wordpress / 非插件实现wordpress缩略图显示相关文章

因为我的网站是杂志类的主题，所以难免图片比较多，所以想把我原来的文字格式显示的相关文章更换成缩略图形式的相关文章，网上找了一下没有几篇比较实用的介绍。其实，自己的这个主题就采用了大量的缩略图形式的文章显示，所以直接从主题中扒代码好了，而且简单的美化了一下，加了一段css：

先来个图片演示一下好了：

缩略图显示相关文章

具体实现过程如下：

首先当然是要实现相关文章功能，这方面有很多插件可以使用，代码实现也是可以的，而且网络上也流传了很多方法，大概有五种左右吧，我个人使用感觉还是代码好了，毕竟这个功能不是必须的，我觉得比较好的一段代码是以下的，直接放在single.php的合适位置即可：

<h2>Related Posts</h2>
<ul id=“tags_related”>
<?php
$post_tags = wp_get_post_tags($post->ID);
if ($post_tags) {
foreach ($post_tags as $tag)
{
$tag_list[] .= $tag->term_id;
}
$post_tag = $tag_list[ mt_rand(0, count($tag_list) – 1) ];
$args = array(
‘tag__in’ => array($post_tag),
‘category__not_in’ => array(NULL),
‘post__not_in’ => array($post->ID),
‘showposts’ => 5,
‘caller_get_posts’ => 1
);
query_posts($args);
if (have_posts()) :
while (have_posts()) : the_post(); update_post_caches($posts); ?>
<li><a href=“<?php the_permalink(); ?>” rel=“bookmark” title=“<?php the_title_attribute(); ?>”><?php the_title(); ?></a></li>
<?php endwhile; else : ?>
<li>暂无相关文章</li>
<?php endif; wp_reset_query(); } ?>
</ul>

实现了相关文章之后就是要在这段代码里把列表形式替换成为缩略图形式的了，需要把一下的这段代码做更改：

<li><a href=“<?php the_permalink(); ?>” rel=“bookmark” title=“<?php the_title_attribute(); ?>”><?php the_title(); ?></a></li>

直接替换为以下这段代码：

<li><a href=“<?php the_permalink() ?>” title=“<?php the_title() ?>”><img src=“<?php $key=”thumbnail“; echo get_post_meta($post->ID, $key, true); ?>” width =“110” height=“115” alt=“<?php the_title() ?>” /></a></li>
<?php the_excerpt(); ?>

最终的实现代码是这段代码：

<h2>Related Posts</h2>
<ul id=“tags_related”>
<?php
$post_tags = wp_get_post_tags($post->ID);
if ($post_tags) {
foreach ($post_tags as $tag)
{
$tag_list[] .= $tag->term_id;
}
$post_tag = $tag_list[ mt_rand(0, count($tag_list) – 1) ];
$args = array(
‘tag__in’ => array($post_tag),
‘category__not_in’ => array(NULL),
‘post__not_in’ => array($post->ID),
‘showposts’ => 5,
‘caller_get_posts’ => 1
);
query_posts($args);
if (have_posts()) :
while (have_posts()) : the_post(); update_post_caches($posts); ?>
<li><a href=“<?php the_permalink() ?>” title=“<?php the_title() ?>”><img src=“<?php $key=”thumbnail“; echo get_post_meta($post->ID, $key, true); ?>” width =“110” height=“115” alt=“<?php the_title() ?>” /></a></li>
<?php the_excerpt(); ?>
</div>
<?php endwhile; else : ?>
<li>暂无相关文章</li>
<?php endif; wp_reset_query(); } ?>
</ul>

PS：在通过这种方式实现的缩略图相关文章功能中，有两点要注意一下：

1.如果是特别古老的主题就需要在function.php中开启缩略图功能，现在大家用的主题一般都是不需要的，所以可以跳过了；

2.在发布文章的时候在“添加自定义栏目”里添加thumbnail，在其右边的值中输入图片地址就可以了的。

这样添加完了以后其实觉得还是不够美观的，可以简单的用CSS来控制一下这个缩略图文章的整体大小，使和主题页面更加协调，我的CSS非常简单，因为主题颜色比较简单，把这段CSS添加到使用的主题的根目录下的style.css的尾部就可以了的，可以自行修改大小、边距、颜色，我的CSS如下：

然后通过这段CSS限制相关文章缩略图的现实格式，我的single.php中最终的相关文章代码如下：

<h2>Related Posts</h2>
<div class=“entry_b”>
<ul id=“tags_related”>
<?php
$post_tags = wp_get_post_tags($post->ID);
if ($post_tags) {
foreach ($post_tags as $tag)
{
$tag_list[] .= $tag->term_id;
}
$post_tag = $tag_list[ mt_rand(0, count($tag_list) – 1) ];
$args = array(
‘tag__in’ => array($post_tag),
‘category__not_in’ => array(NULL),
‘post__not_in’ => array($post->ID),
‘showposts’ => 5,
‘caller_get_posts’ => 1
);
query_posts($args);
if (have_posts()) :
while (have_posts()) : the_post(); update_post_caches($posts); ?>
<div class=“relatedposts”>
<a href=“<?php the_permalink() ?>” title=“<?php the_title() ?>”><img src=“<?php $key=”thumbnail“; echo get_post_meta($post->ID, $key, true); ?>” width =“110” height=“115” alt=“<?php the_title() ?>” /></a> <h3><a href=“<?php the_permalink() ?>” title=“<?php the_title() ?>”><?php the_title() ?></a></h3>
<?php the_excerpt(); ?>
</div>
<?php endwhile; else : ?>
<li>暂无相关文章</li>
<?php endif; wp_reset_query(); } ?>
</ul>
<div class=“clear”></div>
</div>
<!– end: relatedposts –>