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

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

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

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

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

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

Создание простого шорткода в WordPress

Для начала создадим самый простой шорткод, который выводит текст «Привет, WP Partner!».

Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин:

function wppartner_simple_shortcode() {
    return 'Привет, WP Partner!';
}
add_shortcode('wppartner_greeting', 'wppartner_simple_shortcode');

Теперь в любой записи или на странице, если вы вставите [wppartner_greeting], то увидите текст «Привет, WP Partner!».

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

Функция wppartner_simple_shortcode возвращает строку, которая будет подставлена вместо шорткода. Функция add_shortcode регистрирует шорткод с именем wppartner_greeting и связывает его с вашей функцией.

Шорткод с параметрами: как передавать и использовать аргументы

Чаще всего шорткод должен принимать параметры для настройки вывода. Рассмотрим пример шорткода, который выводит сообщение с настраиваемым текстом и цветом.

function wppartner_alert_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'message' => 'Это сообщение по умолчанию',
            'color' => 'blue'
        ),
        $atts,
        'wppartner_alert'
    );
    return '<div style="padding:10px; border:1px solid '.esc_attr($atts['color']).'; color:'.esc_attr($atts['color']).';">'.esc_html($atts['message']).'</div>';
}
add_shortcode('wppartner_alert', 'wppartner_alert_shortcode');

Использовать такой шорткод можно так:

[wppartner_alert message="Важное уведомление!" color="red"]

В результате на странице появится красный блок с текстом «Важное уведомление!».

Разбор параметров

Функция shortcode_atts задаёт значения параметров по умолчанию и объединяет их с переданными аргументами. Это гарантирует, что даже если параметры не заданы, шорткод будет работать корректно.

Функции esc_attr и esc_html используются для безопасного вывода данных, предотвращая возможные XSS-атаки.

Создание шорткода с вложенным содержимым

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

function wppartner_highlight_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => 'yellow'
    ), $atts, 'wppartner_highlight');
    if ($content === null) return '';
    return '<span style="background-color:'.esc_attr($atts['color']).';">'.do_shortcode($content).'</span>';
}
add_shortcode('wppartner_highlight', 'wppartner_highlight_shortcode');

Пример использования:

[wppartner_highlight color="lightgreen"]Выделенный текст[/wppartner_highlight]

Этот шорткод обернёт текст в <span> с фоном нужного цвета, позволяя делать акценты прямо в тексте.

Расширенные возможности: подключение скриптов и стилей в шорткодах

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

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

function wppartner_enqueue_assets() {
    wp_register_style('wppartner_alert_style', get_template_directory_uri().'/css/wppartner-alert.css');
    wp_register_script('wppartner_alert_script', get_template_directory_uri().'/js/wppartner-alert.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'wppartner_enqueue_assets');

function wppartner_alert_shortcode_with_assets($atts) {
    wp_enqueue_style('wppartner_alert_style');
    wp_enqueue_script('wppartner_alert_script');

    $atts = shortcode_atts(array('message' => 'Сообщение', 'color' => 'blue'), $atts, 'wppartner_alert');
    return '<div class="wppartner-alert" data-color="'.esc_attr($atts['color']).'">'.esc_html($atts['message']).'</div>';
}
add_shortcode('wppartner_alert', 'wppartner_alert_shortcode_with_assets');

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

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

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

• Всегда очищайте входные данные через функции esc_attr, esc_html, sanitize_text_field и другие.
• Используйте shortcode_atts для обработки параметров и задания значений по умолчанию.
• Если шорткод выводит HTML, убедитесь, что он корректно экранируется и не позволяет внедрение вредоносного кода.
• Подключайте скрипты и стили только при необходимости, чтобы не замедлять сайт.
• Тестируйте шорткоды в разных условиях, чтобы избежать ошибок.

Заключение

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