Как автоматизировать раскрытие и закрытие блоков в WordPress с помощью JavaScript и PHP

Автор: Дмитрий Крылов | Опубликовано: 02.03.2026

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

Почему стоит использовать кастомные раскрывающиеся блоки в WordPress

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

Конечно, есть готовые плагины, например, Accordion Block или Clearfy Pro, которые добавляют похожий функционал. Но иногда стоит сделать это самостоятельно, чтобы избежать лишнего веса и зависимостей, а также получить полный контроль над стилями и поведением.

Создаем шорткод для раскрывающегося блока на PHP

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

function wp_host_raskrytij_blok_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'title' => 'Развернуть',
        'open' => 'false', // по умолчанию закрыт
        'id' => uniqid('wp_host_block_')
    ), $atts, 'raskrytij_blok');

    $open_class = ($atts['open'] === 'true') ? 'wp-host-open' : '';

    ob_start();
    ?>
    <div class="wp-host-raskrytij-blok" id="<?php echo esc_attr($atts['id']); ?>">
        <button class="wp-host-raskrytij-blok__toggle" aria-expanded="<?php echo ($atts['open'] === 'true' ? 'true' : 'false'); ?>"><?php echo esc_html($atts['title']); ?></button>
        <div class="wp-host-raskrytij-blok__content <?php echo $open_class; ?>" style="display:<?php echo ($atts['open'] === 'true' ? 'block' : 'none'); ?>">
            <?php echo do_shortcode($content); ?>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('raskrytij_blok', 'wp_host_raskrytij_blok_shortcode');

Этот шорткод принимает следующие параметры:

title — текст кнопки раскрытия;
open — должна ли секция быть открыта по умолчанию (true или false);
id — уникальный идентификатор блока, генерируется автоматически.

Использование в контенте выглядит так:

[raskrytij_blok title="Подробнее" open="false"]Ваш контент здесь[/raskrytij_blok]

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

Теперь добавим скрипт, который будет переключать видимость содержимого при нажатии на кнопку. В functions.php или в отдельном JS-файле темы подключим следующий код:

function wp_host_enqueue_raskrytij_blok_script() {
    wp_enqueue_script('wp-host-raskrytij-blok', get_template_directory_uri() . '/js/wp-host-raskrytij-blok.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'wp_host_enqueue_raskrytij_blok_script');

Создайте файл js/wp-host-raskrytij-blok.js в вашей теме и добавьте туда:

jQuery(document).ready(function($) {
    $('.wp-host-raskrytij-blok__toggle').on('click', function() {
        var btn = $(this);
        var content = btn.next('.wp-host-raskrytij-blok__content');
        content.slideToggle(200, function() {
            var isVisible = content.is(':visible');
            btn.attr('aria-expanded', isVisible);
            if(isVisible) {
                content.addClass('wp-host-open');
            } else {
                content.removeClass('wp-host-open');
            }
        });
    });
});

Стилизация раскрывающихся блоков CSS

Чтобы блоки выглядели аккуратно и были удобны, добавим базовые стили. В style.css темы добавьте:

.wp-host-raskrytij-blok {
    margin-bottom: 1.5em;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}
.wp-host-raskrytij-blok__toggle {
    width: 100%;
    text-align: left;
    background: #f7f7f7;
    border: none;
    padding: 12px 16px;
    font-size: 1rem;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease;
}
.wp-host-raskrytij-blok__toggle:hover,
.wp-host-raskrytij-blok__toggle:focus {
    background-color: #e2e2e2;
}
.wp-host-raskrytij-blok__content {
    padding: 12px 16px;
    background: #fff;
    display: none;
}
.wp-host-raskrytij-blok__content.wp-host-open {
    display: block;
}

Как расширить функционал: автоматическое закрытие других блоков

Если на странице несколько таких блоков, можно сделать так, чтобы при открытии одного остальные автоматически закрывались. Для этого немного изменим JavaScript:

jQuery(document).ready(function($) {
    $('.wp-host-raskrytij-blok__toggle').on('click', function() {
        var btn = $(this);
        var content = btn.next('.wp-host-raskrytij-blok__content');
        var container = btn.closest('.wp-host-raskrytij-blok').parent();

        // Закрываем все остальные
        container.find('.wp-host-raskrytij-blok__content').not(content).slideUp(200).removeClass('wp-host-open');
        container.find('.wp-host-raskrytij-blok__toggle').not(btn).attr('aria-expanded', 'false');

        // Переключаем текущий
        content.slideToggle(200, function() {
            var isVisible = content.is(':visible');
            btn.attr('aria-expanded', isVisible);
            if(isVisible) {
                content.addClass('wp-host-open');
            } else {
                content.removeClass('wp-host-open');
            }
        });
    });
});

Таким образом, пользователь видит только один раскрытый блок за раз — удобно для FAQ, инструкций и подобных разделов.

Плюсы собственного решения и интеграция с плагинами WPShop

Собственный шорткод и скрипт дают вам полный контроль над функционалом и дизайном. При этом вы можете интегрировать этот функционал с плагинами из WPShop для расширения возможностей. Например, можно использовать WPRemark для организации комментариев или отзывов внутри раскрывающихся блоков.

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

Выводы и рекомендации

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

Для более продвинутых решений можно добавить поддержку анимаций, хранение состояния раскрытия в cookie, или интегрировать с AJAX для динамической подгрузки содержимого. Но описанный в статье базовый функционал уже покрывает большинство задач.