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

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

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

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

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

• Удобство для пользователей и редакторов.
• Повторное использование кода в разных местах сайта.
• Изоляция логики и презентации.

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

Как зарегистрировать пользовательский шорткод в WordPress

Для регистрации шорткода используется функция add_shortcode. Она принимает два аргумента: имя шорткода и callback-функцию, которая возвращает содержимое для вывода.

Рассмотрим пример создания простого шорткода, который выводит текущую дату:

function wpticket_show_current_date() {
    return date('d.m.Y');
}
add_shortcode('wpticket_date', 'wpticket_show_current_date');

Добавьте этот код в файл functions.php вашей темы или в собственный плагин. Теперь в любом месте контента вы можете использовать [wpticket_date], и он выведет дату в формате день.месяц.год.

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

Шорткоды могут принимать параметры, позволяя менять вывод в зависимости от входящих значений. Для этого в callback-функцию передаётся массив атрибутов.

Например, создадим шорткод, который выводит приветствие с именем:

function wpticket_greeting_shortcode($atts) {
    $atts = shortcode_atts(
        array('name' => 'Гость'),
        $atts,
        'wpticket_greeting'
    );
    return 'Привет, ' . esc_html($atts['name']) . '!';
}
add_shortcode('wpticket_greeting', 'wpticket_greeting_shortcode');

Теперь можно вставить [wpticket_greeting name="Алексей"] и получить «Привет, Алексей!».

Создание более сложного шорткода с HTML и CSS

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

Пример шорткода кнопки с параметрами:

function wpticket_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'url' => '#',
            'text' => 'Нажми меня',
            'color' => 'blue'
        ),
        $atts,
        'wpticket_button'
    );
    $color_class = 'wpticket-btn-' . sanitize_html_class($atts['color']);
    return '<a href="' . esc_url($atts['url']) . '" class="wpticket-btn ' . $color_class . '">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpticket_button', 'wpticket_button_shortcode');

Для стилизации добавим CSS в файл темы или подключим через хук:

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

В файле wpticket-shortcodes.css определим стили:

.wpticket-btn {
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}
.wpticket-btn-blue { background-color: #0073aa; }
.wpticket-btn-red { background-color: #d54e21; }

Теперь вызов [wpticket_button url="https://wpticket.ru" text="Перейти на сайт" color="red"] выведет стилизованную красную кнопку.

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

При работе с пользовательским вводом в шорткодах обязательно используйте функции экранирования, такие как esc_html, esc_url и sanitize_html_class. Это предотвратит XSS-атаки и обеспечит корректное отображение.

Также не выводите напрямую PHP-код или данные из базы без проверки и фильтрации. Если шорткод создаёт формы или принимает данные от пользователей, дополнительно используйте nonce и проверяйте права доступа.

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

function wpticket_safe_text_shortcode($atts) {
    $atts = shortcode_atts(array('text' => 'Пример текста'), $atts);
    $safe_text = wp_kses_post($atts['text']);
    return '<div class="wpticket-text">' . $safe_text . '</div>';
}
add_shortcode('wpticket_text', 'wpticket_safe_text_shortcode');

Здесь используется wp_kses_post, которая разрешает безопасный HTML, но удаляет потенциально опасные теги.

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

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

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

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

Заключение

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