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

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

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

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

Преимущества шорткодов:

Удобство использования для контент-менеджеров без навыков программирования.
Повторное использование кода в разных местах сайта.
Гибкость и расширяемость функционала без изменения темы.

Основы создания шорткода: пример простого шорткода с текстом

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

function wpdeveloper_hello_shortcode($atts) {
    $atts = shortcode_atts(
        array('name' => 'гость'),
        $atts,
        'hello'
    );
    return 'Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на сайт.';
}
add_shortcode('hello', 'wpdeveloper_hello_shortcode');

Теперь, если вставить в контент [hello name="Иван"], на странице отобразится: «Привет, Иван! Добро пожаловать на сайт.»

Передача параметров и обработка атрибутов шорткода

Один из ключевых моментов — уметь принимать параметры. Функция shortcode_atts() позволяет задать значения по умолчанию, которые будут использоваться, если параметры не переданы.

Допустим, мы хотим создать шорткод, который выводит кнопку с настраиваемым текстом и ссылкой:

function wpdeveloper_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#',
            'target' => '_self'
        ),
        $atts,
        'button'
    );
    return '<a href="' . esc_url($atts['url']) . '" target="' . esc_attr($atts['target']) . '" class="wpdeveloper-button">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('button', 'wpdeveloper_button_shortcode');

Использование: [button text="Перейти на WPDeveloper" url="https://wpdeveloper.ru" target="_blank"] создаст ссылку с нужным текстом и открытием в новой вкладке.

Добавление стилей и скриптов для шорткодов

Чтобы кнопка выглядела красиво, нужно добавить CSS. Это можно сделать, подключив стили в функции темы или плагина. Пример подключения в functions.php:

function wpdeveloper_enqueue_shortcode_styles() {
    wp_enqueue_style('wpdeveloper-shortcode-style', get_stylesheet_directory_uri() . '/css/wpdeveloper-shortcodes.css');
}
add_action('wp_enqueue_scripts', 'wpdeveloper_enqueue_shortcode_styles');

В файле wpdeveloper-shortcodes.css можно прописать стили:

.wpdeveloper-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}
.wpdeveloper-button:hover {
    background-color: #005177;
}

Шорткоды с вложенным содержимым (content)

Иногда нужно, чтобы шорткод принимал не только атрибуты, но и содержимое между открывающим и закрывающим тегом. Для этого функция должна принимать второй параметр — $content.

Пример — шорткод, который оборачивает текст в стилизованный блок:

function wpdeveloper_box_shortcode($atts, $content = null) {
    return '<div class="wpdeveloper-box">' . do_shortcode($content) . '</div>';
}
add_shortcode('box', 'wpdeveloper_box_shortcode');

Использование:

[box]Здесь может быть любой текст и даже другие шорткоды.[/box]

Добавим CSS для блока:

.wpdeveloper-box {
    border: 2px solid #0073aa;
    padding: 15px;
    background-color: #f0f8ff;
    border-radius: 5px;
}

Безопасность и оптимизация шорткодов

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

Также рекомендуется кешировать сложные вычисления внутри шорткода, если они затрагивают производительность, используя Transient API или другие методы.

Итоговые рекомендации для разработчиков

Создание шорткодов — это навык, который стоит освоить каждому разработчику WordPress. Это позволяет:

Упрощать работу контент-менеджеров.
Структурировать функционал.
Повысить повторно используемость кода.
Создавать гибкие и масштабируемые решения.

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

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