Посещая наш сайт, вы соглашаетесь с нашей политикой конфиденциальности в отношении файлов cookie, статистики отслеживания и т. д.

Главная » Вопросы и ответы » Wordpress

Как отобразить 8 постов в четырех колонках и 2 рядах на слайде карусели?

На чтение 11 мин Опубликовано
Содержание
  1. Вопрос или проблема
  2. Ответ или решение
  3. Шаг 1: Структурирование HTML
  4. Шаг 2: Объяснение кода
  5. Шаг 3: Подключение стилей
  6. Заключение

Вопрос или проблема

Я пытаюсь добиться сеточного макета, чтобы посты отображались на слайдере карусели. Каждый слайд будет состоять из 8 постов. 4 поста в ряд.

Я также использую Bootstrap.

Я хочу, чтобы HTML выглядел следующим образом:

<div class="slider_container">
<div class="services-slide">
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>название 1</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>название 2</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>название 3</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>название 4</h4>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>название 5</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>название 6</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>название 7</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>название 8</h4>
</div>
</div>
</div>
<div class="services-slide">
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>название 9</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>название 10</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>название 11</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>название 12</h4>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>название 13</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>название 14</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>название 15</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>название 16</h4>
</div>
</div>
</div>
</div>

Вот мой код, но он не работает.

<div class="slider_container">
<?php
ob_start();
$args = array( 'post_type' => 'services','posts_per_page' =>-1,'order' => 'ASC');
$the_query = new WP_Query($args);
if ($the_query->have_posts()) : 
$i = 0;
$o = 0;
  ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="services-slide">
 <div class="row">
   <?php if ($i == 4) { $i = 0; ?>
    </div>
    <div class="row">
   <?php } ?>
   <div class="col-md-3">
       <div class="box-desc">
            <h4><?php echo get_the_title(); ?></h4>
        </div>
    </div>
</div>
  <?php $i++; ?>
</div>
<?php endwhile; ?>
<?php
endif;
wp_reset_postdata();
$content = ob_get_contents();
ob_end_clean();
return $content; ?>
</div>

Пожалуйста, помогите.

Очень сложно понять из примера кода HTML, чего вы пытаетесь достичь, но исходя из PHP, вы могли бы сделать следующее.

<?php
$posts = new WP_Query([
    'post_type'      => 'services',
    'posts_per_page' => -1,
    'order'          => 'ASC'
]);

if ($posts->have_posts()) :
?>
<ul class="slider-container">
    <?php
    $loop_position = 1;
    while ($posts->have_posts()) {
        $posts->the_post();

        // если позиция цикла больше нашего порога (8), сбросить на исходную позицию (1)
        if ($loop_position > 8) $loop_position = 1;

        // если мы находимся в первом цикле (позиция цикла 1), создаем открывающий тег слайда
        if ($loop_position === 1) echo '<li class="single-slide">';

        // если мы находимся в первом/пятом цикле (позиция цикла 1/5), создаем открывающий тег ряда
        if (in_array($loop_position, [1,5])) echo '<div class="row">';

        // здесь мы можем просто вывести каждый итерационный HTML как нам нужно
        echo '<div class="col-md-3">';
        echo     '<div class="box-desc">';
        echo         "<h4>Некоторое название {$loop_position}</h4>";
        echo     '</div>';
        echo '</div>';

        // если мы достигли конца цикла (больше нет постов), нам нужно закрыть все теги
        // начиная с ряда, затем слайда
        if ($posts->found_posts == $loop_position) {
           echo '</div></li>';
           
           // чтобы предотвратить выполнение оставшегося кода, мы выходим из цикла, используя break
           break;
        }

        // если мы находимся в четвертом/восьмом цикле (позиция цикла 4/8), создаем закрывающий тег ряда
        if (in_array($loop_position, [4,8])) echo '</div>';

        // если мы находимся в последнем цикле (позиция цикла 8), создаем закрывающий тег слайда
        if ($loop_position === 8) echo '</li>';

        // увеличиваем позицию цикла на 1
        $loop_position++;
    }
    ?>
</ul>
<?php
endif;
wp_reset_postdata();
?>

Выход HTML будет следующим

