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

Автор: Сергей Васильев | Опубликовано: 05.02.2026

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

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

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

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

Подготовка данных для слайдера в WordPress

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

Использовать произвольный тип записи (Custom Post Type) для слайдов.
Использовать стандартные записи с определенной категорией.
Хранить ссылки на изображения и тексты непосредственно в опциях темы.

Для примера создадим произвольный тип записи wpkurs_slider и будем хранить слайды там.

Регистрируем тип записи для слайдов

function wpkurs_register_slider_post_type() {
    $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' => false,
        'show_in_rest' => true,
        'supports' => array('title', 'thumbnail', 'excerpt'),
        'menu_position' => 20,
    );
    register_post_type('wpkurs_slider', $args);
}
add_action('init', 'wpkurs_register_slider_post_type');

Этот код нужно добавить в файл functions.php вашей темы или в свой плагин.

Вывод слайдера в шаблоне WordPress

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

function wp_kurs_get_slider_html() {
    $args = array(
        'post_type' => 'wpkurs_slider',
        'posts_per_page' => -1,
        'orderby' => 'menu_order',
        'order' => 'ASC',
    );
    $slider_query = new WP_Query($args);
    if (!$slider_query->have_posts()) {
        return '';
    }
    ob_start();
    ?>
    <div class="wpkurs-slider">
        <div class="wpkurs-slider-wrapper">
            <?php while ($slider_query->have_posts()) : $slider_query->the_post(); ?>
                <div class="wpkurs-slide">
                    <?php if (has_post_thumbnail()) {
                        the_post_thumbnail('large', ['class' => 'wpkurs-slide-image']);
                    } ?>
                    <div class="wpkurs-slide-caption">
                        <h3><?php the_title(); ?></h3>
                        <p><?php the_excerpt(); ?></p>
                    </div>
                </div>
            <?php endwhile; wp_reset_postdata(); ?>
        </div>
        <button class="wpkurs-slider-prev">❮</button>
        <button class="wpkurs-slider-next">❯</button>
    </div>
    <?php
    return ob_get_clean();
}

Далее вызовите функцию echo wp_kurs_get_slider_html(); в нужном месте шаблона, например, в front-page.php.

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

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

.wpkurs-slider {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
}
.wpkurs-slider-wrapper {
    display: flex;
    transition: transform 0.5s ease;
}
.wpkurs-slide {
    min-width: 100%;
    box-sizing: border-box;
    position: relative;
}
.wpkurs-slide-image {
    width: 100%;
    height: auto;
    display: block;
}
.wpkurs-slide-caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    max-width: 70%;
}
.wpkurs-slider-prev,
.wpkurs-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 3px;
    user-select: none;
}
.wpkurs-slider-prev {
    left: 10px;
}
.wpkurs-slider-next {
    right: 10px;
}
@media (max-width: 768px) {
    .wpkurs-slide-caption {
        font-size: 14px;
        max-width: 90%;
    }
    .wpkurs-slider-prev,
    .wpkurs-slider-next {
        font-size: 24px;
        padding: 4px 8px;
    }
}

JavaScript для управления слайдером

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

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

    function wp_kurs_showSlide(index) {
        if (index < 0) {
            currentIndex = totalSlides - 1;
        } else if (index >= totalSlides) {
            currentIndex = 0;
        } else {
            currentIndex = index;
        }
        slider.style.transform = 'translateX(' + (-currentIndex * 100) + '%)';
    }

    prevBtn.addEventListener('click', function() {
        wp_kurs_showSlide(currentIndex - 1);
    });

    nextBtn.addEventListener('click', function() {
        wp_kurs_showSlide(currentIndex + 1);
    });

    // Автоматическая прокрутка каждые 5 секунд
    setInterval(function() {
        wp_kurs_showSlide(currentIndex + 1);
    }, 5000);

    // Инициализация
    wp_kurs_showSlide(currentIndex);
});

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

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

Навигационные точки (индикаторы текущего слайда).
Поддержка свайпов на мобильных устройствах (через touch-события).
Пауза автопрокрутки при наведении мыши или при взаимодействии пользователя.
Загрузка изображений по мере необходимости (lazy loading) для ускорения загрузки страниц.
Добавление анимаций переходов и эффектов.

Реализация этих функций требует немного больше JavaScript и CSS, но значительно улучшит UX вашего слайдера.

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

Вывод

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