2025-04-30

11.添加標題列表樣式的相關文章22.添加含縮略圖的相關文章

本文將教會你如何為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>

<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}

.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;
}

//添加特色縮略圖支持
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>

<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}

.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}

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Related News

WordPress添加文章打印和生成PDF的功能

2018-04-30

WordPress低版本瀏覽器檢測和升級提醒

2018-04-30

You may have missed

1736212862_maxresdefault.jpg

怎樣獲得更多自然流量？

2025-01-07
1736183525_maxresdefault.jpg

電子商務的四大挑戰及其解決方法 | SHOPLINE x KeepCount

2025-01-07
1736128619_maxresdefault.jpg

5 พอดแคสต์เติมพลังใจสู่ปีใมมจสู่ปี ส รุปหนังสือ | MM 播客長播

2025-01-06
1736113989_maxresdefault.jpg

แบตสำรองพังแล้วควรทิ้งที่ไหทิ้งที่ไหทน？ | EP.4 EP.4

2025-01-06
1736110339_maxresdefault.jpg

ShuzuraウンジGotchの靴磨き屋靴修理屋あるあるがライブ配信中！

2025-01-06
1736106664_maxresdefault.jpg

เหลือเชื่อ EP.121 รวยไม่หยุดจริง่หยุด งขลังวัดบางจาก

2025-01-06