Question

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

因此，帖子1进入第1行第1列，帖子2进入第2行第1列，帖子3进入第2行第2列，帖子4进入第2行第3列，依此类推...

如果这不可能，那么有没有办法让我拥有一块代码，例如仅第一行和col如下所示，并且每次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; ?>

Answer 2

如我所见，您想将帖子分为不同的类别。因此，您可以更改标记，以创建将由某些CSS类定义的某些列（您可以设置条件，以检查当前帖子是否在类别中，然后添加CSS类或类似内容）。如果要将它们拆分到一个Wordpress循环之外，则可以使用多个WordPress循环为不同类别创建自定义模板。

这是wordpress loop文档的链接。希望对您有帮助。

WordPress-自定义存档页面

2 个答案: