Как создать адаптивный слайдер в WordPress с помощью плагинов и кода

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

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

Сегодня более 60% трафика приходит с мобильных устройств, поэтому слайдеры должны корректно отображаться на любых экранах. Адаптивность означает, что слайдер автоматически подстраивается под ширину экрана, меняет количество видимых слайдов и не ломает дизайн.

Кроме того, важно, чтобы слайдер был лёгким, не замедлял загрузку страницы, и при этом имел базовые функции: навигация, пагинация, автопрокрутка, поддержка жестов на тач-устройствах.

Без адаптивности пользовательский опыт сильно страдает, что негативно влияет на поведенческие факторы и SEO.

Используем популярный плагин Smart Slider 3 для создания адаптивного слайдера

Smart Slider 3 — один из лучших бесплатных плагинов для слайдеров в WordPress. Он позволяет создавать адаптивные слайды с удобным визуальным редактором и множеством настроек.

Установка и базовая настройка

Для установки перейдите в админке WordPress в раздел "Плагины" → "Добавить новый", введите в поиске "Smart Slider 3" и установите его.

После активации появится пункт меню Smart Slider. Создайте новый слайд и добавьте изображения или любой HTML-контент. В настройках слайдера включите адаптивность, чтобы слайдер подстраивался под ширину контейнера.

Настройка адаптивности и навигации

В настройках слайдера можно задать количество слайдов на разных разрешениях экрана (например, 1 слайд на мобильных, 3 — на десктопах). Также можно включить стрелки навигации, точки-пагинацию и автопрокрутку с задержкой.

Smart Slider 3 также поддерживает свайпы на мобильных устройствах, что улучшает UX.

Создание адаптивного слайдера вручную с помощью Swiper.js и кастомного кода

Если вы хотите минимизировать использование плагинов и иметь полный контроль, можно сделать слайдер на базе популярной библиотеки Swiper.js — она лёгкая, мощная и полностью адаптивная.

Подключение Swiper.js в WordPress (функции темы)

Откройте файл functions.php вашей темы и добавьте регистрацию и подключение стилей и скриптов:

function wpstock_enqueue_swiper() {
    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);
}
add_action('wp_enqueue_scripts', 'wpstock_enqueue_swiper');

Этот код подключит последний стабильный релиз Swiper из CDN.

HTML-разметка слайдера в шаблоне или через шорткод

Добавьте в нужном месте шаблона или в редакторе следующий код:

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="/wp-content/uploads/slide1.jpg" alt="Слайд 1"></div>
    <div class="swiper-slide"><img src="/wp-content/uploads/slide2.jpg" alt="Слайд 2"></div>
    <div class="swiper-slide"><img src="/wp-content/uploads/slide3.jpg" alt="Слайд 3"></div>
  </div>
  <!-- Навигация -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-pagination"></div>
</div>

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

Добавьте в footer.php или через wp_add_inline_script инициализацию Swiper:

document.addEventListener('DOMContentLoaded', function() {
  const swiper = new Swiper('.swiper', {
    slidesPerView: 1,
    spaceBetween: 10,
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    breakpoints: {
      640: {
        slidesPerView: 2,
        spaceBetween: 20,
      },
      1024: {
        slidesPerView: 3,
        spaceBetween: 30,
      },
    },
  });
});

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

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

Чтобы использовать слайдер в любых постах и страницах без правки шаблонов, создадим шорткод в functions.php.

function wpstock_slider_shortcode() {
    ob_start();
    ?>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="/wp-content/uploads/slide1.jpg" alt="Слайд 1"></div>
        <div class="swiper-slide"><img src="/wp-content/uploads/slide2.jpg" alt="Слайд 2"></div>
        <div class="swiper-slide"><img src="/wp-content/uploads/slide3.jpg" alt="Слайд 3"></div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-pagination"></div>
    </div>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
      const swiper = new Swiper('.swiper', {
        slidesPerView: 1,
        spaceBetween: 10,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        breakpoints: {
          640: {
            slidesPerView: 2,
            spaceBetween: 20,
          },
          1024: {
            slidesPerView: 3,
            spaceBetween: 30,
          },
        },
      });
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wpstock_slider', 'wpstock_slider_shortcode');

Теперь вы можете вставлять [wpstock_slider] в любые посты и страницы.

Альтернативные плагины для адаптивных слайдеров в WordPress

Если Smart Slider 3 не подходит, обратите внимание на:

• MetaSlider — простой и быстрый слайдер с адаптивной версткой;
• Slider Revolution — мощный премиум-плагин с огромным функционалом;
• Master Slider — удобный визуальный редактор и поддержка касаний.

<img src="/wp-content/uploads/slide1.jpg" alt="Слайд 1" loading="lazy">