WordPress博客给文章页添加上下篇导航

为了让用户有更好的体验，在文章页尾部添加写一段 GeneratePress 专用的「上下篇导航」代码，实现这种带系列标题、进度和前后文章卡片的效果，直接复制就能用。

先上效果图

主题： GeneratePress

使用方法（GeneratePress 通用）

1. 进入 WordPress 后台 → 外观 → 主题文件编辑器
2. 打开子主题的 functions.php（强烈建议用子主题，避免升级丢失）
3. 把上面的代码粘贴到文件最底部
4. 保存后，刷新任意文章页，就能看到和示例一样的两列卡片效果

GeneratePress 文章页「上下篇 / 系列导航」代码

// GeneratePress 文章页添加带系列标题的前后文章导航
add_action( 'generate_after_content', 'gp_add_series_navigation' );
function gp_add_series_navigation() {
    if ( ! is_single() ) return;

    // 获取当前文章所属的第一个分类（用作系列标题，可按需求修改）
    $categories = get_the_category();
    $series_title = ! empty( $categories ) ? $categories[0]->name : '系列文章';

    // 获取当前文章在分类中的排序位置（仅示例，如需精准系列请用自定义字段）
    $current_id = get_the_ID();
    $cat_id = ! empty( $categories ) ? $categories[0]->cat_ID : 0;

    $args = array(
        'cat' => $cat_id,
        'post_status' => 'publish',
        'orderby' => 'date',
        'order' => 'ASC',
        'posts_per_page' => -1,
        'fields' => 'ids'
    );
    $cat_posts = get_posts( $args );
    $current_index = array_search( $current_id, $cat_posts );
    $total_posts = count( $cat_posts );

    // 前后文章ID
    $prev_id = ( $current_index > 0 ) ? $cat_posts[$current_index - 1] : false;
    $next_id = ( $current_index < $total_posts - 1 ) ? $cat_posts[$current_index + 1] : false;
?>

<style>
.gp-series-nav-wrap {
    margin-top: 40px;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 25px;
}
.gp-series-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.gp-series-label {
    font-size: 16px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.gp-series-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 10px;
}
.gp-series-progress {
    font-size: 16px;
    color: #666;
    white-space: nowrap;
}
.gp-nav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.gp-nav-card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 25px;
    text-decoration: none;
    color: inherit;
}
.gp-nav-label {
    font-size: 16px;
    color: #007bff;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gp-nav-label.next {
    justify-content: flex-end;
}
.gp-nav-title {
    font-size: 16px;
    line-height: 1.4;
    color: #222;
    text-align: center;
}
.gp-nav-card:hover {
    background: #f8f9fa;
}
</style>

<div class="gp-series-nav-wrap">
    <div class="gp-series-header">
        <span class="gp-series-label">本系列的一部分</span>
        <h3 class="gp-series-title"><?php echo esc_html( $series_title ); ?></h3>
        <span class="gp-series-progress">Post <?php echo $current_index + 1; ?> of <?php echo $total_posts; ?></span>
    </div>

    <div class="gp-nav-grid">
        <?php if ( $prev_id ) : ?>
            <a href="<?php echo get_permalink( $prev_id ); ?>" class="gp-nav-card">
                <div class="gp-nav-label">
                    <span>&larr;</span> PREVIOUS
                </div>
                <div class="gp-nav-title">
                    <?php echo get_the_title( $prev_id ); ?>
                </div>
            </a>
        <?php else : ?>
            <div class="gp-nav-card" style="opacity:0.5;">
                <div class="gp-nav-label">&larr; PREVIOUS</div>
                <div class="gp-nav-title">已是系列第一篇</div>
            </div>
        <?php endif; ?>

        <?php if ( $next_id ) : ?>
            <a href="<?php echo get_permalink( $next_id ); ?>" class="gp-nav-card">
                <div class="gp-nav-label next">
                    UP NEXT <span>&rarr;</span>
                </div>
                <div class="gp-nav-title">
                    <?php echo get_the_title( $next_id ); ?>
                </div>
            </a>
        <?php else : ?>
            <div class="gp-nav-card" style="opacity:0.5;">
                <div class="gp-nav-label next">UP NEXT &rarr;</div>
                <div class="gp-nav-title">已是系列最后一篇</div>
            </div>
        <?php endif; ?>
    </div>
</div>

<?php
}

效果与自定义说明

• 可直接修改的部分：
  • color: #007bff：修改 PREVIOUS/UP NEXT 标签的颜色
  • border: 1px solid #eee：修改边框样式
  • padding: 25px：修改卡片内边距
  • $series_title：默认用分类名作为系列标题，你也可以改成自定义字段
  • 这段代码默认按「文章所属分类」来分组，自动计算系列进度（第几篇 / 总篇数）。