Как получить WordPress, пока l oop отправляет в bootstrap сетку? - PullRequest
Новая
       5

Как получить WordPress, пока l oop отправляет в bootstrap сетку?

1 голос
/ 21 февраля 2020

Я сделал сетку с bootstrap, где я хотел бы показать 5 сообщений с пока l oop. Я могу показать 5 постов, но их нет в сетке. 3 сообщения для отображения в верхних столбцах и три сообщения ниже. Возможно ли это сделать? Первая картинка показывает, что я получаю, а вторая, что я пытаюсь получить Это то, что я получаю и Это то, что я пытаюсь достичь sh

  <div class="container">
  <div class="row">
 <?php

$args = array(
'post_type' => 'post',
'posts_per_page' => 5,
);

$blogposts = new WP_Query($args);

while($blogposts->have_posts()) {
$blogposts->the_post();


?>
<div class="col-md-6">
      <a href="<?php the_permalink(); ?>">
        <div class="card border-0">
          <div class="card-picture">

            <img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">

            <div class="card-img-overlay d-flex flex-column">
              <h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
              <div class="mt-auto"> Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
            </div>
          </div>
        </div>
      </a>
    </div>

    <?php  }


?>


  <div class="row">
    <div class="col-md-4">
      <a href="">

        <div class="card border-0">
          <div class="card-pic">

            <img class="card-img" src="sss" alt="Card image">

            <div class="card-img-overlay d-flex flex-column">
              <h3 class="card-title font-weight-bold"></h3>
              <div class="mt-auto">Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>

            </div>
          </div>

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


    <div class="col-md-4">
      <a href="sss">
        <div class="card border-0">
          <div class="card-pic">

            <img class="card-img" src="ssss" alt="Card image">

            <div class="card-img-overlay d-flex flex-column">
              <h5 class="card-title font-weight-bold">ssss></h5>
              <div class="mt-auto">Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
            </div>
          </div>
        </div>
      </a>
    </div>
    <div class="col-md-4">
      <a href="">

        <div class="card border-0">
          <div class="card-pic">

            <img class="card-img" src="ddd" alt="Card image">

            <div class="card-img-overlay d-flex flex-column">
              <h5 class="card-title font-weight-bold">ddd</h5>``
              <div class="mt-auto">Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
            </div>
          </div>
        </div>
      </a>
    </div>

1 Ответ

0 голосов
/ 21 февраля 2020

Так как ширина поста не фиксирована, я думаю, что это должно быть: 

  <div class="container">
  <div class="row">
 <?php

$args = array(
'post_type' => 'post',
'posts_per_page' => 5,
);

$blogposts = new WP_Query($args);

$i = 0;
while($blogposts->have_posts()) {
$blogposts->the_post();

if ($i < 2) :
?>
<div class="col-md-4">
<?php else : ?>
<div class="col-md-3">
<?php endif; ?>
      <a href="<?php the_permalink(); ?>">
        <div class="card border-0">
          <div class="card-picture">

            <img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">

            <div class="card-img-overlay d-flex flex-column">
              <h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
              <div class="mt-auto"> Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
            </div>
          </div>
        </div>
      </a>
    </div>

    <?php
$i++;
  }


?>
...