微信同号：189-0733-7671

WordPress 获取父页面下所有子页面的完整指南

本文介绍了WordPress中获取页面列表的两个核心函数get_pages()和wp_list_pages()，重点阐述了最常用的get_pages()函数。文章提供了该函数的基础用法和三个可直接复制的代码示例，分别用于获取当前页面的子页面、特定父页面的子页面以及当前父页面下的所有层级子页面，并展示了如何自定义输出样式。

WordPress基础教程
阅读时间: 241 分钟
最后更新时间：2026年3月10日

核心函数：get_pages()和 wp_list_pages()

方案一：使用 get_pages()（最常用）

基础用法

<?php
$args = array(
    'child_of'    => 父页面ID,
    'parent'      => 父页面ID, // 或使用这个参数
    'sort_column' => 'menu_order,post_title',
    'sort_order'  => 'ASC',
    'post_type'   => 'page',
    'post_status' => 'publish',
);

$subpages = get_pages( $args );

if ( $subpages ) {
    echo '<ul class="subpages-list">';
    foreach ( $subpages as $page ) {
        echo '<li><a href="' . get_permalink( $page->ID ) . '">' . $page->post_title . '</a></li>';
    }
    echo '</ul>';
} else {
    echo '<p>暂无子页面</p>';
}
?>

直接复制使用的示例

示例1：获取当前页面的子页面

<?php
$current_page_id = get_the_ID();
$subpages = get_pages( array(
    'child_of'    => $current_page_id,
    'sort_column' => 'menu_order',
    'sort_order'  => 'ASC',
    'hierarchical' => 0, // 只显示直接子页面
) );

if ( $subpages ) {
    echo '<div class="subpages-section">';
    echo '<h3>相关页面</h3>';
    echo '<ul>';
    foreach ( $subpages as $page ) {
        echo '<li>';
        echo '<a href="' . get_permalink( $page->ID ) . '">';
        echo '<span class="page-title">' . $page->post_title . '</span>';
        if ( $page->post_excerpt ) {
            echo '<span class="page-excerpt">' . $page->post_excerpt . '</span>';
        }
        echo '</a>';
        echo '</li>';
    }
    echo '</ul>';
    echo '</div>';
}
?>

示例2：获取特定父页面的子页面（使用页面ID）

<?php
// 假设父页面ID是 5
$parent_page_id = 5;
$subpages = get_pages( array(
    'parent'      => $parent_page_id,
    'sort_column' => 'menu_order,post_date',
    'sort_order'  => 'DESC',
) );

if ( $subpages ) {
    echo '<div class="child-pages-grid">';
    foreach ( $subpages as $page ) {
        echo '<div class="child-page-card">';
        echo '<h4><a href="' . get_permalink( $page->ID ) . '">' . $page->post_title . '</a></h4>';
        
        // 获取特色图片
        if ( has_post_thumbnail( $page->ID ) ) {
            echo get_the_post_thumbnail( $page->ID, 'medium', array( 'class' => 'page-thumbnail' ) );
        }
        
        // 显示摘要
        if ( $page->post_excerpt ) {
            echo '<p class="page-summary">' . wp_trim_words( $page->post_excerpt, 20 ) . '</p>';
        }
        
        echo '</div>';
    }
    echo '</div>';
}
?>

示例3：获取当前父页面下的所有子页面（包含子子页面）

<?php
$current_page_id = get_the_ID();
$all_descendants = get_pages( array(
    'child_of'    => $current_page_id,
    'sort_column' => 'menu_order,post_title',
    'sort_order'  => 'ASC',
    'hierarchical' => 1, // 显示所有层级
) );

if ( $all_descendants ) {
    $pages_by_parent = array();
    
    // 按父页面分组
    foreach ( $all_descendants as $page ) {
        $pages_by_parent[$page->post_parent][] = $page;
    }
    
    // 显示树形结构
    function display_page_tree( $parent_id, $pages_by_parent, $depth = 0 ) {
        if ( ! isset( $pages_by_parent[$parent_id] ) ) return;
        
        $indent = str_repeat( '&nbsp;&nbsp;&nbsp;&nbsp;', $depth );
        
        echo '<ul class="page-tree depth-' . $depth . '">';
        foreach ( $pages_by_parent[$parent_id] as $page ) {
            echo '<li>';
            echo $indent . '<a href="' . get_permalink( $page->ID ) . '">' . $page->post_title . '</a>';
            
            // 递归显示子页面
            display_page_tree( $page->ID, $pages_by_parent, $depth + 1 );
            
            echo '</li>';
        }
        echo '</ul>';
    }
    
    display_page_tree( $current_page_id, $pages_by_parent );
}
?>

