WordPress相关文章
WordPress问题

WordPress文章页面添加相关文章功能（标题+缩率图+内容摘要）

WordPress要数当今最流向的php开源程序了，WordPress其功能的强大在于它的开源和上万插件和模板，只要你能想到网上就有。然而有些模板无论界面还是布局都比较满足你的需求，但总有一些小的功能无法满足你的需求，今天和大家分享一下博主遇到的问题以及解决方法。

WordPress相关文章

说起相关文章，估计大部分站长都知道，它是SEO必不可少的手段，WordPress也有很多相关文章插件，但是博主总不想什么都指望从插件来完成，并且自己修改的代码在显示速度上要比插件快一些。好了进入正题吧…

首先登陆WordPress后台，点击“外观”下面的“编辑”进入模板编辑界面，将下面代码插入到single.php文件里面要显示的部分，

 

<div class=”about-area”>
<h3>相关文章</h3>
<?php
$post_num = 8;
$exclude_id = $post->ID;
$posttags = get_the_tags(); $i = 0;
if ( $posttags ) {
$tags = ”; foreach ( $posttags as $tag ) $tags .= $tag->term_id . ‘,’;
$args = array(
‘post_status’ => ‘publish’,
‘tag__in’ => explode(‘,’, $tags),
‘post__not_in’ => explode(‘,’, $exclude_id),
‘caller_get_posts’ => 1,
‘orderby’ => ‘comment_date’,
‘posts_per_page’ => $post_num
);
query_posts($args);
while( have_posts() ) { the_post(); ?>
<div class=”aboutarticle” style=”margin-top:10px;margin-bottom:10px;border-top:1px dashed #CCCCCC; padding-top:10px;”>
<div class=”about-thumbnail” style=”width:20%;float:left;”>
<img src=”<?php echo post_thumbnail_src(); ?>” alt=”<?php the_title(); ?>” class=”thumbnail” />
</div>
<div class=”aboutcontent” style=”width:75%;float:right; text-align:left;margin:0;”>
<div class=”abouttitle”>
<h5><a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></h5>
</div>
<div class=”aboutdes” style=”margin:0;”>
<?php the_excerpt($related_post->ID); ?>
</div>
</div>
<div style=”clear:both”></div>
</div>
<?php
$exclude_id .= ‘,’ . $post->ID; $i ++;
} wp_reset_query();
}
if ( $i < $post_num ) {
$cats = ”; foreach ( get_the_category() as $cat ) $cats .= $cat->cat_ID . ‘,’;
$args = array(
‘category__in’ => explode(‘,’, $cats),
‘post__not_in’ => explode(‘,’, $exclude_id),
‘caller_get_posts’ => 1,
‘orderby’ => ‘comment_date’,
‘posts_per_page’ => $post_num – $i
);
query_posts($args);
while( have_posts() ) { the_post(); ?>
<div class=”aboutarticle”>
<div class=”about-thumbnail”>
<img src=”<?php echo post_thumbnail_src(); ?>” alt=”<?php the_title(); ?>” class=”thumbnail” />
</div>
<div class=”aboutcontent”>
<div class=”abouttitle”>
<h5><a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></h5>
</div>
<div class=”aboutdes”>
<?php the_excerpt($related_post->ID); ?>
</div>
</div>
<div style=”clear:both”></div>
</div>
<?php $i++;
} wp_reset_query();
}
if ( $i == 0 ) echo ‘<div class=”r_title”>没有相关文章!</div>’;
?>
</div>

 

其中的about-thumbnail层为图片的显示区域，<div class=”aboutdes”></div>显示内容摘要，其他的就不要我多少了吧，标题和连接地址想必不用我来说大家都会。需要注意的是有些WordPress主题single.php包含了其他文件，比如content-single.php，此时需要多研究一下具体的显示位置。

就此结束了吗？并没有！只用上面代码你会发现相关文章的缩率图根本无法显示，好了，还需要在所在主题的 functions.php中插入以下代码，注意一定要在?> 前添加下面的代码：

/添加特色缩略图支持
if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails');
 
//输出缩略图地址 From wpdaxue.com
function post_thumbnail_src(){
    global $post;
	if( $values = get_post_custom_values("thumb") ) {	//输出自定义域图片地址
		$values = get_post_custom_values("thumb");
		$post_thumbnail_src = $values [0];
	} elseif( has_post_thumbnail() ){    //如果有特色缩略图，则输出缩略图地址
        $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
		$post_thumbnail_src = $thumbnail_src [0];
    } else {
		$post_thumbnail_src = '';
		ob_start();
		ob_end_clean();
		$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
		$post_thumbnail_src = $matches [1] [0];   //获取该图片 src
		if(empty($post_thumbnail_src)){	//如果日志中没有图片，则显示随机图片
			$random = mt_rand(1, 10);
			echo get_bloginfo('template_url');
			echo '/images/pic/'.$random.'.jpg';
			//如果日志中没有图片，则显示默认图片
			//echo '/images/default_thumb.jpg';
		}
	};
	echo $post_thumbnail_src;
}

OK，做到这一步打的工作已经做完，剩下的就是如何显示布局的问题了，也就是用css控制div了。这个在此就不多说了，只给大家提供一个简单的显示方式，css代码如下：

.about-area{width:100%;display:inline;margin-top:20xp;}
.aboutarticle{margin-top:10px;margin-bottom:10px;border-top:1px dashed #CCCCCC; padding-top:10px;}
.about-thumbnail{width:20%;float:left;}
.aboutcontent{width:75%;float:right; text-align:left;margin:0;}

 

 

 

评论已关闭。