dongshi6710
2019-02-16 10:42
浏览 37
已采纳

带有Bootstrap网格的Wordpress循环。 如何优化此代码?

enter image description here enter image description here

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>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doubiantiao4994 2019-02-16 11:02
    已采纳

    You don't need to write the same part of code each time you check a condition.

    <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();
    
    $post_num = strval($query->current_post + 1);
    $post_count = wp_count_posts()->publish;
    
    if ( $query->current_post === 0 || $query->current_post === 4 ) : ?>
        <div class="row">;
    <?php ;endif; ?>
    
    <?php if ( $query->current_post === 0  || $query->current_post === 1 || $query->current_post === 4 || $query->current_post === 5 ) : ?>
            <div class="col-lg-6">'
    <?php ;endif; ?>
    
          <article id="post-<?php the_ID(); ?>" <?php post_class( $post_num ); ?>>
            <figure>
                  <?php the_post_thumbnail('full', array('class' => 'img-fluid') ); ?>
             </figure>
    
             <?php if ( $query->current_post === 0) : ?>
             <div class="post_excerpt">
                <?php the_excerpt(); ?>
            </div> 
            <?php ;endif; ?>
    
             <div class="entry">
                <div class="entry-title">
                   <?php the_title(); ?>
                </div>
             </div>
          </article>
    
    <?php if ( $query->current_post === 0 || $query->current_post === 3 || $query->current_post === 4 || $query->current_post === 5 || $query->current_post === $post_count-1 ) : ?>
        </div>
    <?php ;endif; ?>
    
    <?php if ( $query->current_post === 3 || $query->current_post === 5 || $query->current_post === $post_count-1 ) : ?>   
      </div>
    <?php ;endif; ?>
    
    <?php endwhile; wp_reset_postdata(); ?>
    </div>
    
    打赏 评论

相关推荐 更多相似问题