WordPress為頁面(page)添加相關頁面

我們都比較喜歡給文章添加相關文章,那有沒有想過給頁面也添加相關頁面,下面就一起來看看如何實現吧。

首先,我們需要知道,一般文章(post)都是通過 標簽 或 分類 來獲取相關文章的,但是 頁面(page)默認是沒有標簽和分類的,所以我們需要先給頁面也添加分類和標簽功能,具體添加方法可以查看 為WordPress頁面(page)添加標簽和分類功能。

接下來,你就需要給內容有關聯的頁面歸類或者添加標簽。假設有這麼兩個頁面“關於我們”和“公司歷史”,那麼你可以給這兩個頁面都添加一個相同的標簽“關於我們”。

然後在當前主題的 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
29
30
31
32
33
34
35
36
37
38
/**
 * WordPress為頁面(page)添加相關頁面
 * https://www.wpdaxue.com/show-related-pages-in-wordpress.html
 */
function wpdx_related_pages() { 
	$orig_post = $post;
	global $post;
	$tags = wp_get_post_tags($post->ID);
	if ($tags) {
		$tag_ids = array();
		foreach($tags as $individual_tag)
			$tag_ids[] = $individual_tag->term_id;
		$args=array(
			'post_type' => 'page',  //檢索頁面類型
			'tag__in' => $tag_ids, //根據標簽獲取相關頁面
			'post__not_in' => array($post->ID), //排除當前頁面
			'posts_per_page'=>5  //顯示5篇
			);
		$my_query = new WP_Query( $args );
		if( $my_query->have_posts() ) {
			echo '<div id="relatedpages"><h3>相關頁面</h3><ul>';
			while( $my_query->have_posts() ) {
				$my_query->the_post(); ?>
				<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail('thumb'); ?></a></div>
					<div class="relatedcontent">
						<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
						<?php the_time('M j, Y') ?>
					</div>
				</li>
			<?php }
			echo '</ul></div>';
		} else { 
			echo "沒有相關頁面";
		}
	}
	$post = $orig_post;
	wp_reset_query(); 
}

/**
* WordPress為頁面(page)添加相關頁面
* https://www.wpdaxue.com/show-related-pages-in-wordpress.html
*/
function wpdx_related_pages() {
$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag)
$tag_ids[] = $individual_tag->term_id;
$args=array(
‘post_type’ => ‘page’, //檢索頁面類型
‘tag__in’ => $tag_ids, //根據標簽獲取相關頁面
‘post__not_in’ => array($post->ID), //排除當前頁面
‘posts_per_page’=>5 //顯示5篇
);
$my_query = new WP_Query( $args );
if( $my_query->have_posts() ) {
echo ‘<div id="relatedpages"><h3>相關頁面</h3><ul>’;
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(‘thumb’); ?></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<?php the_time(‘M j, Y’) ?>
</div>
</li>
<?php }
echo ‘</ul></div>’;
} else {
echo "沒有相關頁面";
}
}
$post = $orig_post;
wp_reset_query();
}

上面的代碼會查詢與當前頁面有相同標簽的頁面,然後顯示出來。如果你想要在頁面中調用,那你需要編輯當前主題的 page.php 或者 content-page.php文件,然後在需要顯示相關頁面的地方使用下面的代碼進行調用:

1
<?php if(function_exists(' wpdx_related_pages')) wpdx_related_pages(); ?>

<?php if(function_exists(‘ wpdx_related_pages’)) wpdx_related_pages(); ?>

剩下的工作,就是要你自己添加css樣式來完善相關頁面的顯示效果啦。

發佈留言

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