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

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

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

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

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

Основные шаги создания шорткода в WordPress

Чтобы создать шорткод, нужно выполнить два простых шага:

• Написать функцию, которая генерирует нужный контент.
• Зарегистрировать шорткод, связав его с функцией.

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

function wpcheck_hello_shortcode() {
    return '<p>Привет от WPCheck!</p>';
}
add_shortcode('wpcheck_hello', 'wpcheck_hello_shortcode');

Теперь, вставив в редактор WordPress [wpcheck_hello], вы увидите текст «Привет от WPCheck!».

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

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

function wpcheck_greet_shortcode($atts) {
    $atts = shortcode_atts(array(
        'name' => 'гость',
    ), $atts, 'wpcheck_greet');

    return '<p>Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на WPCheck.</p>';
}
add_shortcode('wpcheck_greet', 'wpcheck_greet_shortcode');

Теперь вы можете использовать [wpcheck_greet name="Иван"] и получить персональное приветствие.

Обработка атрибутов и безопасность

Обязательно используйте shortcode_atts для установки значений по умолчанию и esc_html или другие функции экранирования для безопасности вывода. Это предотвратит XSS-уязвимости при выводе пользовательских данных.

Шорткод с вложенным контентом (контейнер)

Иногда нужно создать шорткод, который обрабатывает содержимое между тегами, например:

[wpcheck_box]Текст в рамке[/wpcheck_box]

Для этого функция шорткода должна принимать второй параметр $content и обрабатывать его.

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

Такой шорткод полезен для выделения текста, создания блоков информации и т.п.

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

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

Для этого используется функция do_shortcode():

echo do_shortcode('[wpcheck_hello]');

Это вызовет шорткод и выведет соответствующий HTML.

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

• Вывод текущей даты: [wpcheck_date] — динамически выводит сегодняшнюю дату.
• Кнопка с ссылкой: [wpcheck_button url="https://wpcheck.ru" text="Перейти на WPCheck"].
• Таблица с данными: создание простого табличного вывода из массива данных.

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

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

    return '<a href="' . esc_url($atts['url']) . '" class="wpcheck-button" style="display:inline-block;padding:10px 20px;background:#0073aa;color:#fff;text-decoration:none;border-radius:4px;">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpcheck_button', 'wpcheck_button_shortcode');

Рекомендации по оптимизации и поддержке шорткодов

Чтобы шорткоды были удобными и безопасными:

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

Популярные плагины для расширения функционала шорткодов

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

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

Заключение

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