方案二：使用 wp_list_pages()（自动生成列表）

<?php
// 显示当前页面的子页面
if ( is_page() ) {
    $current_page_id = get_the_ID();
    $children = wp_list_pages( array(
        'title_li'    => '', // 不显示标题
        'child_of'    => $current_page_id,
        'echo'        => 0,  // 返回字符串而不是直接输出
        'depth'       => 1,  // 只显示一层
        'sort_column' => 'menu_order',
    ) );
    
    if ( $children ) {
        echo '<div class="widget-subpages">';
        echo '<h3>子页面</h3>';
        echo '<ul>' . $children . '</ul>';
        echo '</div>';
    }
}
?>

方案三：使用 WP_Query（更灵活的控制）

<?php
$args = array(
    'post_type'      => 'page',
    'posts_per_page' => -1,
    'post_parent'    => 父页面ID,
    'order'          => 'ASC',
    'orderby'        => 'menu_order',
    'post_status'    => 'publish',
);

$child_pages_query = new WP_Query( $args );

if ( $child_pages_query->have_posts() ) {
    echo '<div class="child-pages-container">';
    while ( $child_pages_query->have_posts() ) {
        $child_pages_query->the_post();
        ?>
        <article class="child-page">
            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="thumbnail"><?php the_post_thumbnail( 'medium' ); ?></div>
            <?php endif; ?>
            <div class="excerpt"><?php the_excerpt(); ?></div>
            <a href="<?php the_permalink(); ?>" class="read-more">查看详情 →</a>
        </article>
        <?php
    }
    echo '</div>';
    wp_reset_postdata();
} else {
    echo '<p>暂时没有子页面</p>';
}
?>

🎯 实用功能函数（复制到主题的 functions.php）

功能1：通用子页面列表函数

/**
 * 获取并显示子页面列表
 * @param int $parent_id 父页面ID
 * @param string $title 列表标题
 * @param bool $show_excerpt 是否显示摘要
 * @param bool $show_thumbnail 是否显示特色图片
 * @return string
 */
function display_child_pages( $parent_id = null, $title = '子页面', $show_excerpt = true, $show_thumbnail = false ) {
    if ( ! $parent_id ) {
        $parent_id = get_the_ID();
    }
    
    $args = array(
        'post_type'      => 'page',
        'posts_per_page' => -1,
        'post_parent'    => $parent_id,
        'order'          => 'ASC',
        'orderby'        => 'menu_order',
        'post_status'    => 'publish',
    );
    
    $child_pages = new WP_Query( $args );
    
    if ( ! $child_pages->have_posts() ) {
        return '';
    }
    
    $output = '<div class="child-pages-wrapper">';
    $output .= '<h2 class="section-title">' . esc_html( $title ) . '</h2>';
    $output .= '<div class="child-pages-grid">';
    
    while ( $child_pages->have_posts() ) {
        $child_pages->the_post();
        
        $output .= '<div class="child-page-item">';
        
        if ( $show_thumbnail && has_post_thumbnail() ) {
            $output .= '<div class="page-thumb">' . get_the_post_thumbnail( get_the_ID(), 'medium' ) . '</div>';
        }
        
        $output .= '<h3><a href="' . get_permalink() . '">' . get_the_title() . '</a></h3>';
        
        if ( $show_excerpt && get_the_excerpt() ) {
            $output .= '<div class="page-excerpt">' . wp_trim_words( get_the_excerpt(), 20 ) . '</div>';
        }
        
        $output .= '</div>';
    }
    
    $output .= '</div></div>';
    
    wp_reset_postdata();
    
    return $output;
}

使用方法：

<?php
// 显示当前页面的子页面
echo display_child_pages();

// 显示指定父页面的子页面
echo display_child_pages( 5, '产品系列', true, true );

// 在模板中直接使用
if ( function_exists( 'display_child_pages' ) ) {
    echo display_child_pages( get_the_ID(), '相关页面', false, true );
}
?>

