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

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

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

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

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

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

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

function wpeditor_hello_shortcode() {
    return '<p>Привет, это мой первый шорткод!</p>';
}
add_shortcode('wpeditor_hello', 'wpeditor_hello_shortcode');

Вставьте этот код в файл functions.php вашей темы или в файл подключаемого плагина. После этого в любом посте или странице можно использовать [wpeditor_hello], и WordPress выведет указанный текст.

Пояснение к коду

• Функция wpeditor_hello_shortcode возвращает HTML-строку с приветствием.
• Функция add_shortcode регистрирует шорткод с именем wpeditor_hello и связывает его с нашей функцией.

Добавление параметров в шорткод для динамического вывода

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

Рассмотрим пример шорткода [wpeditor_button text="Кликни меня" url="https://wpeditor.ru"], который выводит кнопку с заданным текстом и ссылкой.

function wpeditor_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#'
        ), $atts, 'wpeditor_button'
    );

    return '<a href="' . esc_url($atts['url']) . '" class="wpeditor-button">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpeditor_button', 'wpeditor_button_shortcode');

Теперь вы можете вставить в контент [wpeditor_button text="Заказать" url="https://wpeditor.ru/order"], и на сайте появится аккуратная кнопка со ссылкой.

Безопасность и очистка данных

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

Как добавить стили и скрипты для шорткода

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

Пример подключения CSS для нашего шорткода с кнопкой:

function wpeditor_enqueue_shortcode_styles() {
    wp_enqueue_style('wpeditor-button-style', get_stylesheet_directory_uri() . '/css/wpeditor-button.css');
}
add_action('wp_enqueue_scripts', 'wpeditor_enqueue_shortcode_styles');

Создайте файл wpeditor-button.css в папке css вашей темы и добавьте стили, например:

.wpeditor-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}
.wpeditor-button:hover {
    background-color: #005177;
}

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

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

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

• Вывод случайной цитаты или совета из заранее заданного списка.
• Встраивание кастомных форм обратной связи.
• Отображение последних новостей или товаров с фильтрами.
• Показывать контент только зарегистрированным пользователям.

Пример шорткода с параметрами для вывода случайной цитаты

function wpeditor_random_quote_shortcode() {
    $quotes = array(
        'Будь изменением, которое хочешь видеть в мире.',
        'Всё, что ни делается, — к лучшему.',
        'Не бойся ошибок, учись на них.',
        'Успех приходит к тем, кто действует.'
    );
    $random_index = array_rand($quotes);
    return '<blockquote>' . esc_html($quotes[$random_index]) . '</blockquote>';
}
add_shortcode('wpeditor_random_quote', 'wpeditor_random_quote_shortcode');

Вставьте [wpeditor_random_quote] в любой материал — посетители будут видеть разные вдохновляющие цитаты.

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

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

• Всегда проверяйте входные параметры через shortcode_atts() и фильтры безопасности.
• Используйте буферизацию вывода, если нужно выводить сложный HTML.
• Для тяжёлых операций (запросы к базе, API) кэшируйте результаты.
• Старайтесь минимизировать подключение сторонних скриптов.

Также тестируйте шорткоды на локальной копии сайта, чтобы исключить конфликты с другими плагинами.