WordPress文章頁增加相關閱讀的方法（含標題/縮略圖）

205次閱讀

共計 3469 個字符，預計需要花費 9 分鐘才能閱讀完成。

一般而言，網頁增加相關閱讀可以提升用戶體驗，而且在某種程度上減少用戶流失。因為本站的文章頁是單欄樣式，沒有相關文章閱讀的展示，感覺體驗并不好，橘子君 思前想后，決定對文章頁模板進行整改，并初步達到滿意效果，感興趣或者有能力的朋友還可以進行再改造，效果如下圖所示。

步驟一、進入 WordPress 后臺，在外觀編輯 functions.php 的最后一個 ?> 前添加下面的代碼：

// 添加特色縮略圖支持
if (function_exists('add_theme_support') )add_theme_support('post-thumbnails');
 
// 輸出縮略圖地址
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 的默認圖片，這樣，就會顯示默認圖片。

步驟二、將以下代碼加入到文章頁 single.php 模板要展示相關閱讀的位置：

<h3><i class="fa fa-twitter" aria-hidden="true"></i> 相關文章閱讀：</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：博主選擇的是展示 4 篇文章，第四行 $post_num = 4 可根據自己實際情況調整。

步驟三、css 樣式修改，參考如下：

.related_posts{margin-top:5px;}
.related_img{width:100%;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}

結語：目前對這個相關閱讀的展示還比較滿意，后期可能會進行深度的修改調整，也歡迎大家提供更多的解決方法。

正文完