Работающий перевод карусели Bootstrap на WP – Технические вопросы

Я разработал работающий карусель Bootstrap, её нужно конвертировать в WP. Это маленькая часть сайта, но, будучи новичком в WordPress, я застрял на понимании технической проблемы.

Вот что я пытаюсь сделать:

Показать все посты, у которых есть заглавное изображение, чтобы они отображались как часть карусели Bootstrap, а затем ограничить количество постов на странице по мере необходимости.

На первом этапе я подумал, что не буду использовать WP_Query для этой цели. И попробую обычный цикл постов.

<?php if(have_posts()) {
          ?>
            <div class="carousel-inner" role="listbox">
              <?php
                $postNumber = 0;
                    while(have_posts()) {

                          the_post(); ?>
  <!-- 1-й слайд -->
  <div class="carousel-item <?php echo $postNumber == 0 ? 'active' : ''; ?>">

    <!-- Начало раздела с заглавными постами -->
    <div class="featured">
      <div class="container">
        <div class="row text-center">
          <div class="col-12 m-auto pt-5">

            <?php if(has_post_thumbnail()) {  ?>

Я использую has_post_thumbnail() как проверку, чтобы включать только те посты, которые имеют прикрепленное заглавное изображение, чтобы показать их в карусели. Если я присоединяю класс “active” к div с carousel-item, все эти посты отображаются одновременно в карусели.

И если я использую флаг, например, $postNumber, чтобы инициализировать его на 1, а в цикле while проверяю, равно ли $postNumber 1, а затем использую условие, чтобы добавить ‘active’ к div с carousel-item. И сбрасываю $postNumber на 0 в конце первого цикла. Это не работает корректно. Так что я пытался использовать current_post с пользовательским запросом, но это не сработало. Либо контент вообще не отображается в карусели, либо карусель отображается, но не движется автоматически, только при нажатии на стрелку назад она движется один раз.

Еще одна проблема заключается в том, как динамически установить индикаторы карусели, чтобы они отображались в соответствии с количеством постов. Это легко, если мы ограничиваем количество постов в запросе и используем то же число здесь, но если мы можем сделать это динамически.

Как новичок в WordPress, я узнал много различных вещей, начиная от использования шорткодов, до дочерних тем и использования Options API вместе с множеством других вещей как для тем, так и для плагинов. Было важно привести эти знания в действие.

Поэтому я разработал веб-сайт с нуля в Photoshop, закодировал его в Bootstrap и теперь конвертирую его в WordPress. Это была одна из проблем, где я застрял и не мог продвигаться дальше. Надеюсь, кто-то сможет помочь.

Спасибо!

Недавно у меня была аналогичная ситуация — сделать карусель Bootstrap динамической.

Вот мой код в functions.php для этого:

//Слайдер изображений
function themename_slider_home_images_setup($wp_customize)
{
    $wp_customize->add_section('home-slider-images', array(
        'title' => 'Главный слайдер',
        ));

        $wp_customize->add_setting('home-slider-first-image');
    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            'home-slider-first-image',
            array(
                'label'      => __( 'Первое изображение', 'theme_name' ),
                'section'    => 'home-slider-images',
                'settings'   => 'home-slider-first-image'
            )
        )
        );

        $wp_customize->add_setting('home-slider-second-image');
    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            'home-slider-second-image',
            array(
                'label'      => __( 'Второе изображение', 'theme_name' ),
                'section'    => 'home-slider-images',
                'settings'   => 'home-slider-second-image'
            )
        )
        );

        $wp_customize->add_setting('home-slider-third-image');
    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            'home-slider-third-image',
            array(
                'label'      => __( 'Третье изображение', 'theme_name' ),
                'section'    => 'home-slider-images',
                'settings'   => 'home-slider-third-image'
            )
        )
    );
}
add_action('customize_register', 'themename_slider_home_images_setup');

А для шаблонного файла:

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Индикаторы -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Обертка для слайдов -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://wordpress.stackexchange.com/questions/312817/<?php echo get_theme_mod("home-slider-first-image');?>" alt="Синан" >
      </div>

      <div class="item header-image">
        <img  src="https://wordpress.stackexchange.com/questions/312817/<?php echo get_theme_mod("home-slider-second-image');?>" alt="Синан" >
      </div>

      <div class="item header-image">
        <img src="https://wordpress.stackexchange.com/questions/312817/<?php echo get_theme_mod("home-slider-third-image');?>" alt="Синан" >
      </div>
    </div>

    <!-- Левые и правые элементы управления -->

  </div>

Думаю, есть более элегантные способы сделать это, но я тоже новичок в разработке пользовательских тем WordPress, и это сработало для меня.

Редактировать: Вы можете сделать другие элементы редактируемыми, например, атрибут alt, добавить подписи к слайдам и т. д., используя ту же логику, добавляя больше настроек в файл функций и заменяя значения атрибутов, закодированных в HTML, на соответствующие теги PHP, которые появятся в кастомизаторе.

Надеюсь, это поможет!