html - WordPress - 自定义存档页面

Question

我创建了一个自定义 HTML 存档博客页面，我想在其中放置 WordPress 帖子。自定义页面有几种不同的布局，因此循环浏览帖子只是重新生成我试图避免的整个页面。我要做的是遍历每个帖子，然后将该帖子放入相关的存档栏中。

因此，第 1 篇文章进入第 1 行第 1 列，第 2 篇文章进入第 2 行第 1 列，第 3 篇文章进入第 2 行第 2 列，第 4 篇文章进入第 2 行第 3 列，依此类推...

如果这不可能，有没有办法让我拥有一个代码块，例如只有第一行和列如下所示，每次 PHP 循环迭代时，CSS 标记都会发生变化。例如，在第一次迭代中，col 为 100% 宽度，在第二次迭代中，col 为 50% 宽度。

这很难解释，所以希望上面的内容有些道理。

下面是标记的示例。

<?php if (have_posts()) : while(have_posts()) : the_post(); ?>


<!-- ROW 1 -->
<div class="card mt-5 row-card-shadow">
            <div class="row no-gutters">
                <div class="col-md-6">
                    <img src="//placehold.it/450x350" class="img-fluid" alt="">
                </div>
                <!-- COL 2 POST-1 -->
                <div class="col-md-6">
                    <div class="card-block p-3">
                        <h4 class="card-title"><?php the_title(); ?></h4>
                        <p class="card-text"><?php the_excerpt(); ?></p>
                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                        <a href="<?php the_permalink(); ?>" class="btn btn-sm btn-primary">Read more..</a>
                    </div>
                </div>
            </div>
        </div>



        <!-- ROW 2 -->
        <div class="row py-5 row-three-cards">
            <!-- COL 1 POST-2 -->
            <div class="col-md-4 d-flex align-items-stretch">
                <div class="card" style="width: auto;">
                    <img class="card-img-top" src="//placehold.it/200" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">TEST</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-sm btn-primary">Read more..</a>
                    </div>
                </div> 
            </div>
            <!-- COL 2 POST-3 -->
            <div class="col-md-4 d-flex align-items-stretch">
                <div class="card" style="width: auto;">
                    <img class="card-img-top" src="//placehold.it/200" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-sm btn-primary">Read more..</a>
                    </div>
                </div> 
            </div>
            <!-- COL 3 POST-4 -->
            <div class="col-md-4 d-flex align-items-stretch">
                <div class="card" style="width: auto;">
                    <img class="card-img-top" src="//placehold.it/200" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-sm btn-primary">Read more..</a>
                    </div>
                </div> 
            </div>                
        </div>
   <?php endwhile; endif; ?>

Answer 1

这是我在 WP Beginner 中找到的内容，但我正在根据您的需要对其进行修改。

我是 WordPress 开发新手。因此，在生产环境中使用之前，请在本地主机上验证这一点。

    <?php

    $archieve_post = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>-1)); ?>

    <?php if ( $archieve_post->have_posts() ) : ?>

    <ul>
        <?php while ( $archieve_post->have_posts() ) : $archieve_post->the_post(); ?>
            <li>
<div class="card mt-5 row-card-shadow">
            <div class="row no-gutters">
                <div class="col-md-6">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>
<div class="col-md-6">
                    <div class="card-block p-3">
                        <h4 class="card-title"><?php the_title(); ?></h4>
                        <p class="card-text"><?php the_excerpt(); ?></p>
                        <a href="<?php the_permalink(); ?>" class="btn btn-sm btn-primary">Read more..</a>
                    </div>
                </div>
            </div>
        </div>
        <?php endwhile; ?>
    </ul>

        <?php wp_reset_postdata(); ?>

    <?php else : ?>
        <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
    <?php endif; ?>