Worpdress頁面可以設置子頁面,那麼如何顯示 WordPress 頁面的子頁面清單呢?
如果你用父頁面和子頁面來組織 WordPress 網站,那麼你可能想在父頁面上顯示子頁面。 你可能還想在每個子頁面上顯示夫頁面,以方便流覽。
在本文中,我們將向你展示如何在 WordPress 中輕鬆顯示父頁面的子頁面清單。
何時需要顯示子頁面清單?
WordPress 有兩種預設的post類型,分別叫做post和頁面。 post是博客內容,通常用類別和標籤來組織。
頁面是獨立的內容,如 「關於我們 」頁面或 「聯繫我們 」頁面。
在 WordPress 中,頁面可以分級,這意味著您可以用父頁面和子頁面來組織頁面。
例如,您可能想創建一個產品頁面,併為功能、定價和支援創建子頁面。
創建好父頁面和子頁面后,您可能想在主父頁面上列出子頁面。
一個簡單的方法就是手動編輯父頁面,然後逐個添加連結清單。
![如何在 WordPress 中显示父页面的子页面列表 2 image](https://www.xiaolikt.com/wp-content/uploads/2023/09/image.png)
但是,每次添加或刪除子頁面時,都需要手動編輯父頁面。 如果只需創建一個子頁面,它就會自動以連結的形式出現在父頁面上,豈不是更好?
既然如此,讓我們來看看在 WordPress 的父頁面上快速顯示子頁面清單的其他動態方法。
方法 1. 使用外掛程式在父頁面上顯示子頁面
這種方法比較簡單,建議所有使用者使用。
首先,你需要安裝並啟動Page-list外掛程式。
啟動后,您需要編輯父頁面,然後在想要顯示子頁面清單的地方添加以下簡碼即可。
[subpages]
現在您可以保存頁面,並在新的瀏覽器標籤頁中預覽。 你會發現它顯示的是一個簡單的子頁面清單。
![如何在 WordPress 中显示父页面的子页面列表 3 image 1](https://www.xiaolikt.com/wp-content/uploads/2023/09/image-1.png)
您可以添加一些自定義CSS來更改清單的外觀。 以下是一些示例CSS,您可以將作為參考。
ul.page-list.subpages-page-list {
list-style: none;
list-style-type: none;
background-color: #eee;
border: 1px solid #CCC;
padding: 20px;
}
應用自定義 CSS 後,就可以預覽父頁面了。 這就是我們測試的 WordPress 網站上的效果。
![如何在 WordPress 中显示父页面的子页面列表 4 image 2](https://www.xiaolikt.com/wp-content/uploads/2023/09/image-2.png)
該外掛程式提供大量短碼參數,允許您設置深度、排除頁面、項目數量等。 詳情請查看外掛程式頁面的詳細文件。
方法 2. 使用代碼列出父頁面的子頁面
這種方法有點高級,需要在 WordPress 網站上添加代碼。
要在父頁面下列出子頁面,你需要在代碼片段外掛程式或主題的 functions.php 檔中添加以下代碼:
function wpb_list_child_pages() {
global $post;
if ( is_page() && $post->post_parent )
$childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
else
$childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
if ( $childpages ) {
$string = '<ul class="wpb_page_list">' . $childpages . '</ul>';
}
return $string;
}
add_shortcode('wpb_childpages', 'wpb_list_child_pages');
要顯示子頁面,只需在側邊欄中的頁面或文本小部件中添加以下短代碼:
[wpb_childpages]
![如何在 WordPress 中显示父页面的子页面列表 5 image 3](https://www.xiaolikt.com/wp-content/uploads/2023/09/image-3.png)
您可以添加一些自定義CSS來更改清單的外觀。 以下是一些示例CSS,您可以將作為參考。
ul.wpb_page_list {
list-style: none;
list-style-type: none;
background-color: #eee;
border: 1px solid #CCC;
padding: 20px;
}
方法 3. 無需任何短碼即可動態顯示子頁面
使用短碼很方便,但問題是你必須在所有有父頁面或子頁面的頁面中添加短碼。
更好的辦法是編輯主題中的頁面範本檔,這樣它就能自動顯示子頁面。
為此,你需要編輯page.php樣本,或在主題中創建自定義頁面範本。
直接編輯主題並不是最好的方式,最好先創建一個子主題,然後在子主題中進行修改。
在頁面範本檔中,您需要在要顯示子頁面的地方添加這行代碼。
<?php wpb_list_child_pages(); ?>