这是WP_Query的有效使用吗？

Question

I have been using Advanced Custom Fields and Custom Post Types UI plugins in Wordpress to create editable sections on a one page theme. I was wondering if what I had done was efficient? If you notice, I have opened and closed a lot of loops, simply because I didn't want HTML markup to get output more than it needed. I was just wondering if there was a better way to do this, or if I could even do it without using WP_Query and just the regular Wordpress loop?

<?php
  $args = array(
    'post_type' => array(
       'visibility_section',
       'credibility_section',
       'social_media',
       'donations_section',
       'crowdfunding_section'
      )
  );

  $query = new WP_Query( $args );
?>

<section class="row" id="visibility"><!-- Start visibility section -->
  <div class="container">
    <h4 class="text-xs-center m-b-3">Visibility</h4>
    <div class="col-md-6">
      <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
        <?php the_field( 'visibility_left_column' ); ?>
      <?php endwhile; endif; wp_reset_postdata(); ?>
    </div>
    <div class="col-md-6">
      <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
        <?php if( get_field( 'visibility_image' ) ): ?>
            <img class="visibility_image m-b-3 img-fluid" src="<?php the_field( 'visibility_image'); ?>" />
        <?php endif; ?>
      <?php endwhile; endif; wp_reset_postdata(); ?>
    </div>
    <div class="col-md-12 text-xs-center">
      <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
        <?php the_field( 'visibility_bottom' ); ?>
      <?php endwhile; endif; wp_reset_postdata(); ?>
    </div>
  </div>
</section>

<section class="row" id="credibility"><!-- Start Credibility section -->
  <div class="container">
  <hr>
    <h4 class="text-xs-center m-b-3">Credibility</h4>
    <div class="col-sm-12">
      <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
        <?php the_field( 'credibility_top' ); ?>
      <?php endwhile; endif; wp_reset_postdata(); ?>
      <div class="text-xs-center">
        <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
          <img src="<?php the_field( 'credibility_image' ); ?>" class="img-fluid m-x-auto"/>
        <?php endwhile; endif; wp_reset_postdata(); ?>
      </div>
    </div>
</section><!-- End Credibility section -->

<section class="row" id="social-media"><!-- Start Social Media Exposure section -->
  <div class="container">
  <hr>
    <h4 class="text-xs-center m-b-3">Social Media Exposure</h4>
    <div class="col-md-4">
    <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
      <?php the_field( 'social_left_column' ); ?>
    <?php endwhile; endif; wp_reset_postdata(); ?>
    </div>
    <div class="col-md-4">
      <div class="text-xs-center">
        <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
        <img src="<?php the_field( 'social_mid_image' ); ?>" class="img-fluid" />
        <?php endwhile; endif; wp_reset_postdata(); ?>
      </div>
    </div>
    <div class="col-md-4">
      <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
      <?php the_field( 'social_right_column' ); ?>
      <?php endwhile; endif; wp_reset_postdata(); ?>
    </div>
  </div>
</section><!-- End Social Media Exposure section -->

<section class="row" id="donations"><!-- Start Donations Section-->
  <div class="container">
  <hr>
    <h4 class="text-xs-center m-b-3">Donations</h4>
    <div class="col-md-4">
      <div class="text-xs-center">
      <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
        <img src="<?php the_field( 'donations_left_image' ); ?>" class="img-fluid" />
      <?php endwhile; endif; wp_reset_postdata(); ?>
      </div>
    </div>
    <div class="col-md-8">
      <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
      <?php the_field( 'donations_right_column' ); ?>
      <?php endwhile; endif; wp_reset_postdata(); ?>
    </div>
  </div>
</section><!-- End Donations section -->

<section class="row" id="crowdfunding"><!-- Start Crowdfunding Section-->
  <div class="container">
  <hr>
    <h4 class="text-xs-center m-b-3">Crowdfunding</h4>
    <div class="col-md-7">
      <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
        <?php the_field( 'crowd_left_column' ); ?>
      <?php endwhile; endif; wp_reset_postdata(); ?>
    </div>
    <div class="col-md-5">
      <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
        <img src="<?php the_field( 'crowd_right_image' ); ?>" class="img-fluid" />
      <?php endwhile; endif; wp_reset_postdata(); ?>
    </div>
  </div>
</section><!-- End Donations section -->

Answer 1

Something like this would be more efficient, do one loop and create all of your required variables within that loop.

<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
       <?php $x['visibility_left_column'] = get_field( 'visibility_left_column' ); ?>
       <?php $x['visibility_image']       = get_field( 'visibility_image' ); ?>
       <?php $x['visibility_bottom']      = get_field( 'visibility_bottom' ); ?>
       <?php // ... ?>
<?php endwhile; endif; wp_reset_postdata(); ?>

<section class="row" id="visibility"><!-- Start visibility section -->
  <div class="container">
    <h4 class="text-xs-center m-b-3">Visibility</h4>
    <div class="col-md-6">
      <?php echo $x['visibility_left_column']; ?>
    </div>
    <div class="col-md-6">
      <?php $x['visibility_image'] : ?>
            <img class="visibility_image m-b-3 img-fluid" src="<?php echo $x['visibility_image']; ?>" />
        <?php endif; ?>
    </div>
    <div class="col-md-12 text-xs-center">
      <?php echo $x['visibility_bottom']; ?>
    </div>
  </div>
</section>
<!-- ... -->

Or wrap a single loop around all of the html

<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
  <section class="row" id="visibility"><!-- Start visibility section -->
    <div class="container">
      <h4 class="text-xs-center m-b-3">Visibility</h4>
      <div class="col-md-6">
        <?php the_field( 'visibility_left_column' ); ?>
      </div>
      <div class="col-md-6">
        <?php if( get_field( 'visibility_image' ) ): ?>
            <img class="visibility_image m-b-3 img-fluid" src="<?php the_field( 'visibility_image'); ?>" />
        <?php endif; ?>
      </div>
      <div class="col-md-12 text-xs-center">
        <?php the_field( 'visibility_bottom' ); ?>
      </div>
    </div>
  </section>
  <!-- ... -->

<?php endwhile; endif; wp_reset_postdata(); ?>