功能2：子页面导航面包屑

/**
 * 显示子页面导航面包屑
 * @param int $current_page_id 当前页面ID
 */
function display_child_page_breadcrumb( $current_page_id = null ) {
    if ( ! $current_page_id ) {
        $current_page_id = get_the_ID();
    }
    
    $parent_id = wp_get_post_parent_id( $current_page_id );
    
    if ( ! $parent_id ) {
        return; // 没有父页面
    }
    
    $siblings = get_pages( array(
        'parent'      => $parent_id,
        'sort_column' => 'menu_order',
        'sort_order'  => 'ASC',
    ) );
    
    if ( ! $siblings ) {
        return;
    }
    
    echo '<nav class="sibling-pages-nav">';
    echo '<span class="nav-label">相关页面: </span>';
    echo '<ul>';
    
    foreach ( $siblings as $page ) {
        $active_class = ( $page->ID == $current_page_id ) ? ' class="active"' : '';
        echo '<li' . $active_class . '>';
        echo '<a href="' . get_permalink( $page->ID ) . '">' . $page->post_title . '</a>';
        echo '</li>';
    }
    
    echo '</ul>';
    echo '</nav>';
}

🎨 完整的可复制模板

模板1：带缩略图的网格布局

<?php
/*
 * 子页面网格模板
 * 复制到你的页面模板中即可使用
 */
$parent_page_id = get_the_ID(); // 或指定特定ID
$child_pages = get_pages( array(
    'parent'      => $parent_page_id,
    'sort_column' => 'menu_order',
    'sort_order'  => 'ASC',
) );

if ( $child_pages ) :
?>
<div class="child-pages-grid-section">
    <h2 class="section-title">相关内容</h2>
    <div class="grid-container">
        <?php foreach ( $child_pages as $page ) : ?>
            <?php
            $page_link = get_permalink( $page->ID );
            $page_thumbnail = get_the_post_thumbnail( $page->ID, 'medium_large' );
            $page_excerpt = $page->post_excerpt ? wp_trim_words( $page->post_excerpt, 25 ) : '';
            ?>
            
            <div class="grid-item">
                <a href="<?php echo $page_link; ?>" class="grid-link">
                    <?php if ( $page_thumbnail ) : ?>
                        <div class="grid-image"><?php echo $page_thumbnail; ?></div>
                    <?php endif; ?>
                    
                    <div class="grid-content">
                        <h3 class="grid-title"><?php echo $page->post_title; ?></h3>
                        
                        <?php if ( $page_excerpt ) : ?>
                            <p class="grid-excerpt"><?php echo $page_excerpt; ?></p>
                        <?php endif; ?>
                        
                        <span class="grid-button">查看详情</span>
                    </div>
                </a>
            </div>
        <?php endforeach; ?>
    </div>
</div>

