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

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

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

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

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

Основные преимущества шорткодов:

• Удобство использования для контент-менеджеров;
• Гибкость и расширяемость;
• Лёгкость интеграции с темами и плагинами;
• Минимальное влияние на производительность.

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

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

Создание функции обработчика шорткода

Функция должна принимать два параметра: атрибуты шорткода и содержимое внутри тегов (если шорткод парный). Внутри функции вы можете обрабатывать атрибуты, генерировать HTML и возвращать результат.

function wpcource_shortcode_hello($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            'name' => 'Гость',
        ),
        $atts,
        'wpcource_hello'
    );

    return '<p>Привет, ' . esc_html($atts['name']) . '!</p>';
}

Регистрация шорткода

Далее нужно зарегистрировать функцию под определённым именем шорткода:

add_shortcode('wpcource_hello', 'wpcource_shortcode_hello');

Теперь в любом месте сайта можно использовать [wpcource_hello name="Иван"], и шорткод выведет: Привет, Иван!

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

1. Шорткод для вывода текущей даты и времени

Полезно вставлять актуальную дату в текст, например, для новостей или акций.

function wpcource_shortcode_datetime($atts) {
    $atts = shortcode_atts(array(
        'format' => 'd.m.Y H:i',
    ), $atts, 'wpcource_datetime');

    return date($atts['format']);
}
add_shortcode('wpcource_datetime', 'wpcource_shortcode_datetime');

Использование: [wpcource_datetime format="d F Y"]

2. Шорткод для создания кнопки с ссылкой

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

function wpcource_shortcode_button($atts, $content = null) {
    $atts = shortcode_atts(array(
        'url' => '#',
        'color' => 'blue',
    ), $atts, 'wpcource_button');

    $color = in_array($atts['color'], array('blue', 'red', 'green')) ? $atts['color'] : 'blue';

    return '<a href="' . esc_url($atts['url']) . '" class="wpcource-btn wpcource-btn-' . esc_attr($color) . '">' . do_shortcode($content) . '</a>';
}
add_shortcode('wpcource_button', 'wpcource_shortcode_button');

Пример использования: [wpcource_button url="https://wpcource.ru" color="red"]Перейти на сайт[/wpcource_button]

Для правильного отображения кнопок добавьте в тему CSS:

.wpcource-btn {
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    display: inline-block;
    font-weight: bold;
}
.wpcource-btn-blue { background-color: #0073aa; }
.wpcource-btn-red { background-color: #d54e21; }
.wpcource-btn-green { background-color: #46b450; }

Как работать с атрибутами и содержимым шорткодов

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

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

Пример парного шорткода, который выделяет текст:

function wpcource_shortcode_highlight($atts, $content = null) {
    return '<span style="background-color: yellow;">' . do_shortcode($content) . '</span>';
}
add_shortcode('wpcource_highlight', 'wpcource_shortcode_highlight');

Использование: [wpcource_highlight]Важный текст[/wpcource_highlight]

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

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

1. Shortcodes Ultimate

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

2. WP Shortcode by MyThemeShop

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

3. Custom Content Shortcode

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

Как отладить и тестировать шорткоды

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

Советы по отладке:

• Используйте функцию error_log для записи значений переменных;
• Проверяйте корректность данных с помощью esc_html, esc_url и других функций экранирования;
• Тестируйте шорткод на разных страницах и в разных редакторах (классический, Gutenberg);
• Изолируйте проблемы, отключая другие плагины и меняя темы.

Резюме: создаём надежные и удобные шорткоды для WordPress на wpcource.ru

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