调用全站文章,前4篇为一个循环,后3篇为一个循环

风中赏雪 Wordpress Wordpress 2025-10-31 694 0
<section class="section editors-picks mb-20">
    <div class="title-wrap">
        <h3 class="section-title">最新文章</h3>
        <a href="<?php echo home_url('/latest'); ?>" class="all-posts-url">查看全部</a>
    </div>
    <div class="row">
        <?php 
        // 获取全站最新文章
        $args = array(
            'posts_per_page' => 7, // 获取7篇文章(前4篇 + 后3篇)
            'orderby' => 'date',
            'order' => 'DESC',
            'post_status' => 'publish'
        );
        
        $latest_posts = new WP_Query($args);
        
        if ($latest_posts->have_posts()) {
            $count = 0;
            
            // 第一个循环:前4篇文章
            echo '<div class="col-lg-7">';
            echo '<div class="row">'; // 添加内部row来布局前4篇文章
            
            while ($latest_posts->have_posts() && $count < 4) {
                $latest_posts->the_post();
                $count++;
        ?>
                <div class="col-lg-6 col-md-6"> <!-- 每篇文章占6列,这样每行显示2篇 -->
                    <article class="entry">
                        <div class="entry__img-holder">
                            <a href="<?php the_permalink(); ?>">
                                <div class="thumb-container thumb-75">
                                    <?php if (has_post_thumbnail()) : ?>
                                        <img data-src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'medium'); ?>" 
                                             src="<?php echo get_template_directory_uri(); ?>/static/picture/empty.png" 
                                             class="entry__img lazyload" alt="<?php the_title_attribute(); ?>" />
                                    <?php else : ?>
                                        <img data-src="<?php echo get_template_directory_uri(); ?>/static/picture/default.jpg" 
                                             src="<?php echo get_template_directory_uri(); ?>/static/picture/empty.png" 
                                             class="entry__img lazyload" alt="<?php the_title_attribute(); ?>" />
                                    <?php endif; ?>
                                </div>
                            </a>
                        </div>
                        <div class="entry__body">
                            <div class="entry__header">
                                <?php
                                $categories = get_the_category();
                                if (!empty($categories)) {
                                    $first_category = $categories[0];
                                    echo '<a href="' . get_category_link($first_category->term_id) . '" class="entry__meta-category">' . esc_html($first_category->name) . '</a>';
                                }
                                ?>
                                <h2 class="entry__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                                <ul class="entry__meta">
                                    <li class="entry__meta-author"><i class="ui-author"></i><a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"><?php the_author(); ?></a></li>
                                    <li class="entry__meta-date"><i class="ui-date"></i> <?php the_time('Y年n月j日'); ?></li>
                                    <li class="entry__meta-comments"><i class="ui-comments"></i><a href="<?php comments_link(); ?>"><?php comments_number('0', '1', '%'); ?></a></li>
                                </ul>
                            </div>
                            <div class="entry__excerpt">
                                <p><?php echo wp_trim_words(get_the_excerpt(), 20, '...'); ?></p>
                            </div>
                        </div>
                    </article>
                </div>
        <?php
            }
            echo '</div>'; // 结束内部row
            echo '</div>'; // 结束col-lg-7
            
            // 第二个循环:后3篇文章(小图列表)
            echo '<div class="col-lg-5">';
            echo '<ul class="post-list-small">';
            
            while ($latest_posts->have_posts()) {
                $latest_posts->the_post();
        ?>
                <li class="post-list-small__item">
                    <article class="post-list-small__entry">
                        <div class="post-list-small__img-holder">
                            <?php if (has_post_thumbnail()) : ?>
                                <img src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'thumbnail'); ?>" class="post-list-small__img" alt="<?php the_title_attribute(); ?>">
                            <?php else : ?>
                                <img src="<?php echo get_template_directory_uri(); ?>/static/picture/default-thumb.jpg" class="post-list-small__img" alt="<?php the_title_attribute(); ?>">
                            <?php endif; ?>
                        </div>
                        <div class="post-list-small__body">
                            <h3 class="post-list-small__entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                            <ul class="entry__meta">
                                <li class="entry__meta-date"><i class="ui-date"></i> <?php the_time('Y年n月j日'); ?></li>
                            </ul>
                        </div>
                    </article>
                </li>
        <?php
            }
            echo '</ul>';
            echo '</div>';
        } else {
            echo '<div class="col-12"><p>暂无文章</p></div>';
        }
        
        wp_reset_postdata();
        ?>
    </div>
</section>
<!-- end 全站最新文章 -->