WordPress-自定义存档页

Question

我创建了一个自定义超文本标记语言归档博客页面，我想在其中放置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

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

这里是wordpress循环文档的链接。希望这对你有帮助。

Answer 2

这是我在WP初学者中发现的，但我正在根据您的需要修改它。

我是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; ?>