WordPress - 自定义存档页面答案

【问题标题】：WordPress - custom archive pageWordPress - 自定义存档页面
【发布时间】：2019-07-01 11:41:06
【问题描述】：

我创建了一个自定义 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; ?>

【问题讨论】：

在哪个帖子应该去哪里的背后是否有任何（数学）逻辑，或者这只是任意的？从您目前的描述中，我无法真正说出，尤其是在 “等等..”之后应该如何继续。
所以最新的帖子应该在页面的顶部，然后所有其他的都下拉。我知道您可以创建一个代码块，在其中创建一个帖子存档，然后在第二个循环中找到下一个帖子并重复该代码块（因此看起来相同的存档帖子）。我想要实现的是拥有不同外观的存档帖子，例如一个宽度为 100% 的帖子，然后是第二个宽度为 50% 的帖子。换句话说，我试图避免每个档案条目看起来相同
好吧，如果你只是想以不同的方式格式化第一个帖子，你只需要知道你是否在第一个循环迭代中。使用一个小标志来确定这是相当微不足道的，例如在循环之前设置$isFirstIteration = true;，并在循环迭代结束时将其设置为 false ...

标签： html css wordpress

【解决方案1】：

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

我是 WordPress 开发的新手。因此，请在生产环境中使用之前在 localhost 上进行验证。

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

【讨论】：

【解决方案2】：

如我所见，您想将帖子分成不同的类别。因此，您可以更改标记，使某些列将使用某些 CSS 类定义（您可以设置条件以检查当前帖子是否在该类别中，然后添加 CSS 类或类似的东西）。如果您想将它们拆分到一个 Wordpress Loop 之外，您可以使用 Multiple WordPress Loops 为不同类别制作自定义模板。

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

【讨论】：