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

Автор: Тимур Васильев | Опубликовано: 02.12.2025

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

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

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

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

В этом руководстве мы создадим простой, но функциональный адаптивный слайдер без внешних зависимостей.

Структура плагина и подключение скриптов

Начнём с создания базового плагина. В папке wp-content/plugins/wpsystem-slider создайте файл wpsystem-slider.php со следующим содержимым:

<?php
/**
 * Plugin Name: WPSYSTEM Slider
 * Description: Простой адаптивный слайдер для WordPress
 * Version: 1.0
 * Author: WPSYSTEM
 */

// Регистрируем стили и скрипты
function wpsystem_slider_enqueue_scripts() {
    wp_enqueue_style('wpsystem-slider-style', plugin_dir_url(__FILE__) . 'css/wpsystem-slider.css');
    wp_enqueue_script('wpsystem-slider-script', plugin_dir_url(__FILE__) . 'js/wpsystem-slider.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'wpsystem_slider_enqueue_scripts');

// Регистрируем шорткод для вывода слайдера
function wpsystem_slider_shortcode($atts, $content = null) {
    $slides = [
        'https://picsum.photos/id/1018/600/300',
        'https://picsum.photos/id/1015/600/300',
        'https://picsum.photos/id/1019/600/300'
    ];
    $output = '<div class="wpsystem-slider">';
    foreach ($slides as $slide) {
        $output .= '<div class="slide"><img src="' . esc_url($slide) . '" alt="Slide image"/></div>';
    }
    $output .= '</div>';
    return $output;
}
add_shortcode('wpsystem_slider', 'wpsystem_slider_shortcode');
?>

Создайте папки css и js внутри папки плагина и добавьте туда соответствующие файлы wpsystem-slider.css и wpsystem-slider.js.

CSS для адаптивного слайдера

В файле css/wpsystem-slider.css опишем базовые стили и адаптивность:

.wpsystem-slider {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  margin: 20px auto;
}
.wpsystem-slider .slide {
  display: none;
  width: 100%;
}
.wpsystem-slider .slide img {
  width: 100%;
  height: auto;
  display: block;
}
.wpsystem-slider .slide.active {
  display: block;
}

/* Кнопки навигации */
.wpsystem-slider .nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}
.wpsystem-slider .nav-button.prev {
  left: 10px;
}
.wpsystem-slider .nav-button.next {
  right: 10px;
}

@media (max-width: 600px) {
  .wpsystem-slider .nav-button {
    padding: 6px;
  }
}

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

В файле js/wpsystem-slider.js реализуем переключение слайдов по кнопкам и автопрокрутку:

jQuery(document).ready(function($) {
  var currentIndex = 0;
  var slides = $('.wpsystem-slider .slide');
  var slideCount = slides.length;
  
  function wpsystem_slider_showSlide(index) {
    slides.removeClass('active');
    slides.eq(index).addClass('active');
  }
  
  function wpsystem_slider_nextSlide() {
    currentIndex = (currentIndex + 1) % slideCount;
    wpsystem_slider_showSlide(currentIndex);
  }
  
  function wpsystem_slider_prevSlide() {
    currentIndex = (currentIndex - 1 + slideCount) % slideCount;
    wpsystem_slider_showSlide(currentIndex);
  }
  
  // Добавляем кнопки навигации
  var prevBtn = $('<button class="nav-button prev">❮</button>');
  var nextBtn = $('<button class="nav-button next">❯</button>');
  $('.wpsystem-slider').append(prevBtn, nextBtn);
  
  prevBtn.on('click', function() {
    wpsystem_slider_prevSlide();
  });
  nextBtn.on('click', function() {
    wpsystem_slider_nextSlide();
  });
  
  // Показываем первый слайд
  wpsystem_slider_showSlide(currentIndex);
  
  // Автопрокрутка слайдов каждые 5 секунд
  setInterval(wpsystem_slider_nextSlide, 5000);
});

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

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

Вы можете расширить функционал, добавляя параметры к шорткоду, например, управлять временем автопрокрутки или менять изображения.

Пример расширения шорткода с параметрами

Изменим функцию шорткода для передачи массива URL изображений и интервала:

function wpsystem_slider_shortcode($atts) {
    $atts = shortcode_atts(array(
        'images' => '', // Список URL через запятую
        'interval' => 5000 // Интервал автопрокрутки в мс
    ), $atts);
    
    $images = explode(',', $atts['images']);
    if (empty($images[0])) {
        // Если изображения не заданы, используем дефолтные
        $images = [
            'https://picsum.photos/id/1018/600/300',
            'https://picsum.photos/id/1015/600/300',
            'https://picsum.photos/id/1019/600/300'
        ];
    }
    $output = '<div class="wpsystem-slider" data-interval="'.intval($atts['interval']).'">';
    foreach ($images as $slide) {
        $output .= '<div class="slide"><img src="' . esc_url(trim($slide)) . '" alt="Slide image"/></div>';
    }
    $output .= '</div>';
    return $output;
}

И обновим JS, чтобы брать интервал из атрибута:

jQuery(document).ready(function($) {
  var slider = $('.wpsystem-slider');
  if (!slider.length) return;
  
  var currentIndex = 0;
  var slides = slider.find('.slide');
  var slideCount = slides.length;
  var intervalTime = parseInt(slider.data('interval')) || 5000;

  function wpsystem_slider_showSlide(index) {
    slides.removeClass('active');
    slides.eq(index).addClass('active');
  }

  function wpsystem_slider_nextSlide() {
    currentIndex = (currentIndex + 1) % slideCount;
    wpsystem_slider_showSlide(currentIndex);
  }

  function wpsystem_slider_prevSlide() {
    currentIndex = (currentIndex - 1 + slideCount) % slideCount;
    wpsystem_slider_showSlide(currentIndex);
  }

  // Добавляем кнопки навигации
  var prevBtn = $('<button class="nav-button prev">❮</button>');
  var nextBtn = $('<button class="nav-button next">❯</button>');
  slider.append(prevBtn, nextBtn);

  prevBtn.on('click', function() {
    wpsystem_slider_prevSlide();
  });
  nextBtn.on('click', function() {
    wpsystem_slider_nextSlide();
  });

  wpsystem_slider_showSlide(currentIndex);

  setInterval(wpsystem_slider_nextSlide, intervalTime);
});

Советы по оптимизации и безопасности

Для улучшения производительности рекомендуем оптимизировать изображения перед загрузкой на сервер. Используйте современные форматы, например WebP, и подключайте ленивую загрузку (lazy loading).

Также не забывайте про безопасность: всегда экранируйте выходные данные с помощью функций WordPress, таких как esc_url() и esc_attr(), чтобы избежать XSS-уязвимостей.

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

Добавление lazy loading

Для включения ленивой загрузки в тегах <img> добавьте атрибут loading="lazy":

$output .= '<div class="slide"><img loading="lazy" src="' . esc_url(trim($slide)) . '" alt="Slide image"/></div>';

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