<style>
.child-pages-grid-section { margin: 40px 0; }
.section-title { font-size: 24px; margin-bottom: 30px; color: #333; }
.grid-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px; 
}
.grid-item { 
    border: 1px solid #eee; 
    border-radius: 8px; 
    overflow: hidden; 
    transition: transform 0.3s; 
}
.grid-item:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}
.grid-link { display: block; text-decoration: none; color: inherit; }
.grid-image { height: 200px; overflow: hidden; }
.grid-image img { width: 100%; height: 100%; object-fit: cover; }
.grid-content { padding: 20px; }
.grid-title { margin: 0 0 10px 0; font-size: 18px; color: #222; }
.grid-excerpt { color: #666; font-size: 14px; line-height: 1.6; margin-bottom: 15px; }
.grid-button { 
    display: inline-block; 
    color: #0073aa; 
    font-size: 14px; 
    font-weight: 600; 
}
</style>
<?php endif; ?>

模板2：手风琴式下拉列表

<?php
/*
 * 子页面手风琴列表
 * 适用于FAQ、文档等页面
 */
$parent_page_id = get_the_ID();
$child_pages = get_pages( array(
    'parent'      => $parent_page_id,
    'sort_column' => 'menu_order',
    'sort_order'  => 'ASC',
) );

if ( $child_pages ) :
?>
<div class="accordion-container">
    <h2>常见问题</h2>
    <?php foreach ( $child_pages as $index => $page ) : ?>
        <?php
        $page_id = 'accordion-item-' . $page->ID;
        $page_content = apply_filters( 'the_content', $page->post_content );
        ?>
        
        <div class="accordion-item">
            <input type="checkbox" id="<?php echo $page_id; ?>">
            <label for="<?php echo $page_id; ?>" class="accordion-header">
                <span class="accordion-title"><?php echo $page->post_title; ?></span>
                <span class="accordion-icon">+</span>
            </label>
            <div class="accordion-content">
                <?php echo $page_content; ?>
                <a href="<?php echo get_permalink( $page->ID ); ?>" class="read-more-link">查看完整页面</a>
            </div>
        </div>
    <?php endforeach; ?>
</div>

<style>
.accordion-container { max-width: 800px; margin: 40px auto; }
.accordion-item { border: 1px solid #ddd; margin-bottom: 10px; border-radius: 5px; overflow: hidden; }
.accordion-item input { display: none; }
.accordion-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 20px; 
    background: #f9f9f9; 
    cursor: pointer; 
    transition: background 0.3s; 
}
.accordion-header:hover { background: #f0f0f0; }
.accordion-title { font-size: 16px; font-weight: 600; color: #333; }
.accordion-icon { font-size: 20px; color: #666; transition: transform 0.3s; }
.accordion-content { 
    max-height: 0; 
    overflow: hidden; 
    padding: 0 20px; 
    transition: all 0.3s; 
    background: white; 
}
.accordion-item input:checked + .accordion-header .accordion-icon { transform: rotate(45deg); }
.accordion-item input:checked + .accordion-header + .accordion-content { 
    max-height: 1000px; 
    padding: 20px; 
}
.read-more-link { 
    display: inline-block; 
    margin-top: 15px; 
    color: #0073aa; 
    text-decoration: none; 
    font-weight: 600; 
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.accordion-item input').forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            document.querySelectorAll('.accordion-item input').forEach(function(otherCheckbox) {
                if (otherCheckbox !== checkbox && otherCheckbox.checked) {
                    otherCheckbox.checked = false;
                }
            });
        });
    });
});
</script>
<?php endif; ?>

🚀 短代码实现

创建短代码

// 添加到主题的functions.php
add_shortcode( 'child_pages', 'child_pages_shortcode' );

function child_pages_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'parent_id'    => null,
        'title'        => '子页面',
        'columns'      => 3,
        'show_image'   => true,
        'show_excerpt' => true,
        'limit'        => -1,
    ), $atts );
    
    $parent_id = $atts['parent_id'] ?: get_the_ID();
    
    $args = array(
        'post_type'      => 'page',
        'posts_per_page' => intval( $atts['limit'] ),
        'post_parent'    => intval( $parent_id ),
        'order'          => 'ASC',
        'orderby'        => 'menu_order',
    );
    
    $query = new WP_Query( $args );
    
    if ( ! $query->have_posts() ) {
        return '<p>暂无子页面</p>';
    }
    
    $output = '<div class="child-pages-shortcode">';
    $output .= '<h2>' . esc_html( $atts['title'] ) . '</h2>';
    $output .= '<div class="child-pages-grid columns-' . esc_attr( $atts['columns'] ) . '">';
    
    while ( $query->have_posts() ) {
        $query->the_post();
        
        $output .= '<div class="child-page-item">';
        
        if ( $atts['show_image'] && has_post_thumbnail() ) {
            $output .= '<div class="page-thumb">' . get_the_post_thumbnail( get_the_ID(), 'medium' ) . '</div>';
        }
        
        $output .= '<h3><a href="' . get_permalink() . '">' . get_the_title() . '</a></h3>';
        
        if ( $atts['show_excerpt'] && get_the_excerpt() ) {
            $output .= '<div class="page-excerpt">' . wp_trim_words( get_the_excerpt(), 20 ) . '</div>';
        }
        
        $output .= '</div>';
    }
    
    $output .= '</div></div>';
    
    wp_reset_postdata();
    
    return $output;
}

使用短代码：

<!-- 在页面编辑器中插入 -->
[child_pages parent_id="5" title="产品分类" columns="4" show_image="true"]

🔧 性能优化建议

