本文将教会你如何为WordPress添加相关文章功能,并提供了标题列表样式和缩略图样式。相关文章的获取思路是:Tags标签相关>同分类下文章,也就是说,先获取标签相同的文章,如果还达不到数量,就调用该分类下的文章补足。获取方法貌似最初来自Willin Kan 大师,倡萌再次修改。
1.添加标题列表样式的相关文章
将下面的代码添加到 single.php 要显示相关文章的位置即可:
<h3>相关文章</h3>
<ul class="related_posts">
<?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(); ?>
<li><a rel="bookmark" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a></li>
<?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(); ?>
<li><a rel="bookmark" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a></li>
<?php $i++;
} wp_reset_query();
}
if ( $i == 0 ) echo '<li>没有相关文章!</li>';
?>
</ul>
PS:第四行$post_num = 8;表示显示8篇文章,请根据自己的需要修改。
显示样式需要自己写css,可以参考一下下面的:
.related_posts{margin-top:5px;}
.related_posts li{margin-left:20px;color:#444;list-style:circle;font-size:14px;line-height:26px;padding:0 0 0 5px}
2.添加含缩略图的相关文章
倡萌只是根据上面的代码改了一下,添加了缩略图。
1)在主题的 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;
}
PS:上面的代码主要是获取图片链接,获取的顺序是:
自定义字段为 thumb 的图片>特色缩略图>文章第一张图片>随机图片/默认图片;
随机图片:请制作10张图片,放在现用主题文件夹下的 images/pic/ 目录,图片为jpg格式,并且使用数字 1-10命名,比如 1.jpg;如果你不想用随机图片,请将 倒数第5行 前面的“//”去掉,然后给 倒数第7、9行 前面添加“//”注销,并且在现用主题的 /images/ 目录下添加一张名字为 default_thumb.jpg 的默认图片,这样,就会显示默认图片。
2)将下面的代码添加到 single.php 要显示相关文章的位置:
<h3>相关文章</h3>
<ul class="related_img">
<?php
$post_num = 4;
$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(); ?>
<li class="related_box" >
<div class="r_pic">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank">
<img src="<?php echo post_thumbnail_src(); ?>" alt="<?php the_title(); ?>" class="thumbnail" />
</a>
</div>
<div class="r_title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank" rel="bookmark"><?php the_title(); ?></a></div>
</li>
<?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(); ?>
<li class="related_box" >
<div class="r_pic">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank">
<img src="<?php echo post_thumbnail_src(); ?>" alt="<?php the_title(); ?>" class="thumbnail" />
</a>
</div>
<div class="r_title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank" rel="bookmark"><?php the_title(); ?></a></div>
</li>
<?php $i++;
} wp_reset_query();
}
if ( $i == 0 ) echo '<div class="r_title">没有相关文章!</div>';
?>
</ul>
PS:第四行$post_num = 4; 表示调用4篇文章,请根据自己需要修改。
css样式自己写,也可参考一下:
.related_posts{margin-top:5px;}
.related_img{width:600px;height:210px;}
.related_box{float:left;overflow:hidden;margin-top:5px;width:148px;border-right:1px #eee solid}
.related_box:hover{background:#f9f9f9}
.related_box .r_title{width:auto;height:72px;font-weight:400;font-size:14px;margin:0 10px;overflow:hidden;}
.related_box .r_pic{margin:6px}
.related_box .r_pic img{width:130px;height:100px;border:1px solid #e1e1e1;background:#fff;padding:2px}
麻烦能不能改一个 先获取同分类下文章,同分类文章不够的再获取tags相同文章,我是个三把刀不知道怎么替换
你好,我想请问下,怎么随机显示同分类或者tag下的相关文章,按照上面代码加上后设置4个相关文章,但是相关文章显示的是相邻的4篇文章,谢谢
我把’orderby’ => ‘comment_date’,改成’orderby’ => ‘rand’,也不起作用啊
错了,不是相邻的文章,是最新的4篇文章
代码默认就是调用相同标签的文章,确保你的确为文章添加标签
把’orderby’ => ‘comment_date’,改成’orderby’ => ‘rand’,已经能随机调文章了,刚没清缓存,另外请教下,我使用的是dux1.8主题,文章设置了外链缩略图,但是随机显示相关文章的时候,图片调用的是文章里的第一张图片,我想显示成设置的外链缩略图怎么修改?上面教程的获取图片链接顺序是:
自定义字段为 thumb 的图片>特色缩略图>文章第一张图片>随机图片/默认图片;
你好,不熟悉你说的这个主题,请联系主题作者咨询,谢谢
dux里面functions-theme.php是这些
add_theme_support( ‘post-formats’, array( ‘aside’ ) );
// post thumbnail
if (function_exists(‘add_theme_support’)) {
add_theme_support(‘post-thumbnails’);
set_post_thumbnail_size(220, 150, true );
}
和下面这段,我看不懂
function _get_post_thumbnail($size = ‘thumbnail’, $class = ‘thumb’) {
global $post;
$thumb_default = get_stylesheet_directory_uri() . ‘/img/thumbnail.png’;
$issrc = _hui(‘thumbnail_src’);
$html = ”;
if (has_post_thumbnail()) {
/*$domsxe = simplexml_load_string(get_the_post_thumbnail());
$src = $domsxe->attributes()->src;
$src_array = wp_get_attachment_image_src(_get_attachment_id_from_src($src), $size);
$html = sprintf(”, $src_array[0], $class);*/
// print_r($domsxe);
$domsxe = get_the_post_thumbnail();
preg_match_all(‘//sim’, $domsxe, $strResult, PREG_PATTERN_ORDER);
$images = $strResult[1];
foreach($images as $src){
if( $issrc ){
$html = sprintf(”, $thumb_default, $src);
}else{
$html = sprintf(”, $src, $post->post_title._get_delimiter().get_bloginfo(‘name’));
}
break;
}
} else {
$_de = ‘ data-thumb=”default”‘;
if( _hui(‘thumblink_s’) ){
$thumblink = get_post_meta($post->ID, ‘thumblink’, true);
if( !empty($thumblink) ){
$thumb_default = $thumblink;
$_de = ”;
}
}
if( $issrc ){
$html = sprintf(”, $thumb_default, $class);
}else{
$html = sprintf(”, $thumb_default, $class, $post->post_title._get_delimiter().get_bloginfo(‘name’));
}
}
return $html;
}
DUX6.4输出相关文章缩略图的代码是
if( $thumb_s ) echo ''._get_post_thumbnail('full').'';
输出的缩略图大大小小不整齐,请问有什么办法调整输出缩略图的大小呢?错了是 if( $thumb_s ) echo ‘‘._get_post_thumbnail(‘full’).’‘;
总算打出来了 是 if( $thumb_s ) echo '<a href="'.get_permalink().'">'._get_post_thumbnail('full').'</a>';
有可以通过文章标题匹配相关文章的代码吗
没有这方面的,还是建议你通过标签来获取相关文章吧
那得搞数据分析了(丧)
我想把这段代码放在首页,做成cms豆腐块的样子。
求回复!!
要修改主题,自己学习下基本的知识吧:http://www.wpdaxue.com/series/mastering-wp_query/
谢谢。
萌哥!可不可以指定调用某一分类ID下的文章。
比如我想要这段代码指定调用分类ID:1 下面的文章。这样可以实现吗?
可以,百度一下就有方法
大神,css放在哪个文件里面。
一般可以添加到主题根目录下的 style.css 文件的末尾
page页面的相关文章、相关页面调用,怎么样弄精准
这是输出文章第一张图的的代码吧 有问题啊 我文章中好几张图片 有的输出的不是第一张 ➡
研究了下 发现是第一张图片不是指的文章中的第一张,而是多张图在上传的时候第一个传好的图片被定义为了第一张 ➡ ➡ 没办法 设特色图当封面吧
发现如果你文章中的图片尺寸很大的话,获得的特色图片的尺寸就很大,会严重影响加载速度,百度了下获取特色图片的函数wp_get_attachment_image_src(),拿倡萌的那段代码来说$thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),’full’);看最后,是full,尺寸最大的,有点坑爹哦,倡萌应该备注下,其中full可以修改的,可以为thumbnail, medium, large or full(分别代表最小的缩略图、中等、大和原始尺寸)