如何为 Wordpress 做 Bootstrap Grid 自定义帖子类型循环？

Question

我创建了一个名为“portfolio”的自定义帖子类型，并希望在 2 列和 3 列中创建循环，并使用高级自定义字段上传图像，但我不确定要添加到以下内容实现它的代码。

我的步骤

首先：我想生成来自投资组合页面的自定义帖子类型。

第二：当用户将他们以前的项目上传到投资组合页面时。我只想将 8 个以前的样本循环到主页。

第三：我只想显示最近的帖子的 2 列网格。但是 3 列网格我只想显示较少的先前帖子。我正在正确地执行 bootstrap 4 网格。

这是目前对我不起作用的代码。当我将图像上传到投资组合页面时，主页上没有出现。

   <!-- recent work -->
    <div class="old-portfolio recent_work">
        <div class="container-fluid text-center">
            <div class="row">
              <?php
                  $alter_args = new WP_Query(array('numberposts' => 8,'orderby' => 'post_date','post_type' => 'portfolio','suppress_filters' => true ) );
                  if ( $alter_args->have_posts() ) : while ( $alter_args->have_posts() ) : $alter_args->the_post(); ?>

                <div class="portfolio-work col-xs-12 col-md-6 col-lg-12">
                    <a href="<?php the_field('portfolio_image'); ?>" data-lightbox="placeholder-image">
                        <img class="" src="<?php the_field('portfolio_image'); ?>"/>
                    </a>

                    <li class="portfolio-item">
                        <h3><?php the_title(); ?></h3>
                    </li>
                </div>
            </div>

            <div class="row">
              <div class="portfolio-work col-md-4">
                  <a href="<?php the_field('portfolio_image'); ?>" data-lightbox="placeholder-image">
                    <img class="" src="<?php the_field('portfolio_image'); ?>"/>
                  </a>

                  <li class="portfolio-item">
                     <h3><?php the_title(); ?></h>
                  </li>
                <?php endwhile; ?>
              </div>
            <?php endif; ?>
            </div>
        </div>
    </div>
    <!-- recent work -->

Answer 1

您需要在循环开始时启动一个计数器（通过设置一个变量）来为循环中的每个项目分配一个数字。您可以通过添加 $i == 0; 来做到这一点，并且在循环结束时，您需要将该变量增加一个 $i++; 以便数字在每个项目之后都会改变。完成此操作后，您可以通过在循环中编写 if/else 语句轻松更改项目的处理方式。在您的示例中，您希望将前 2 个项目设置为 col-md-6 类，其余项目设置为 col-md-4 类，因此您添加 <?php if($i < 2){echo "6";} else {echo "4";} ?>

<?php
    $alter_args = new WP_Query(array('numberposts' => 8,'orderby' => 'post_date','post_type' => 'portfolio','suppress_filters' => true ) );
    if ( $alter_args->have_posts() ) : ?>
<?php $i == 0; //Start a counter by setting a variable ?>
<?php while ( $alter_args->have_posts() ) : $alter_args->the_post(); ?>

    <div class="portfolio-work col-xs-12 col-md-<?php if($i < 2){echo "6";} else {echo "4";} //For the first 2 items in the loop echo 6 else echo 4 ?> col-lg-12">
        <a href="<?php the_field('portfolio_image'); ?>" data-lightbox="placeholder-image">
        <img class="" src="<?php the_field('portfolio_image'); ?>"/>
                </a>
                <li class="portfolio-item">
                    <h3><?php the_title(); ?></h3>
                </li>
            </div>
        </div>
                <?php $i++; //this will increase the counter by 1 at the end of each item in the loop ?>
            <?php endwhile; ?>
        <?php endif; ?>