Как создать собственный шорткод для popup в WordPress

Автор: Евгения Ширяева | Опубликовано: 03.12.2025

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

Что такое шорткод и зачем создавать свой popup шорткод

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

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

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

Создаем шорткод для popup: базовая структура

Для начала создадим функцию, которая будет возвращать HTML разметку для popup окна. Затем зарегистрируем шорткод, который будет вызывать эту функцию.

function wppopup_create_popup_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'id' => 'wppopup-default',
        'title' => 'Всплывающее окно',
        'button_text' => 'Показать popup'
    ), $atts, 'wppopup_popup');

    ob_start();
    ?>
    <button id="<?php echo esc_attr($atts['id'] . '-btn'); ?>"><?php echo esc_html($atts['button_text']); ?></button>
    <div id="<?php echo esc_attr($atts['id']); ?>" class="wppopup-modal" style="display:none;">
        <div class="wppopup-content">
            <span class="wppopup-close" id="<?php echo esc_attr($atts['id'] . '-close'); ?>">×</span>
            <h2><?php echo esc_html($atts['title']); ?></h2>
            <div class="wppopup-body">
                <?php echo do_shortcode($content); ?>
            </div>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('wppopup_popup', 'wppopup_create_popup_shortcode');

Объяснение:

Функция принимает атрибуты id, title и button_text, а также содержимое popup.
Выводит кнопку, по клику на которую будет показываться popup.
Сам popup изначально скрыт (display:none).
Используется ob_start() и ob_get_clean() для возврата HTML как строки.
При регистрации шорткод будет называться [wppopup_popup].

Добавляем CSS для стилизации popup окна

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

function wppopup_enqueue_styles() {
    wp_add_inline_style('wp-block-library', '
        .wppopup-modal {
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.5);
        }
        .wppopup-content {
            background-color: #fff;
            margin: 10% auto;
            padding: 20px;
            border-radius: 5px;
            width: 80%;
            max-width: 500px;
            position: relative;
            box-shadow: 0 0 10px rgba(0,0,0,0.25);
        }
        .wppopup-close {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
    ');
}
add_action('wp_enqueue_scripts', 'wppopup_enqueue_styles');

Этот код добавляет необходимые стили для затемнения фона, оформления окна и кнопки закрытия.

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

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

function wppopup_enqueue_scripts() {
    wp_add_inline_script('jquery-core', "
        jQuery(document).ready(function($) {
            $('.wppopup-modal').hide();

            $('[id$='-btn']').click(function() {
                var popupId = $(this).attr('id').replace('-btn', '');
                $('#' + popupId).fadeIn();
            });

            $('[id$='-close']').click(function() {
                var popupId = $(this).attr('id').replace('-close', '');
                $('#' + popupId).fadeOut();
            });

            // Закрытие по клику вне контента
            $('.wppopup-modal').click(function(e) {
                if ($(e.target).hasClass('wppopup-modal')) {
                    $(this).fadeOut();
                }
            });
        });
    ");
}
add_action('wp_enqueue_scripts', 'wppopup_enqueue_scripts');

Объяснение:

Скрываем все popup окна при загрузке страницы.
Назначаем обработчик клика для кнопок с id, оканчивающимся на -btn, открывающий соответствующий popup.
Обработчик клика на крестик -close закрывает popup.
Добавлена возможность закрыть окно кликом по затемненному фону.

Пример использования шорткода с содержимым

Чтобы вывести popup на странице, вставьте такой код в редактор:

[wppopup_popup id="promo1" title="Специальное предложение" button_text="Показать предложение"]
<p>Здесь можно разместить любой HTML-контент, например, форму подписки или акционный баннер.</p>
[/wppopup_popup]

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

Расширение функционала: добавляем параметры для размера и анимации

Можно добавить дополнительные атрибуты для настройки ширины окна и эффекта появления.

function wppopup_create_popup_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'id' => 'wppopup-default',
        'title' => 'Всплывающее окно',
        'button_text' => 'Показать popup',
        'width' => '500px',
        'animation' => 'fade'
    ), $atts, 'wppopup_popup');

    ob_start();
    ?>
    <button id="<?php echo esc_attr($atts['id'] . '-btn'); ?>"><?php echo esc_html($atts['button_text']); ?></button>
    <div id="<?php echo esc_attr($atts['id']); ?>" class="wppopup-modal wppopup-animation-<?php echo esc_attr($atts['animation']); ?>" style="display:none;">
        <div class="wppopup-content" style="width: <?php echo esc_attr($atts['width']); ?>;">
            <span class="wppopup-close" id="<?php echo esc_attr($atts['id'] . '-close'); ?>">×</span>
            <h2><?php echo esc_html($atts['title']); ?></h2>
            <div class="wppopup-body">
                <?php echo do_shortcode($content); ?>
            </div>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('wppopup_popup', 'wppopup_create_popup_shortcode');

И в CSS добавить анимации:

.wppopup-animation-fade .wppopup-content {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.wppopup-modal.wppopup-animation-fade:visible .wppopup-content {
    opacity: 1;
}

Таким образом можно гибко настраивать popup под задачи проекта.

Примеры популярных плагинов для popup в WordPress

Если хотите готовое решение, обратите внимание на эти плагины, которые можно интегрировать с собственными шорткодами или расширять:

Popup Maker — мощный и гибкий плагин с множеством настроек и триггеров.
OptinMonster — ориентирован на маркетинг, позволяет создавать красивые формы и popup.
WP Popups — простой и легкий плагин с базовыми функциями.

Но если нужно что-то легкое и кастомное — собственный шорткод, описанный выше, отличный вариант.