Как создать собственный шорткод в WordPress с применением WPLab

Автор: Дмитрий Громов | Опубликовано: 06.11.2025

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

Что такое шорткоды и зачем они нужны в WordPress

Шорткод — это специальный тег в квадратных скобках, который WordPress заменяет на определённый контент при выводе страницы. Например, [gallery] вставляет галерею изображений, а [contact-form] может выводить форму обратной связи.

Основные преимущества использования шорткодов:

Удобство использования в редакторе — не нужно писать сложный HTML или PHP.
Возможность многоразового использования одного и того же функционала.
Легкость передачи параметров для настройки вывода.

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

Создание простого шорткода на примере WPLab

Начнём с самого простого: создадим шорткод, который выводит приветствие с вашим именем. Добавим функцию в файл functions.php вашей темы или в свой плагин.

function wplab_hello_shortcode($atts) {
    $atts = shortcode_atts(array(
        'name' => 'Гость',
    ), $atts, 'wplab_hello');

    return '<p>Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на WPLab.</p>';
}
add_shortcode('wplab_hello', 'wplab_hello_shortcode');

Теперь в редакторе WordPress вы можете вставить [wplab_hello name="Иван"] и увидите персональное приветствие.

Разбор кода

Функция wplab_hello_shortcode принимает массив атрибутов $atts, задаёт значение по умолчанию с помощью shortcode_atts и возвращает HTML с безопасной обработкой текста через esc_html. Регистрация шорткода происходит через add_shortcode, где первый параметр — это название шорткода, второй — функция-обработчик.

Шорткод с динамическим выводом данных: пример с выводом последних постов

Часто требуется вывести список последних записей с кастомным форматированием. Создадим шорткод [wplab_latest_posts count="5"], который выводит заголовки последних постов с ссылками.

function wplab_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 3,
    ), $atts, 'wplab_latest_posts');

    $query = new WP_Query(array(
        'posts_per_page' => intval($atts['count']),
        'post_status' => 'publish',
    ));

    if (!$query->have_posts()) {
        return '<p>Нет доступных записей.</p>';
    }

    $output = '<ul class="wplab-latest-posts">';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<li><a href="' . esc_url(get_permalink()) . '">' . esc_html(get_the_title()) . '</a></li>';
    }
    wp_reset_postdata();
    $output .= '</ul>';

    return $output;
}
add_shortcode('wplab_latest_posts', 'wplab_latest_posts_shortcode');

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

Что важно учесть при работе с WP_Query в шорткодах

Запросы к базе данных должны быть оптимизированы и корректно сбрасываться после выполнения, чтобы не влиять на основной цикл WordPress. Используйте wp_reset_postdata(), как показано выше.

Также обязательно фильтруйте входные данные — в нашем случае мы приводим параметр count к целому числу через intval.

Шорткод с вложенными атрибутами и содержимым: создание аккордеона

Иногда нужно создавать интерактивные элементы, например, аккордеон — блок с заголовками, по клику на которые открывается содержимое. Сделаем упрощённый пример с двумя уровнями шорткодов: [wplab_accordion] и [wplab_accordion_item title="Заголовок"]текст[/wplab_accordion_item].

function wplab_accordion_shortcode($atts, $content = null) {
    return '<div class="wplab-accordion">' . do_shortcode($content) . '</div>';
}

function wplab_accordion_item_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'title' => 'Заголовок',
    ), $atts, 'wplab_accordion_item');

    $output = '<div class="wplab-accordion-item">';
    $output .= '<h3 class="wplab-accordion-title">' . esc_html($atts['title']) . '</h3>';
    $output .= '<div class="wplab-accordion-content" style="display:none;">' . do_shortcode($content) . '</div>';
    $output .= '</div>';

    return $output;
}

add_shortcode('wplab_accordion', 'wplab_accordion_shortcode');
add_shortcode('wplab_accordion_item', 'wplab_accordion_item_shortcode');

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

document.addEventListener('DOMContentLoaded', function() {
    const titles = document.querySelectorAll('.wplab-accordion-title');
    titles.forEach(function(title) {
        title.addEventListener('click', function() {
            const content = this.nextElementSibling;
            if (content.style.display === 'block') {
                content.style.display = 'none';
            } else {
                content.style.display = 'block';
            }
        });
    });
});

Реализация и стилизация

Добавьте CSS для стилизации аккордеона, чтобы он выглядел аккуратно:

.wplab-accordion {
    border: 1px solid #ccc;
    border-radius: 4px;
}
.wplab-accordion-item {
    border-top: 1px solid #ccc;
}
.wplab-accordion-item:first-child {
    border-top: none;
}
.wplab-accordion-title {
    margin: 0;
    padding: 10px;
    background: #f7f7f7;
    cursor: pointer;
    user-select: none;
}
.wplab-accordion-content {
    padding: 10px;
    background: #fff;
}

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

Советы по безопасности и производительности при создании шорткодов

При разработке шорткодов важно соблюдать несколько правил:

Всегда фильтруйте и экранируйте входящие параметры с помощью esc_html(), esc_attr() или других функций WordPress.
Не выполняйте тяжелые запросы в шорткодах без необходимости — это может замедлить страницу.
При работе с пользовательским вводом убедитесь, что не допускаете XSS-уязвимостей.
Кешируйте результаты сложных операций, если шорткод часто вызывается.

Используйте встроенные функции WordPress, чтобы обеспечить совместимость и безопасность.

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

Если вы хотите использовать готовые решения или расширять функционал шорткодов, обратите внимание на следующие плагины:

Shortcodes Ultimate — мощный набор готовых шорткодов для разных нужд: кнопки, колонки, табы, аккордеоны и многое другое.
WP Shortcode — простой плагин с базовым набором шорткодов и возможностью быстро добавлять их через визуальный редактор.
Custom Content Shortcode — позволяет создавать настраиваемые шорткоды с произвольным содержимым и параметрами без программирования.

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

Заключение: интеграция шорткодов в ваш проект на WPLab

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