WordPress制作单页面菜单手动填写父页面 ID 自动获取其下所有子页面

//手动填写父页面 ID 自动获取其下所有子页面
//[page_navigation page_id="123"]
//其中 page_id="123" 是你手动填写的父页面的 ID。替换 "123" 为你实际的父页面 ID

function get_all_child_pages($parent_page_id) {
    // 查询当前页面下所有的子页面
    $args = array(
        'post_type'   => 'page',
        'post_parent' => $parent_page_id,
        'order'       => 'ASC',            // 排序方式
        'orderby'     => 'menu_order',     // 根据菜单排序
        'posts_per_page' => -1,            // 不限制数量
    );

    $query = new WP_Query($args);
    $child_pages = array();

    // 收集所有子页面
    while ($query->have_posts()) {
        $query->the_post();
        $child_pages[] = array(
            'ID'    => get_the_ID(),
            'title' => get_the_title(),
            'url'   => get_permalink(),
        );
        
        // 如果该页面有子页面，则递归获取子页面
        $child_pages = array_merge($child_pages, get_all_child_pages(get_the_ID()));
    }

    // 重置查询
    wp_reset_postdata();

    return $child_pages;
}

function custom_page_navigation_shortcode($atts) {
    // 解析简码参数，默认 page_id 为 0
    $atts = shortcode_atts(array(
        'page_id' => 0, // 通过简码传递的页面 ID
    ), $atts);

    $page_id = intval($atts['page_id']);
    if ($page_id <= 0) {
        return '<p>请提供有效的页面 ID。</p>';
    }

    // 获取父页面的信息
    $parent_page = get_post($page_id);
    if (!$parent_page) {
        return '<p>父页面不存在。</p>';
    }

    // 获取所有子页面
    $child_pages = get_all_child_pages($page_id);

    // 构建输出结果
    $output = '<ul class="page-navigation">';
    
    // 显示父页面
    $output .= '<li class="parent-page"><span class="arrow">→</span><a href="' . esc_url(get_permalink($parent_page)) . '">' . esc_html(get_the_title($parent_page)) . '</a></li>';
    
    // 显示子页面
    if (!empty($child_pages)) {
        foreach ($child_pages as $child) {
            // 检查当前页面是否为点击的链接
            $is_current_page = (get_the_ID() === $child['ID']);
            
            // 设置不同样式的链接
            if ($is_current_page) {
                $output .= '<li class="current-page"><span class="arrow">→</span><a href="' . esc_url($child['url']) . '">' . esc_html($child['title']) . '</a></li>';
            } else {
                $output .= '<li><span class="arrow">→</span><a href="' . esc_url($child['url']) . '">' . esc_html($child['title']) . '</a></li>';
            }
        }
    } else {
        $output .= '<li>該頁面沒有子頁面。</li>';
    }

    $output .= '</ul>';

    return $output;
}
add_shortcode('page_navigation', 'custom_page_navigation_shortcode');

使用说明：

1. 在 functions.php 或自定义插件中添加这段代码。

2. 然后你可以在任何页面中使用以下简码

[page_navigation page_id="123"]

如果直接在模版里面PHP 函数调用方式，可以修改一下代码。

function get_all_child_pages($parent_page_id) {
    // 查询当前页面下所有的子页面
    $args = array(
        'post_type'   => 'page',
        'post_parent' => $parent_page_id,
        'order'       => 'ASC',            // 排序方式
        'orderby'     => 'menu_order',     // 根据菜单排序
        'posts_per_page' => -1,            // 不限制数量
    );

    $query = new WP_Query($args);
    $child_pages = array();

    // 收集所有子页面
    while ($query->have_posts()) {
        $query->the_post();
        $child_pages[] = array(
            'ID'    => get_the_ID(),
            'title' => get_the_title(),
            'url'   => get_permalink(),
        );
        
        // 如果该页面有子页面，则递归获取子页面
        $child_pages = array_merge($child_pages, get_all_child_pages(get_the_ID()));
    }

    // 重置查询
    wp_reset_postdata();

    return $child_pages;
}

function get_page_navigation($parent_page_id) {
    // 获取父页面的信息
    $parent_page = get_post($parent_page_id);
    if (!$parent_page) {
        return '<p>父页面不存在。</p>';
    }

    // 获取所有子页面
    $child_pages = get_all_child_pages($parent_page_id);

    // 构建输出结果
    $output = '<ul class="page-navigation">';
    
    // 显示父页面
    $output .= '<li class="parent-page"><span class="arrow">→</span><a href="' . esc_url(get_permalink($parent_page)) . '">' . esc_html(get_the_title($parent_page)) . '</a></li>';
    
    // 显示子页面
    if (!empty($child_pages)) {
        foreach ($child_pages as $child) {
            // 检查当前页面是否为点击的链接
            $is_current_page = (get_the_ID() === $child['ID']);
            
            // 设置不同样式的链接
            if ($is_current_page) {
                $output .= '<li class="current-page"><span class="arrow">→</span><a href="' . esc_url($child['url']) . '">' . esc_html($child['title']) . '</a></li>';
            } else {
                $output .= '<li><span class="arrow">→</span><a href="' . esc_url($child['url']) . '">' . esc_html($child['title']) . '</a></li>';
            }
        }
    } else {
        $output .= '<li>该页面没有子页面。</li>';
    }

    $output .= '</ul>';

    return $output;
}

如何在模板中调用：

在你的 WordPress 模板文件中，比如 page.php、single.php 或者自定义的模板文件，你可以通过以下方式直接调用 get_page_navigation 函数来显示导航：

<?php
// 传入父页面的 ID
$parent_page_id = 123; // 替换为你实际的父页面 ID

// 调用函数并输出页面导航
echo get_page_navigation($parent_page_id);
?>