如何在WordPress中顯示父頁面的子頁面列表


最近,一位讀者問我們如何顯示WordPress頁面的子頁面?

如果使用父頁面和子頁面來組織WordPress網站,則可能需要在父頁面的主頁面上顯示子頁面或子頁面。 您可能還希望在每個子頁面上顯示主頁以便於瀏覽。

在本文中,我們將向您展示如何輕鬆地在WordPress中顯示父頁面的子頁面列表。

在WordPress中顯示父頁面的子頁面列表

什麼時候需要顯示子頁面列表?

WordPress帶有兩種默認的帖子類型,稱為帖子和頁面。 帖子是博客內容,通常按類別和標籤進行組織。

頁面是一次性的或獨立的常綠內容,例如“關於我們”頁面或“聯繫我們”頁面。

在WordPress中,頁面可以是分層的,這意味著您可以將它們與父頁面和子頁面組織在一起。

例如,您可能想創建一個帶有功能,定價和支持子頁面的產品頁面。

要創建子頁面,請遵循有關如何在WordPress中創建子頁面的指南。

創建父頁面和子頁面後,您可能需要在主父頁面上列出子頁面。

現在,執行此操作的一種簡單方法是手動編輯父頁面並單獨添加鏈接列表。

手動添加子頁面鏈接

但是,每次添加或刪除子頁面時,都需要手動編輯父頁面。 如果您可以僅創建一個子頁面並將其自動顯示為父頁面上的鏈接,那會更好嗎?

話雖如此,讓我們看一下其他一些動態方法,以在WordPress的父頁面上快速顯示子頁面列表。

方法1.使用插件在父頁面上顯示子頁面

此方法更簡單,建議所有用戶使用。

首先,您需要安裝並激活Page-list插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您需要編輯父頁面,只需在要顯示子頁面列表的位置添加以下短代碼即可。

[subpages]

現在,您可以保存頁面並在新的瀏覽器選項卡中預覽。 您會注意到,它顯示了所有子頁面的簡單項目符號列表。

子頁面鏈接的簡單列表

如果需要,可以添加一些自定義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網站上的外觀。

子頁面列表與CSS

該插件提供了一堆簡短代碼參數,可讓您設置深度,排除頁面,項目數量等。 有關詳細信息,請參閱插件頁面以獲取詳細文檔。

方法2。使用代碼列出父頁面的子頁面

這種方法有點先進,需要您向WordPress網站添加代碼。 如果您以前沒有做過,請查看我們的指南,了解如何在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 = '
    ' . $childpages . '
'; } return $string; } add_shortcode('wpb_childpages', 'wpb_list_child_pages');

上面的代碼首先檢查頁面是否具有父級,或者頁面本身是父級。

如果它是父頁面,則顯示與其關聯的子頁面。 如果它是一個子頁面,那麼它將顯示其父頁面的所有其他子頁面。

最後,如果這只是一個沒有子頁面或父頁面的頁面,則該代碼將不執行任何操作。 在代碼的最後一行,我們添加了一個簡碼,因此您可以輕鬆顯示子頁面而無需修改頁面模板。

要顯示子頁面,只需在邊欄中的頁面或文本小部件中添加以下短代碼:

[wpb_childpages]

不要忘記保存更改並在瀏覽器選項卡中預覽它們。 這就是它出現在我們的測試站點上的方式。

普通鏈接列表

您現在可以使用一些自定義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 模板,或在您的主題中創建自定義頁面模板。

您可以編輯主主題,但是如果更改或更新主題,這些更改將消失。 這就是為什麼創建子主題然後在子主題中進行更改會更好的原因。

在頁面模板文件中,您需要在要顯示子頁面的位置添加此代碼行。


就這樣。 您的主題現在將自動檢測子頁面並將其顯示在純列表中。

您可以使用CSS和格式來自定義樣式。 這是OptinMonster網站如何顯示父頁面和子頁面的示例:

OptinMonster子頁面示例

我們希望本文能幫助您列出WordPress中父頁面的子頁面。 您可能還希望在最重要的頁面上查看我們的指南,以在新的WordPress網站上創建頁面,以及我們對最佳拖放WordPress頁面構建器創建無需任何代碼的自定義佈局的比較。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。