WordPress 父级Page页面调用所属Page子页面内容

在WordPress中，要在父级页面中调用并显示其所属子页面的内容，有以下几种方法。我将从简单到复杂为您介绍：

方法一：使用页面属性（简单但功能有限）

在编辑父页面时，可以在右侧的“页面属性”中找到“页面排序”和“子页面”选项：

• 设置正确的“父级”关系
• 通过短代码或主题功能显示

方法二：通过短代码（推荐）

在主题的 functions.php文件中添加以下代码：

/**
 * 显示子页面列表的短代码
 * 使用方法：[child_pages] 或 [child_pages columns="2" orderby="menu_order" order="ASC"]
 */
function child_pages_shortcode( $atts ) {
    // 短代码默认参数
    $atts = shortcode_atts( array(
        'columns'   => 1,      // 列数
        'orderby'   => 'menu_order', // 排序字段 (menu_order, date, title)
        'order'     => 'ASC',  // 排序方式
        'depth'     => 1,      // 嵌套深度
        'show_date' => false,  // 是否显示日期
        'exclude'   => '',     // 排除的页面ID
    ), $atts, 'child_pages' );

    global $post;
    
    // 获取当前页面的子页面
    $args = array(
        'post_type'      => 'page',
        'post_parent'    => $post->ID,
        'posts_per_page' => -1,
        'orderby'        => $atts['orderby'],
        'order'          => $atts['order'],
        'post_status'    => 'publish',
    );
    
    if ( ! empty( $atts['exclude'] ) ) {
        $args['post__not_in'] = array_map( 'intval', explode( ',', $atts['exclude'] ) );
    }
    
    $child_pages = new WP_Query( $args );
    
    if ( ! $child_pages->have_posts() ) {
        return '<p>暂无子页面</p>';
    }
    
    // 开始输出
    $output = '<div class="child-pages-grid columns-' . esc_attr( $atts['columns'] ) . '">';
    
    while ( $child_pages->have_posts() ) {
        $child_pages->the_post();
        
        $output .= '<div class="child-page-item">';
        $output .= '<a href="' . get_permalink() . '" class="child-page-link">';
        
        // 显示特色图片
        if ( has_post_thumbnail() ) {
            $output .= '<div class="child-page-thumbnail">';
            $output .= get_the_post_thumbnail( get_the_ID(), 'medium' );
            $output .= '</div>';
        }
        
        $output .= '<h3 class="child-page-title">' . get_the_title() . '</h3>';
        
        // 显示摘要
        $output .= '<div class="child-page-excerpt">';
        $output .= wp_trim_words( get_the_excerpt(), 20, '...' );
        $output .= '</div>';
        
        $output .= '</a>';
        $output .= '</div>';
    }
    
    $output .= '</div>';
    
    wp_reset_postdata();
    
    return $output;
}
add_shortcode( 'child_pages', 'child_pages_shortcode' );

使用方式：

1. 将代码添加到主题的 functions.php文件中
2. 在父页面编辑器中，插入短代码：[child_pages]
3. 可选参数：
   • [child_pages columns="3"]– 3列布局
   • [child_pages orderby="date" order="DESC"]– 按日期倒序
   • [child_pages exclude="15,23"]– 排除ID为15和23的页面

方法三：在页面模板中直接调用（最灵活）

创建一个页面模板，比如 template-child-pages.php：

<?php
/**
 * Template Name: 显示子页面的模板
 */

get_header(); ?>

<div class="container">
    <?php while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="entry-header">
                <h1 class="entry-title"><?php the_title(); ?></h1>
            </header>
            
            <div class="entry-content">
                <?php the_content(); ?>
                
                <?php
                // 获取子页面
                $args = array(
                    'post_type'      => 'page',
                    'post_parent'    => get_the_ID(),
                    'posts_per_page' => -1,
                    'orderby'        => 'menu_order',
                    'order'          => 'ASC',
                );
                
                $child_pages = new WP_Query( $args );
                
                if ( $child_pages->have_posts() ) : ?>
                    <div class="child-pages-section">
                        <h2>相关内容</h2>
                        <div class="child-pages-grid">
                            <?php while ( $child_pages->have_posts() ) : $child_pages->the_post(); ?>
                                <div class="child-page-card">
                                    <?php if ( has_post_thumbnail() ) : ?>
                                        <a href="<?php the_permalink(); ?>" class="child-page-image">
                                            <?php the_post_thumbnail( 'medium' ); ?>
                                        </a>
                                    <?php endif; ?>
                                    
                                    <div class="child-page-content">
                                        <h3>
                                            <a href="<?php the_permalink(); ?>">
                                                <?php the_title(); ?>
                                            </a>
                                        </h3>
                                        
                                        <div class="child-page-excerpt">
                                            <?php echo wp_trim_words( get_the_excerpt(), 30, '...' ); ?>
                                        </div>
                                        
                                        <a href="<?php the_permalink(); ?>" class="read-more">
                                            查看更多 →
                                        </a>
                                    </div>
                                </div>
                            <?php endwhile; ?>
                        </div>
                    </div>
                <?php endif; 
                
                wp_reset_postdata();
                ?>
            </div>
        </article>
    <?php endwhile; ?>
</div>

<?php get_footer(); ?>

使用方式：

1. 将模板文件上传到主题文件夹
2. 在页面编辑器的“页面属性”中选择“显示子页面的模板”
3. 更新页面

方法四：通过插件（无需代码）

如果你不想写代码，可以使用这些插件：

1. List category posts​ – 可以列出任何类型的内容
2. Page-list​ – 专门用于显示页面列表
3. Display Posts​ – 功能强大的展示插件
4. Shortcodes Ultimate​ – 包含页面列表短代码

方法五：添加CSS样式

无论使用哪种方法，都可以添加CSS来美化显示效果：

/* 网格布局 */
.child-pages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

/* 子页面卡片样式 */
.child-page-card {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #fff;
}

.child-page-card:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}

/* 图片样式 */
.child-page-image {
    display: block;
    height: 200px;
    overflow: hidden;
}

.child-page-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.child-page-card:hover .child-page-image img {
    transform: scale(1.05);
}

/* 内容区域 */
.child-page-content {
    padding: 20px;
}

.child-page-content h3 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
}

.child-page-content h3 a {
    color: #333;
    text-decoration: none;
}

.child-page-content h3 a:hover {
    color: #0073aa;
}

.child-page-excerpt {
    color: #666;
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* 查看更多按钮 */
.read-more {
    display: inline-block;
    color: #0073aa;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9em;
}

.read-more:hover {
    text-decoration: underline;
}

推荐方案

1. 新手/快速实现：使用方法一的短代码，最简单快捷
2. 需要定制设计：使用方法三的页面模板，控制力最强
3. 不想写代码：安装“Display Posts”或“Shortcodes Ultimate”插件

最佳实践提示：

• 为子页面设置特色图片，显示效果会更好
• 通过“页面属性”中的“菜单顺序”来控制子页面的显示顺序
• 定期清理不再需要的子页面，保持列表整洁

如果你需要更具体的功能（比如分页、过滤、搜索等），请告诉我你的具体需求，我可以为你定制代码。