这里有一个例子，你可以为你的巨型机器人编写循环，

// add helper functions to functions.php
function my_posts_query() {
  $args = array(); // add parameters as needed post_type, posts_per_page, etc.
  return new WP_Query($args);
}

function my_single_post_image( int $post_id ) {
  $url = get_the_post_thumbnail_url( $post_id, \'large\' ); // update as needed
  if ( $url ) {
    printf(
      \'<img class="img-fluid bg-img" src="%s">\',
      esc_url( $post_id );
    );
  }
}

function my_single_post( WP_Post $post, string $extra_class ) {
  ?>
  <div class="col-sm-12 col-md-12 col-lg-12 <?php echo esc_attr( $extra_class ); ?>">
    <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-12 img-text">
        <h1 class=""><?php echo esc_html( $post->post_title ); ?></h1>
        <p class="lead"><?php echo esc_html( $post->post_excerpt ); ?></p>
      </div>
    </div>
    <?php my_single_post_image( $post->ID ); ?>
  </div>
  <?php
}

function position_class_name( int $total, int $count ) {
  if ( 0 === $count ) {
    return \'img-top\';
  } else if ( $total === $count ) {
    return \'img-bottom\';
  } else { // add more logic, if needed
    return \'img-middle\';
  }
}

// in template file
$query = my_posts_query();
if ( $query->posts ) {
  ?>
  <div class="jumbotron jumbotron-fluid bg-scroll">
    <div class="container-fluid">
      <div class="row">
        <?php
          foreach ( $query->posts as $i => $my_post ) {
            my_single_post( $my_post, position_class_name( $query->found_posts, $i ) );
          }
        ?>
      </div>
    </div>
  </div>
  <?php
}

// styles.css
.jumbotron .row > div {
  // css
}
.jumbotron .row > div:first-child {
  // css
}
.jumbotron .row > div:last-child {
  // css
}
.jumbotron .row > div:nth-child(n) {
  // css
}

// scripts.js
var myElement = $( ".jumbotron .row > div:nth-child(1)" );