Динамически изменить (или изменить пользователя) количество столбцов в Wordpress - PullRequest
Новая
       11

Динамически изменить (или изменить пользователя) количество столбцов в Wordpress

0 голосов
/ 12 марта 2020

Я пытаюсь отобразить пользовательский тип записи "продукты" здесь:

enter image description here

Проблема в том, что в ближайшем будущем они будут иметь 7 продуктов, которые оставят один на один.

Есть ли способ, которым я могу динамически изменять количество столбцов, так что, если их 6, а под продуктом отображаются столбцы сообщений I 3, а если элементов 7, в разделе сообщений будет 4 columns et c et c ...

Или, как я могу позволить пользователю выбрать, сколько столбцов он отображает вручную из бэкэнда? Я предполагаю использовать что-то вроде расширенных настраиваемых полей.

Я буду использовать сетку на основе 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>

, поэтому, если кому-либо нужно динамически изменить эту структуру на основе количество сообщений ИЛИ в зависимости от числа, которое пользователь выбирает из выпадающего списка в бэкэнде: 

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

1 Ответ

1 голос
/ 13 марта 2020

Если вы используете php, то, безусловно, вы можете указать, является ли условие для выполнения проверки ниже примером 

<?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>    
<? } >
...