In first img code is working with posts == 5 In second image code getting broken if posts == 3 .row doenst close
How to use wordpress Lopp with Bootstrap grid I wanna to know the best way to optimize my code. This code work correctly but I wanna just to optimize this code I think this isn't the best solution. Please show me how I can optimize this code. Thank you.
<div class="container">
<?php
$args = [
'post_status' => 'publish',
'posts_per_page' => 6,
'no_found_rows' => true,
];
$query = new WP_Query( $args );
while ( $query->have_posts() ) : $query->the_post();
if ( $query->current_post === 0 )
{
echo '<div class="row">';
echo '<div class="col-12 col-lg-6">'; ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'post 1' ); ?>>
<figure>
<?php the_post_thumbnail('full', array('class' => 'img-fluid') ); ?>
<figure>
<div class="entry">
<div class="entry-title">
<?php the_title(); ?>
</div>
</div>
</article>
<?php
echo '</div>';
}
if ( $query->current_post === 1 )
{
echo '<div class="col-12 col-lg-6">'; ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'post 2' ); ?>>
<figure>
<?php the_post_thumbnail('full', array('class' => 'img-fluid') ); ?>
<figure>
<div class="entry">
<div class="entry-title">
<?php the_title(); ?>
</div>
</div>
</article>
<?php
}
if ( $query->current_post === 2 )
{ ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'post 3' ); ?>>
<figure>
<?php the_post_thumbnail('full', array('class' => 'img-fluid') ); ?>
<figure>
<div class="entry">
<div class="entry-title">
<?php the_title(); ?>
</div>
</div>
</article>
<?php
}
if ( $query->current_post === 3 )
{ ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'post 4' ); ?>>
<figure>
<?php the_post_thumbnail('full', array('class' => 'img-fluid') ); ?>
<figure>
<div class="entry">
<div class="entry-title">
<?php the_title(); ?>
</div>
</div>
</article>
<?php
echo '</div>';
echo '</div>';
}
endwhile; wp_reset_postdata(); ?>
</div>
<div class="container">
<div class="row">
<div class="col-6">
<img src="" alt="">
<h1>TITLE</h1>
<div class="exerpt">
exerpt
</div>
</div>
<div class="col-6">
<article class="row">
<div class="col-4">
<img src="" alt="">
</div>
<div class="col-8">
title
</div>
</article>
<article class="row">
<div class="col-4">
<img src="" alt="">
</div>
<div class="col-8">
title
</div>
</article>
<article class="row">
<div class="col-4">
<img src="" alt="">
</div>
<div class="col-8">
title
</div>
</article>
</div>
</div>
<div class="row">
<div class="col-6">
post-4
</div>
<div class="col-6">
post-5
</div>
</div>
</div>