<ul class="slider-container">
    <li class="single-slide">
        <div class="row">
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Некоторое название 1</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Некоторое название 2</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Некоторое название 3</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Некоторое название 4</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Некоторое название 5</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Некоторое название 6</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Некоторое название 7</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Некоторое название 8</h4>
                </div>
            </div>
        </div>
    </li>
    <li class="single-slide">
        <div class="row">
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Некоторое название 1</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Некоторое название 2</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Некоторое название 3</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Некоторое название 4</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Некоторое название 5</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Некоторое название 6</h4>
                </div>
            </div>
        </div>
    </li>
</ul>

Как мы решили, каждые восемь (8) постов получают свой собственный слайд, в каждом слайде каждые четыре (4) поста обернуты тегом <div class="row">...</div>.

Лично я считаю, что это немного избыточно и усложнено, вы можете добиться такого же результата без использования Bootstrap для разметки и вместо этого использовать CSS grid.

Если хотите, я могу отредактировать свой ответ, чтобы включить макет без Bootstrap.

Ответ или решение

Конечно! Чтобы создать карусель с отображением 8 постов в формате 4 колонки и 2 строки, используя Bootstrap, потребуется правильно структурировать ваш HTML и PHP код. Давайте пройдёмся через основные шаги, необходимые для достижения этой цели.

Шаг 1: Структурирование HTML

Ваша основная цель – создать карусель, которая будет содержать слайды, каждый из которых будет находить в себе 8 постов, расположенных в 4 колонках по 2 строки. Представленная структура HTML может выглядеть следующим образом:

<div class="slider_container">
    <div id="postCarousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <?php
            $args = array('post_type' => 'services', 'posts_per_page' => -1, 'order' => 'ASC');
            $the_query = new WP_Query($args);
            if ($the_query->have_posts()) :
                $slideCount = 0;
                $postCount = 0;
                ?>
                <div class="carousel-item active">
                    <div class="row">
                    <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
                        <div class="col-md-3">
                            <div class="box-desc">
                                <h4><?php echo get_the_title(); ?></h4>
                            </div>
                        </div>
                        <?php
                        $postCount++;
                        // Если 4 поста размещены, завершаем строку
                        if ($postCount % 4 == 0) {
                            echo '</div><div class="row">';
                        }

                        // Если 8 постов размещены, переходим к новому слайду
                        if ($postCount == 8) {
                            echo '</div>'; // Закрывает текущую строку
                            echo '</div>'; // Закрывает текущий слайд
                            $slideCount++;
                            $postCount = 0; // Сброс счётчика постов

                            // Проверка, не достигли ли мы конца
                            if ($slideCount < ceil($the_query->found_posts / 8)) {
                                echo '<div class="carousel-item">';
                                echo '<div class="row">';
                            }
                        }
                        ?>
                    <?php endwhile; ?>
                    </div>
                </div>
            <?php
            endif;
            wp_reset_postdata();
            ?>
        </div>
        <a class="carousel-control-prev" href="#postCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#postCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Шаг 2: Объяснение кода

  1. Карусель и структурирование: Белая карусель создается с использованием Bootstrap. Мы используем carousel-item для каждого слайда и carousel-inner чтобы вложить их.

  2. Посты: В цикле while мы извлекаем посты и проверяем их количество. На каждые 4 поста мы создаем новую строку (<div class="row">), и после каждых 8 постов мы создаем новый слайд (добавляя carousel-item).

  3. Управление слайдами: В конце кода добавлены навигационные элементы карусели carousel-control-prev и carousel-control-next, позволяющие пользователю перемещаться между слайдами.

Шаг 3: Подключение стилей

Убедитесь, что у вас подключены необходимые CSS и JS файлы Bootstrap в ваш проект для правильного отображения карусели. Обычно вы можете сделать это следующим образом в <head> вашего HTML:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>

Заключение

Таким образом, следующая реализация позволит вам создать карусель, отображающую 8 постов в 4 колонках и 2 строках. Вы можете дальше настраивать стили и функциональность в зависимости от потребностей вашего проекта. Использование Bootstrap значительно упрощает работу с макетами, а также обеспечивает адаптивное поведение на разных устройствах, что является важным аспектом современного веб-дизайна.

php posts
Оцените материал
Добавить комментарий

Капча загружается...

© 2024 IZ6.RU
*В материалах сайта упоминаются социальные сети Фейсбук / Инстаграм, принадлежащие Meta Platforms Inc., деятельность которой запрещена на территории РФ в части реализации данных социальных сетей на основании осуществления ею экстремистской деятельности