<?php
// 使用 transient 缓存结果
function get_cached_child_pages( $parent_id ) {
    $transient_key = 'child_pages_' . $parent_id;
    $child_pages = get_transient( $transient_key );
    
    if ( false === $child_pages ) {
        $child_pages = get_pages( array(
            'parent'      => $parent_id,
            'sort_column' => 'menu_order',
            'sort_order'  => 'ASC',
        ) );
        
        // 缓存12小时
        set_transient( $transient_key, $child_pages, 12 * HOUR_IN_SECONDS );
    }
    
    return $child_pages;
}

// 清除缓存（在页面更新时）
add_action( 'save_post_page', 'clear_child_pages_cache' );
function clear_child_pages_cache( $post_id ) {
    $parent_id = wp_get_post_parent_id( $post_id );
    if ( $parent_id ) {
        delete_transient( 'child_pages_' . $parent_id );
    }
}
?>

📊 常用参数速查表

参数说明示例值
parent父页面ID5
child_of父页面ID（包含所有子层级）5
sort_column排序字段'menu_order', 'post_title', 'post_date'
sort_order排序方式'ASC', 'DESC'
hierarchical是否包含子子页面0(否), 1(是)
exclude排除的页面IDarray( 10, 20 )
include包含的页面IDarray( 15, 25 )
authors按作者筛选array( 1, 2 )
post_type文章类型'page'
post_status文章状态'publish'

💡 快速复制区 – 最常用代码：

<?php
/* 获取当前页面的所有子页面 - 最简单的用法 */
$child_pages = get_pages( array(
    'parent'      => get_the_ID(),
    'sort_column' => 'menu_order',
    'sort_order'  => 'ASC',
) );

if ( $child_pages ) {
    echo '<ul>';
    foreach ( $child_pages as $page ) {
        echo '<li><a href="' . get_permalink( $page->ID ) . '">' . $page->post_title . '</a></li>';
    }
    echo '</ul>';
}
?>
<?php
/* 在页面模板中显示子页面 - 完整的示例 */
if ( is_page() ) {
    $children = get_pages( array(
        'child_of' => get_the_ID(),
        'sort_column' => 'menu_order',
    ) );
    
    if ( $children ) {
        echo '<div class="page-children">';
        echo '<h3>相关页面</h3>';
        echo '<div class="children-grid">';
        
        foreach ( $children as $child ) {
            echo '<div class="child-page">';
            if ( has_post_thumbnail( $child->ID ) ) {
                echo get_the_post_thumbnail( $child->ID, 'medium' );
            }
            echo '<h4><a href="' . get_permalink( $child->ID ) . '">' . $child->post_title . '</a></h4>';
            echo '</div>';
        }
        
        echo '</div></div>';
    }
}
?>

这篇文章有用吗？

点击星号为它评分！

平均评分 5 / 5. 投票数： 1

到目前为止还没有投票！成为第一位评论此文章。

在AI里面继续讨论：

曾凤祥

曾凤祥

WordPress技术负责人
小兽WordPress凭借15年的WordPress企业网站开发经验，坚持以“为企业而生的WordPress服务”为宗旨，累计为10万多家客户提供高品质WordPress建站服务，得到了客户的一致好评。我们一直用心对待每一个客户，我们坚信：“善待客户，将会成为终身客户”。小兽WordPress能坚持多年，是因为我们一直诚信。
领英主页

相关文章

如何让线上业务更上一层楼

还没有WordPress网站

还没有WordPress网站

不管你从事什么行业，WordPress都会为你提供一个专业的主题模板。在WordPress市场上有成千上万的免费主题，适合很多中小企业。

查看所有模板
已经有WordPress网站

已经有WordPress网站

小兽WordPress诚邀你一起学习WordPress，愿与各方携手升级改善您的WordPress网站，一起交流网站加速，网站优化等问题。

马上交个朋友

搜索您关心的

新浪微博 官方微信
扫一扫扫一扫 有惊喜
 站长QQ 网站地图

小兽WordPress是国内专业的WordPress企业主题模板开发团队

小兽WordPress提供WordPress主题、WordPress模版、WordPress定制开发等高端定制开发服务

购买WordPress企业主题模板请认准唯一官方网站 https://www.seo628.com

Copyright © 2012-2026 小兽WordPress All Rights Reserved  湘ICP备17006388号-5 湘公网安备43020002000238

微信联系
chat 扫码联系
模板建站
挑选模板 网站定制
免费诊断
咨询热线
咨询热线

189-0733-7671

返回顶部