Разработка темы Wordpress: посты в нескольких столбцах с помощью Bootstrap 4

Question

Я ищу решение для отображения моего пользовательского типа записи в 4 столбцах, используя

row

и

.col-lg-3 .col-6

Однако я не могу понять, как заставить это работать сPHP, но я понял, что мне нужен какой-то счетчик, чтобы сайт знал, когда закрывать строку и открывать новую.

В голове я вижу это так.Извините, если это не имеет смысла ...

counter starting at 0

echo starting row and starting col

add 1 to counter and check if its less than 4 to see if its
time for a another col or another row.

Some way to to add closing row at the right place
when there's no more posts.

Я не могу применить логику к работе, и я искал какой-то учебник или ответ, находя много старых, которые я не могуприступить к работе.

Как я хочу, чтобы оно отображалось на больших экранах:

Post1, Post2, Post3, Post4

Post 5, Post6 и т. д. ...

И на таких телефонах:

Post1, Post2

Post3 и т. Д.

Возможно, какой-то WordPress Dev уже имеет код для этой работы,Можно надеяться:)

Мой код на данный момент:

<?php
$allPostsOfMyType = new WP_Query(array(
  'posts_per_page'=> -1,
  'post_type' => 'my_post_type',
  'orderby' => 'title',
  'order' => 'ASC'
));

while($allPostsOfMyType->have_posts()) {
  $allPostsOfMyType->the_post(); ?>

  <div class="row mt-5">
    <div class="col-lg-3"><img class="img-fluid"<?php the_post_thumbnail(); 
?>
      <h3><?php the_title(); ?></h3>
      <p><?php the_field(fieldName); ?></p>
      <p><?php the_field(fieldNamer); ?></p>
      <p><a href="mailto:<?php the_field(fieldName); ?>"><?php 
the_field(fieldName); ?></a></p>
    </div>
  </div>

<?php }
 ?>

Answer 1

<?php $allPostsOfMyType = new WP_Query(
    array('posts_per_page'=> -1, 
    'post_type' => 'my_post_type', 
    'orderby' => 'title', 
    'order' => 'ASC'));

if($allPostsOfMyType->have_posts()){ ?>

<div class="row mt-5">
    <?php while($allPostsOfMyType->have_posts()) {
      $allPostsOfMyType->the_post(); ?>
      <div class="col-lg-3 col-md-4 col-6">
        <?php the_post_thumbnail(); ?>
        <h3><?php the_title(); ?></h3>
        <p>
            <?php the_field(fieldName); ?>
        </p>
        <p>
            <?php the_field(fieldNamer); ?>
        </p>
        <p>
            <a href="mailto:<?php the_field(fieldName); ?>">
                <?php the_field(fieldName); ?>
            </a>
        </p>
    </div>
    <?php } ?>
</div>

Answer 2

При отображении списка всех сообщений пользовательского типа сообщения не требуется закрывать «строку» после четырех сообщений.Вы можете продолжить и отобразить все сообщения в одной родительской «строке».

Например,

<div class="row">
    <div class="col-md-3 col-md-3 col-sm-6 col-xs-6">Post 1</div>
    <div class="col-md-3 col-md-3 col-sm-6 col-xs-6">Post 2</div>
    <div class="col-md-3 col-md-3 col-sm-6 col-xs-6">Post 3</div>
    <div class="col-md-3 col-md-3 col-sm-6 col-xs-6">Post 4</div>
    <div class="col-md-3 col-md-3 col-sm-6 col-xs-6">Post 5</div>
    <div class="col-md-3 col-md-3 col-sm-6 col-xs-6">Post 6</div>
</div>

Это будет отображать сообщения, как вы хотите,

Post1, Post2,Post3, Post4

Post5, Post6 ... и т. Д.

Пожалуйста, добавьте здесь свой PHP-код пользовательского цикла типа сообщения ... Я могу помочь вам в этом.