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

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

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

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

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

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

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

Чтобы создать шорткод, нужно зарегистрировать функцию, которая будет обрабатывать вызов шорткода, и связать её с определённым тегом. Все эти действия выполняются через хук add_shortcode в файле functions.php вашей темы или в отдельном плагине.

Рассмотрим простой пример шорткода, который выводит приветствие с именем пользователя, переданным через параметр:

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

Использовать такой шорткод можно так: [hello name="Алексей"]. В результате на странице появится текст: «Привет, Алексей! Добро пожаловать на сайт.» Если параметр не передать, будет использоваться значение по умолчанию «гость».

Объяснение кода

• shortcode_atts объединяет переданные атрибуты с дефолтными значениями.
• esc_html обеспечивает защиту от XSS, экранируя вывод.
• Функция возвращает строку, которая подставляется на место шорткода.

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

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

function wpexamples_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#',
            'color' => '#0073aa'
        ),
        $atts,
        'button'
    );
    $text = esc_html($atts['text']);
    $url = esc_url($atts['url']);
    $color = esc_attr($atts['color']);

    return '<a href="' . $url . '" style="display:inline-block;padding:10px 20px;color:#fff;background-color:' . $color . ';text-decoration:none;border-radius:4px;">' . $text . '</a>';
}
add_shortcode('button', 'wpexamples_button_shortcode');

Использование: [button text="Подробнее" url="https://wpexamples.ru" color="#ff6600"]. Вы получите стилизованную кнопку с указанным текстом и ссылкой.

Также шорткоды могут быть вложенными, когда один шорткод находится внутри другого. Для корректной работы нужно обрабатывать содержимое между тегами:

function wpexamples_box_shortcode($atts, $content = null) {
    return '<div style="border:2px solid #0073aa;padding:15px;border-radius:5px;">' . do_shortcode($content) . '</div>';
}
add_shortcode('box', 'wpexamples_box_shortcode');

Теперь можно использовать так:

[box]Текст внутри коробки и кнопка [button text="Клик"][/box]

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

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

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

• Shortcodes Ultimate — один из самых популярных плагинов с набором более 50 шорткодов для кнопок, галерей, вкладок, аккордеонов и многого другого. Позволяет быстро создавать красивые элементы без программирования.
• WP Shortcode by MyThemeShop — предлагает удобный интерфейс и набор часто используемых шорткодов, включая колонки, кнопки, цитаты и пр.
• Shortcoder — позволяет создавать собственные шорткоды с произвольным HTML, JavaScript и PHP. Очень полезен для вставки повторяющихся элементов, таких как рекламные блоки или виджеты.

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

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

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

• Используйте функции esc_html, esc_attr, esc_url для экранирования вывода, чтобы избежать XSS-уязвимостей.
• Не выполняйте тяжелые операции внутри шорткода — это может замедлить загрузку страниц.
• Если шорткод выводит сложный HTML, используйте ob_start() и ob_get_clean() для удобства формирования вывода.
• Документируйте параметры и поведение шорткодов, чтобы облегчить поддержку.

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

function wpexamples_complex_shortcode($atts) {
    ob_start();
    // Сложная логика или HTML
    ?>
    <div class="custom-box">
        <h3>Заголовок</h3>
        <p>Динамический контент, который может содержать HTML и PHP.</p>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('complex', 'wpexamples_complex_shortcode');

Заключение

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

Используйте приведённые примеры для старта и экспериментируйте с различными вариантами, а также не забывайте про безопасность и оптимизацию кода.