Как создать динамический слайдер в WordPress теме: практическое руководство

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

Почему динамический слайдер лучше статического

Статические слайдеры требуют ручного обновления слайдов, что неудобно при большом объёме контента. Динамический слайдер берёт данные из записей, категорий или пользовательских типов записей — это экономит время и позволяет показывать актуальный контент без участия администратора.

Такой подход улучшает UX и SEO, так как поисковики видят свежий контент. Кроме того, динамические слайдеры проще масштабировать и кастомизировать под задачи сайта.

Выбор источника данных для слайдера

Первый шаг — определиться, откуда брать данные для слайдов. Чаще всего используют:

Посты стандартного типа post из определённой категории;
Пользовательские типы записей (например, slider или portfolio);
Произвольные поля для кастомизации каждого слайда.

Для примера создадим слайдер на основе обычных записей категории slider. Это просто и понятно.

Создание пользовательского типа записей (если нужно)

Если хотите иметь отдельный раздел для слайдов, можно зарегистрировать свой тип записей. Для этого добавьте в файл functions.php темы следующий код:

function wp_theme_register_slider_cpt() {
    $labels = array(
        'name' => 'Слайды',
        'singular_name' => 'Слайд',
        'add_new' => 'Добавить слайд',
        'add_new_item' => 'Добавить новый слайд',
        'edit_item' => 'Редактировать слайд',
        'new_item' => 'Новый слайд',
        'view_item' => 'Посмотреть слайд',
        'search_items' => 'Поиск слайдов',
        'not_found' => 'Слайды не найдены',
        'not_found_in_trash' => 'Слайды не найдены в корзине',
    );

    $args = array(
        'labels' => $labels,
        'public' => true,
        'has_archive' => true,
        'supports' => array('title', 'editor', 'thumbnail', 'excerpt'),
        'menu_position' => 20,
        'menu_icon' => 'dashicons-images-alt2',
    );

    register_post_type('slider', $args);
}
add_action('init', 'wp_theme_register_slider_cpt');

Теперь в админке появится отдельный раздел «Слайды», где можно добавлять новые элементы для слайдера.

Запрос данных для слайдера в теме

Далее создаём функцию для вывода слайдера на фронтенде. Пример запроса для вывода 5 последних слайдов:

function wp_theme_get_slider_items($count = 5) {
    $args = array(
        'post_type' => 'slider',
        'posts_per_page' => $count,
        'orderby' => 'date',
        'order' => 'DESC',
    );
    return new WP_Query($args);
}

Вывод слайдера с использованием этого запроса:

$slider_query = wp_theme_get_slider_items();
if ($slider_query->have_posts()) {
    echo '<div class="wp-theme-slider">';
    while ($slider_query->have_posts()) {
        $slider_query->the_post();
        $thumb = get_the_post_thumbnail_url(get_the_ID(), 'full');
        echo '<div class="slide">';
        if ($thumb) {
            echo '<img src="' . esc_url($thumb) . '" alt="' . esc_attr(get_the_title()) . '" />';
        }
        echo '<h3>' . get_the_title() . '</h3>';
        echo '<p>' . get_the_excerpt() . '</p>';
        echo '</div>';
    }
    echo '</div>';
    wp_reset_postdata();
}

Подключение библиотеки слайдера

Для красивой анимации и удобного управления слайдером рекомендуем использовать популярную библиотеку Swiper.js или Slick Slider. Рассмотрим подключение Swiper.

Добавьте в functions.php темы регистрацию стилей и скриптов:

function wp_theme_enqueue_slider_assets() {
    wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css');
    wp_enqueue_script('swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js', array(), null, true);
    wp_enqueue_script('wp-theme-slider-init', get_template_directory_uri() . '/js/slider-init.js', array('swiper-js'), null, true);
}
add_action('wp_enqueue_scripts', 'wp_theme_enqueue_slider_assets');

Создайте файл js/slider-init.js в вашей теме с таким содержимым:

document.addEventListener('DOMContentLoaded', function () {
    const swiper = new Swiper('.wp-theme-slider', {
        loop: true,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
});

HTML-разметка слайдера с поддержкой Swiper

Для корректной работы слайдера структура должна быть следующей:

<div class="swiper wp-theme-slider">
  <div class="swiper-wrapper">
    <!-- Цикл слайдов -->
    <div class="swiper-slide">Слайд 1</div>
    <div class="swiper-slide">Слайд 2</div>
    <!-- и так далее -->
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

Изменим функцию вывода слайдера, чтобы она соответствовала требованиям Swiper:

function wp_theme_display_slider() {
    $slider_query = wp_theme_get_slider_items();
    if ($slider_query->have_posts()) {
        echo '<div class="swiper wp-theme-slider">';
        echo '<div class="swiper-wrapper">';
        while ($slider_query->have_posts()) {
            $slider_query->the_post();
            $thumb = get_the_post_thumbnail_url(get_the_ID(), 'full');
            echo '<div class="swiper-slide">';
            if ($thumb) {
                echo '<img src="' . esc_url($thumb) . '" alt="' . esc_attr(get_the_title()) . '" />';
            }
            echo '<h3>' . get_the_title() . '</h3>';
            echo '<p>' . get_the_excerpt() . '</p>';
            echo '</div>';
        }
        echo '</div>';
        echo '<div class="swiper-pagination"></div>';
        echo '<div class="swiper-button-prev"></div>';
        echo '<div class="swiper-button-next"></div>';
        echo '</div>';
        wp_reset_postdata();
    }
}

Использование плагинов для слайдера

Если не хочется писать код, можно использовать плагины. Вот несколько рекомендуемых:

Clearfy Pro — плагин с оптимизациями и расширенными возможностями для работы с контентом, включая слайды;
WPRemark — плагин для отзывов и слайдеров отзывов;
Meta Slider — популярный бесплатный плагин с простым интерфейсом.

Плагины позволяют создавать слайдеры через админку без программирования, но для полной кастомизации и лучшей производительности лучше писать свой код, как показано выше.

Оптимизация и советы по реализации

Для оптимальной работы слайдера учтите следующие моменты:

Используйте изображения оптимального размера и формата WebP для ускорения загрузки;
Кэшируйте запросы к базе, если слайдер статичен и не меняется часто;
Добавляйте атрибуты loading="lazy" для отложенной загрузки изображений;
Проверьте адаптивность слайдера на мобильных устройствах;
Добавьте поддержку клавиатуры и жестов для удобства пользователей.

Пример отложенной загрузки изображений

echo '<img src="' . esc_url($thumb) . '" alt="' . esc_attr(get_the_title()) . '" loading="lazy" />';

Подключение стилей для адаптивности

Добавьте в CSS темы:

.wp-theme-slider {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}

Вывод

Создание динамического слайдера в теме WordPress — задача вполне решаемая как с помощью кода, так и с помощью плагинов. Важно правильно выбрать источник данных, подключить удобную и производительную библиотеку слайдера, а также оптимизировать загрузку и отображение контента. Такой подход повысит интерактивность и привлекательность вашего сайта.