性价比最高的香港ASP、PHP主机提供商
做网站,就上凡科建站

WordPress添加相关文章功能(标题/缩略图样式)

Loading
0
Comodo SLL证书促销 - 免费ssl证书申请_ssl证书购买_ev ssl证书_https证书购买 - GDCA_数安时代

本文将教会你如何为WordPress添加相关文章功能,并提供了标题列表样式和缩略图样式。相关文章的获取思路是:Tags标签相关>同分类下文章,也就是说,先获取标签相同的文章,如果还达不到数量,就调用该分类下的文章补足。获取方法貌似最初来自Willin Kan 大师,倡萌再次修改。

1.添加标题列表样式的相关文章

wpdaxue.com-201211117

将下面的代码添加到 single.php 要显示相关文章的位置即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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,可以参考一下下面的:

1
2
.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.添加含缩略图的相关文章

wpdaxue.com-201211116

倡萌只是根据上面的代码改了一下,添加了缩略图。

1)在主题的 functions.php 的最后一个 ?> 前添加下面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//添加特色缩略图支持
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 要显示相关文章的位置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<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样式自己写,也可参考一下:

1
2
3
4
5
6
7
.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}
支付宝扫码打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

MetInfo | 最适合企业网站建设的cms系统

关于 倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

50 条评论

  1. 麻烦能不能改一个 先获取同分类下文章,同分类文章不够的再获取tags相同文章,我是个三把刀不知道怎么替换

  2. 你好,我想请问下,怎么随机显示同分类或者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;
          }

  3. 有可以通过文章标题匹配相关文章的代码吗

  4. 我想把这段代码放在首页,做成cms豆腐块的样子。
    求回复!!

  5. 萌哥!可不可以指定调用某一分类ID下的文章。
    比如我想要这段代码指定调用分类ID:1 下面的文章。这样可以实现吗?

  6. 大神,css放在哪个文件里面。

  7. page页面的相关文章、相关页面调用,怎么样弄精准

  8. 1
    2
    3
    4
    5
    6
    7
    8
    9
    
    function post_thumbnail_src(){
        global $post;
    	$post_thumbnail_src = '';
    	ob_start();
    	ob_end_clean();
    	$output = preg_match_all('//i', $post->post_content, $matches);
    	$post_thumbnail_src = $matches [1] [0];   //获取该图片 src
    	echo $post_thumbnail_src;
    }

    这是输出文章第一张图的的代码吧 有问题啊 我文章中好几张图片 有的输出的不是第一张 :arrow:

    • 研究了下 发现是第一张图片不是指的文章中的第一张,而是多张图在上传的时候第一个传好的图片被定义为了第一张 :arrow: :arrow: 没办法 设特色图当封面吧

    • 发现如果你文章中的图片尺寸很大的话,获得的特色图片的尺寸就很大,会严重影响加载速度,百度了下获取特色图片的函数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(分别代表最小的缩略图、中等、大和原始尺寸)

发表评论