PHP在div之前输出图像-wordpress引导轮播多个项目

Question

我正在尝试创建一个带有引导轮播的 wordpress 滑块，在一张幻灯片上显示多个帖子。我在输出<div class="col-xxl-4"> 中的图像时遇到问题。

这是我的代码：

<div class="header-slider">

  <div class="carousel slide carousel-fade" data-bs-ride="carousel">

    <div class="carousel-inner">
      <?php

        // Item size (set here the number of posts for each group)
        $i = 3;

        global $post;

        $args = array(
          'post_type' => 'slider',
          'posts_per_page' => -1,
          'orderby' => 'date',
          'order' => 'DESC',
        );

        $myposts = get_posts($args);

        if($myposts):

          $chunks = array_chunk($myposts, $i);
          $html = "";

          foreach($chunks as $chunk):

          ($chunk === reset($chunks)) ? $active = "active" : $active = "";
          $html .= '<div class="slider__slide carousel-item"><div class="row">';

          foreach($chunk as $post):

            $html .= '<div class="col-xxl-4">';
              $html .= the_post_thumbnail($post->ID);
            $html .= '</div>';

          endforeach;

          $html .= '</div></div>';

        endforeach;

        echo $html;

       endif;
      ?>
    </div><!-- .carousel-inner -->
  </div><!-- .carousel -->


</div><!-- .header-slider -->

这是我得到的输出：

我该如何解决这个问题以获得： <div class="col-xxl-4"><img src="..."></div>

Answer 1

解决方案：将the_post_thumbnail 替换为get_the_post_thumbnail。

当使用调用the_post_thumbnail时，它会立即将echo的内容，所以你不能用它来追加到$html变量。您可以检查the_post_thumbnail 函数是echo get_the_post_thumbnail 的包装器。

function the_post_thumbnail( $size = 'post-thumbnail', $attr = '' ) {
    echo get_the_post_thumbnail( null, $size, $attr );
}

https://developer.wordpress.org/reference/functions/the_post_thumbnail/

请注意输入参数，我在the_post_thumbnail 或get_the_post_thumbnail 中看不到任何参数是$post->ID。

Answer 2

你可以试试这个：

<img src="<?php echo get_the_post_thumbnail_url($post->ID);?>">