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

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

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

Например, вместо того чтобы каждый раз вставлять iframe с видео, вы можете создать шорткод [wpcodes_video], который автоматически будет выводить нужный код.

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

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

Для создания шорткода в WordPress используется функция add_shortcode, которая связывает имя шорткода с функцией, возвращающей HTML-код для отображения.

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

function wpcodes_hello_shortcode() {
    return '<div>Привет, это мой первый шорткод на wpcodes.ru!</div>';
}
add_shortcode('wpcodes_hello', 'wpcodes_hello_shortcode');

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

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

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

Шорткод с атрибутами: динамический вывод данных

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

function wpcodes_button_shortcode($atts) {
    // Задаём значения атрибутов по умолчанию
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#'
        ), $atts, 'wpcodes_button'
    );

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

Использование в содержимом: [wpcodes_button text="Перейти на сайт" url="https://wpcodes.ru"]

Безопасность и экранирование

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

Стилизация шорткода

Для стилизации кнопки добавьте CSS в файл темы или плагина:

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

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

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

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

echo do_shortcode('[wpcodes_button text="Заказать" url="https://wpcodes.ru/order"]');

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

add_filter('widget_text', 'do_shortcode');

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

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

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

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

Продвинутые техники: вложенные шорткоды и обработка контента

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

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

function wpcodes_box_shortcode($atts, $content = null) {
    return '<div style="border: 2px solid #0073aa; padding: 15px; background: #f0f8ff;">' . do_shortcode($content) . '</div>';
}
add_shortcode('wpcodes_box', 'wpcodes_box_shortcode');

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

[wpcodes_box]
Это содержимое будет внутри стилизованного блока.
Можно использовать другие шорткоды внутри.
[/wpcodes_box]

Обратите внимание на вызов do_shortcode внутри функции — это позволяет обрабатывать вложенные шорткоды.

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

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

• Используйте уникальные префиксы в названиях функций и шорткодов (например, wpcodes_), чтобы избежать конфликтов с другими плагинами.
• Обязательно экранируйте все входящие данные с помощью функций esc_html, esc_url и подобных.
• Старайтесь, чтобы функции возвращали данные, а не выводили их напрямую.
• Документируйте шорткоды и их атрибуты для удобства поддержки.
• Проверяйте совместимость с разными версиями WordPress и PHP.