zapytanie wp — Siatka Bootstrap podczas pętli
WordPress Development Stack Exchange to strona z pytaniami i odpowiedziami dla programistów i administratorów WordPress. Rejestracja zajmuje tylko minutę.
Zarejestruj się, aby dołączyć do tej społeczności
Każdy może zadać pytanie
Każdy może odpowiedzieć
Najlepsze odpowiedzi są głosowane i wznoszą się na szczyt
Spytał
Oglądane1k razy
Zrobiłem siatkę z bootstrapem, w której chcę pokazać 5 różnych postów, ale z jakiegoś powodu duplikuje siatki i pokazuje jeden post na siatkę.
Pierwszy obraz pokazuje, jak zaczyna się powielać siatki 5 razy zamiast po prostu pokazywać 5 postów w tych kolumnach. Drugie zdjęcie pokazuje, jak chciałbym pracować.
<?php get_header(); ?>
<main>
<div class="container">
<div class="row"> <?php
$args = array(
<?php
'post_type' =>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=" 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>
<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>
</div>
<div class="row">
<div class="col-md-4">
<a href="<?php the_permalink(); ?>">
<div class="card border-0">
<div class="card-pic">
<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">
<h3 class="card-title font-weight-bold"><?php the_title(); ?></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="<?php the_permalink(); ?>">
<div class="card border-0">
<div class="card-pic">
<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>
<div class="col-md-4">
<a href="<?php the_permalink(); ?>">
<div class="card border-0">
<div class="card-pic">
<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 }
wp_reset_query();
Twój while
pętla oznacza: „Za każdym razem, gdy mam jeden post, wypisz następujący kod”. Ponieważ masz 5 elementów div w pliku while
loop, otrzymujesz 5 kopii za każdy post. Więc zmień swoje while { }
kod do this, który wyświetli tylko 1 div dla każdego postu:
while($blogposts->have_posts()) {
$blogposts->the_post(); ?>
<div class="col-md-6">
<a href=" 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 }
2
while($blogposts->have_posts()) {
$blogposts->the_post(); ?>
<div class="col-md-6">
<a href=" 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 }
Zmiana pętli while powoduje, że pokazuje 5 postów tak, jak chciałem, ale posty nadal nie znajdują się w kolumnach ładowania początkowego.Zdjęcie poniżej pokazuje, co próbuję osiągnąć.
domyślny