如何在WordPress中显示父页面的子页面列表

2020-12-22
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: 1pxsolid#CCC; padding: 20px;}

应用自定义CSS后，您可以预览父页面。这就是在我们的测试WordPress网站上的外观。

该插件提供了一堆简短代码参数，可让您设置深度，排除页面，项目数量等。有关详细信息，请参阅插件页面以获取详细文档。

方法2。使用代码列出父页面的子页面

这种方法有点先进，需要您向WordPress网站添加代码。如果您之前没有做过，请查看我们的指南，了解如何在WordPress中复制和粘贴代码。

要在父页面下列出子页面，您需要在特定于站点的插件或主题的functions.php文件中添加以下代码：

functionwpb_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');