Как создать адаптивный слайдер в WordPress с нуля

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

Почему стоит создавать собственный адаптивный слайдер в WordPress

Готовые решения вроде Slider Revolution или MetaSlider часто предлагают массу функций, но при этом сильно нагружают сайт и требуют регулярных обновлений. Создавая слайдер самостоятельно, вы получаете:

• Минимальный и понятный код
• Полный контроль над внешним видом и функционалом
• Оптимизацию под свои задачи без лишних зависимостей
• Быструю загрузку и адаптивность на любых устройствах

К тому же, вы сможете легко интегрировать слайдер в любую тему или плагин, а также расширять его по мере необходимости.

Основные требования к адаптивному слайдеру

Перед тем как начать, определим ключевые требования:

• Поддержка любых изображений и контента
• Автоматическая смена слайдов с возможностью управления вручную
• Адаптивность: корректное отображение на мобильных, планшетах и ПК
• Чистый и понятный код без сторонних библиотек (по возможности)

Создаем кастомный тип записей для слайдов в WordPress

Чтобы удобно управлять слайдами из админки, создадим кастомный тип записей wpboot_slider. Это позволит добавлять новые слайды через привычный интерфейс.

function wpboot_register_slider_cpt() {
    $labels = array(
        'name' => 'Слайды',
        'singular_name' => 'Слайд',
        'add_new' => 'Добавить слайд',
        'add_new_item' => 'Добавить новый слайд',
        'edit_item' => 'Редактировать слайд',
        'all_items' => 'Все слайды',
        'menu_name' => 'Слайдер',
    );

    $args = array(
        'labels' => $labels,
        'public' => false,
        'show_ui' => true,
        'supports' => array('title', 'thumbnail', 'editor'),
        'menu_icon' => 'dashicons-images-alt2',
    );

    register_post_type('wpboot_slider', $args);
}
add_action('init', 'wpboot_register_slider_cpt');

В этом коде мы регистрируем тип записей с поддержкой заголовка, миниатюры и редактора для дополнительного описания слайда. После добавления этого кода в functions.php вашей темы или в плагин, в админке появится раздел «Слайдер», где можно создавать новые слайды.

Вывод слайдера на сайте с помощью шорткода

Создадим шорткод [wpboot_slider], который выведет слайдер в любом месте сайта. Для начала напишем функцию, которая получит все слайды и сформирует HTML-код слайдера.

function wpboot_display_slider() {
    $args = array(
        'post_type' => 'wpboot_slider',
        'posts_per_page' => -1,
        'orderby' => 'menu_order',
        'order' => 'ASC',
    );
    $slides = get_posts($args);
    if (empty($slides)) {
        return '<p>Слайды не найдены.</p>';
    }

    $output = '<div class="wpboot-slider"><div class="wpboot-slider-wrapper">';

    foreach ($slides as $slide) {
        $img = get_the_post_thumbnail_url($slide->ID, 'full');
        $title = esc_html($slide->post_title);
        $content = apply_filters('the_content', $slide->post_content);

        $output .= "<div class='wpboot-slide'>";
        if ($img) {
            $output .= "<img src='{$img}' alt='{$title}' />";
        }
        if ($title) {
            $output .= "<h3>{$title}</h3>";
        }
        if ($content) {
            $output .= "<div class='wpboot-slide-content'>{$content}</div>";
        }
        $output .= "</div>";
    }

    $output .= '</div>';
    $output .= '<button class="wpboot-slider-prev" aria-label="Назад">❮</button>';
    $output .= '<button class="wpboot-slider-next" aria-label="Вперед">❯</button>';
    $output .= '</div>';

    return $output;
}
add_shortcode('wpboot_slider', 'wpboot_display_slider');

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

Стилизация и адаптивность слайдера

Теперь добавим CSS, чтобы слайдер выглядел красиво и корректно отображался на всех устройствах. Вставьте следующий CSS в файл стилей вашей темы или с помощью функции wp_enqueue_style:

.wpboot-slider {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.wpboot-slider-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.wpboot-slide {
  min-width: 100%;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
}

.wpboot-slide img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 10px;
  border-radius: 8px;
}

.wpboot-slider-prev, .wpboot-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  font-size: 2rem;
  padding: 0 12px;
  cursor: pointer;
  border-radius: 3px;
  user-select: none;
  z-index: 10;
}

.wpboot-slider-prev { left: 10px; }
.wpboot-slider-next { right: 10px; }

@media (max-width: 768px) {
  .wpboot-slide h3 {
    font-size: 1.2rem;
  }
}

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

Добавляем JavaScript для переключения слайдов

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

function wpboot_slider_scripts() {
    wp_enqueue_script('wpboot-slider-js', get_template_directory_uri() . '/js/wpboot-slider.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'wpboot_slider_scripts');

Создайте файл wpboot-slider.js в папке js вашей темы и вставьте туда следующий код:

document.addEventListener('DOMContentLoaded', function() {
    const slider = document.querySelector('.wpboot-slider-wrapper');
    const slides = document.querySelectorAll('.wpboot-slide');
    const prevBtn = document.querySelector('.wpboot-slider-prev');
    const nextBtn = document.querySelector('.wpboot-slider-next');
    let currentIndex = 0;
    const totalSlides = slides.length;

    function updateSlider() {
        const offset = -currentIndex * 100;
        slider.style.transform = `translateX(${offset}%)`;
    }

    function showNext() {
        currentIndex = (currentIndex + 1) % totalSlides;
        updateSlider();
    }

    function showPrev() {
        currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
        updateSlider();
    }

    nextBtn.addEventListener('click', showNext);
    prevBtn.addEventListener('click', showPrev);

    // Автоматическая смена слайдов каждые 5 секунд
    setInterval(showNext, 5000);
});

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

Оптимизация слайдера и рекомендации

Чтобы слайдер работал быстро и не перегружал сайт, рекомендуем:

• Использовать сжатые изображения в подходящем размере — WordPress автоматически генерирует миниатюры.
• Подключать скрипт и стили только на тех страницах, где используется шорткод слайдера.
• Добавлять атрибуты loading="lazy" к изображениям для ленивой загрузки.
• Проводить тесты производительности и адаптивности на разных устройствах и браузерах.

Пример добавления ленивой загрузки в вывод изображений:

$output .= "<img src='{$img}' alt='{$title}' loading='lazy' />";

Как подключить стили и скрипты только на страницах с слайдером

Для этого используйте проверку наличия шорткода:

function wpboot_conditionally_enqueue_slider_assets() {
    if ( is_singular() && has_shortcode(get_post()->post_content, 'wpboot_slider') ) {
        wp_enqueue_style('wpboot-slider-css', get_template_directory_uri() . '/css/wpboot-slider.css');
        wp_enqueue_script('wpboot-slider-js', get_template_directory_uri() . '/js/wpboot-slider.js', array(), null, true);
    }
}
add_action('wp_enqueue_scripts', 'wpboot_conditionally_enqueue_slider_assets');

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

Заключение по созданию адаптивного слайдера в WordPress

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