PHP выводит изображения перед divs - загрузочная карусель wordpress с несколькими элементами

#php #wordpress #bootstrap-5

Вопрос:

Я пытаюсь создать слайдер 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>

Ответ №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/

И будьте осторожны с входным параметром, я не вижу, чтобы какой-либо параметр был $post->ID в the_post_thumbnail или get_the_post_thumbnail .

Ответ №2:

Вы можете попробовать это:

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