动态更改（或用户更改）Wordpress 中的列数

Question

我正在尝试在此处显示自定义 post 类型“产品”：

问题是，在不久的将来，他们将有 7 种产品，其中一种会单独排成一排。

有什么方法可以动态改变列数，所以如果有 6 个和在产品下它显示 posts I 3 列，但如果有 7 个项目，它会显示posts 部分分为 4 列等...

或者，有没有一种方法可以让用户从后端手动选择显示的列数？我想使用高级自定义字段之类的东西。

我将使用基于 bootstrap 的网格，布局如下：

<div class="container">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>
</div>

因此，如果需要根据 post 的数量或根据用户从后端下拉列表中选择的数量动态更改此结构，则为：

<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
  </div>
</div>

任何人都可以指出我实现这一目标的正确方向吗？我想知道我是想多了还是想多了！

非常感谢您的观看！

PS - 这是我目前正在尝试的方法，但它不起作用...

<div class="container-flex our-products-strip">
<div class="lines-background-overlay" style="background-image: url(<?php bloginfo('stylesheet_directory'); ?>/images/background-stripes2.png);"></div>
<div class="container strip-padding">

<h2>Our Products</h2>
<hr class="hr-blue-more-bottom-space">

<div class="row justify-content-center">

  <?php
      $args = array( 
        'post_type' => 'products',
        'posts_per_page' => 9999,
        'orderby' => 'none'
      );
      $the_query = new WP_Query( $args );
  ?>

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


    <?php $data = new WP_Query(array( 'post_type' => 'products' ));?>
    <?php if(count($data) < 6 ){?>


    <div class="col-md-6 col-lg-4 products-item-outer" style="--product-color: <?php the_field('product_colour'); ?>;">
    <div class="col-12 products-item-inner">
      <a href="<?php the_permalink(); ?>">
        <div class="click-overlay"></div>
      </a>
      <div class="logo">
        <?php 
        $image = get_field('logo_light');
        if( !empty( $image ) ): ?>
          <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
        <?php endif; ?>          
      </div>    

      <div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
      <div class="read-more-link"><a href="<?php the_permalink(); ?>">Read More</a><span class="arrow-right"></span></div>

    </div>
    </div>


    <?php }
    else{ ?>


    <div class="col-md-3 products-item-outer" style="--product-color: <?php the_field('product_colour'); ?>;">
    <div class="col-12 products-item-inner">
      <a href="<?php the_permalink(); ?>">
        <div class="click-overlay"></div>
      </a>
      <div class="logo">
        <?php 
        $image = get_field('logo_light');
        if( !empty( $image ) ): ?>
          <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
        <?php endif; ?>          
      </div>    

      <div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
      <div class="read-more-link"><a href="<?php the_permalink(); ?>">Read More</a><span class="arrow-right"></span></div>

    </div>
    </div>


    <?php } ?>


    <?php endwhile; wp_reset_postdata(); endif; ?>

</div>

</div>
</div>
</div>

Answer 1

如果您正在使用 php 那么您绝对可以放置 if 条件来执行检查下面是例子

<?php if(count($data) <= 6){?>
    <div class="container">
        <div class="row">
          <div class="col-md-3"></div>
          <div class="col-md-3"></div>
          <div class="col-md-3"></div>
          <div class="col-md-3"></div>
        </div>
    </div>    
<?php }
else{ ?>
    <div class="container">
        <div class="row">
          <div class="col-md-4"></div>
          <div class="col-md-4"></div>
          <div class="col-md-4"></div>
        </div>
    </div>    
<? } >

动态更改（或用户更改）Wordpress 中的列数

Dynamically change (or user change) the number of columns in Wordpress

php

wordpress

post

bootstrap-4

custom-post-type