WordPress自定义主题新闻页面自定义查询分页实现求助

我来帮你搞定这个分页问题！你的现有代码已经能正确渲染新闻内容，但缺少分页的核心逻辑——让WordPress识别当前页码，并且生成可点击的分页导航。下面是完整的修改方案，同时我也修复了代码里的小问题（比如死链接）：

步骤1：添加分页参数到自定义查询 #

首先，我们需要获取当前页面的页码（paged参数），并把它传入WP_Query的参数中，这样查询才能知道要加载哪一页的内容。

步骤2：生成分页导航 #

循环结束后，使用paginate_links()函数生成分页按钮，这个函数需要结合自定义查询的总页数、当前页码等参数来生成正确的链接。

步骤3：重置查询（重要） #

最后一定要重置WP_Query，避免影响后续的WordPress主循环。

修改后的完整代码 #

$atts = shortcode_atts( array( 
    'post_type' => 'post', 
    'posts_per_page'=> 4, 
    'category_name'=> 'news', 
    'featured' => 'false', 
    'sidebar'=> 'false' 
), $atts );

// 获取当前页码，默认是第1页
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
// 把分页参数添加到查询属性中
$atts['paged'] = $paged;

$the_query = new WP_Query($atts);
if($the_query->have_posts()) { 
    while($the_query->have_posts()) { 
        $the_query->the_post(); ?>
        <div class="col-md col-xl-6">
            <div class=" mt-2 mb-2">
                <!-- 修复死链接：替换#为文章的真实链接 -->
                <a href="<?php echo get_permalink(); ?>">
                    <div class="latest-news__wrapper">
                        <div class=" lazyloaded">
                            <?php if(get_the_post_thumbnail()){
                                echo get_the_post_thumbnail(get_the_ID(), 'medium', ['class' => 'latest-news__thumbnail']);
                            }else{
                                echo '<img class="rounded-3 latest-news__thumbnail" src="'. site_url() . '/wp-content/uploads/2022/08/da084e01-7cae-3ee6-8b2e-1f0e76fd397f.jpg'.'" alt="'. get_the_title() .'" />';
                            }?>
                        </div>
                        <div class="latest-news__info">
                            <div class="latest-news__date"><?php the_time('j F, Y') ?></div>
                            <h4 class="latest-news__title text-color-5 lines-2">
                                <?php 
                                $title = get_the_title();
                                if (strlen($title) > 30) { 
                                    $title_short = substr($title, 0, 30);
                                    preg_match('/^(.*)\s/s', $title_short, $matches);
                                    $title_short = $matches[1] ?? $title_short;
                                    $title_short .= ' ...';
                                } else { 
                                    $title_short = $title;
                                } 
                                echo $title_short; ?>
                            </h4>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    <?php } ?>

    <!-- 生成分页导航 -->
    <div class="pagination-wrapper mt-4">
        <?php
        $pagination_args = array(
            'base'         => str_replace(999999999, '%#%', esc_url(get_pagenum_link(999999999))),
            'format'       => '?paged=%#%',
            'current'      => max(1, $paged),
            'total'        => $the_query->max_num_pages,
            'prev_text'    => __('« Previous'),
            'next_text'    => __('Next »'),
            'type'         => 'list'
        );
        echo paginate_links($pagination_args);
        ?>
    </div>

<?php 
} else {
    // 如果没有内容，显示提示
    echo '<p class="text-center">暂无新闻内容</p>';
}
// 重置查询，避免影响后续循环
wp_reset_postdata();

关键改动说明 #

• 分页参数处理：通过get_query_var('paged')获取当前页码，确保查询加载对应页面的内容
• 修复文章链接：把<a href="#">替换为get_permalink()，让用户能点击跳转到文章详情页
• 优化缩略图调用：给get_the_post_thumbnail()添加了尺寸参数（medium）和图片alt属性，提升SEO
• 分页导航生成：使用paginate_links()生成样式友好的分页按钮，你可以通过CSS调整.pagination-wrapper和分页列表的样式
• 重置查询：wp_reset_postdata()恢复原始的文章数据，避免后续代码出现异常

这样修改后，你的新闻页面就能正常分页，同时保留了文章缩略图、标题和链接的功能啦！

内容的提问来源于stack exchange，提问作者Jovan Jovanovic