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

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

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

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

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

• Упрощение вставки сложных элементов
• Повторное использование кода без дублирования
• Разделение контента и логики

Далее мы поэтапно разберём создание шорткода на примере, а также добавим несколько полезных вариантов.

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

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

function wpkeys_hello_shortcode($atts) {
    $attributes = shortcode_atts(array(
        'name' => 'Гость'
    ), $atts);
    return '<p>Привет, ' . esc_html($attributes['name']) . '! Добро пожаловать на WPKeys.</p>';
}
add_shortcode('wpkeys_hello', 'wpkeys_hello_shortcode');

Разбор кода:

• shortcode_atts — функция для установки значений атрибутов по умолчанию и объединения с переданными.
• esc_html — безопасное вывод текста, чтобы избежать XSS.
• add_shortcode — регистрирует шорткод с именем wpkeys_hello.

Теперь, вставив в редактор [wpkeys_hello name="Иван"], вы увидите: Привет, Иван! Добро пожаловать на WPKeys.

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

Шорткоды могут принимать не только атрибуты, но и содержать вложенный контент, который передаётся функции в параметре $content. Рассмотрим пример шорткода, который выделяет текст в рамку:

function wpkeys_box_shortcode($atts, $content = null) {
    $attributes = shortcode_atts(array(
        'color' => '#f0f0f0',
        'border' => '1px solid #ccc'
    ), $atts);
    return '<div style="background:' . esc_attr($attributes['color']) . '; border:' . esc_attr($attributes['border']) . '; padding:10px; margin:10px 0;">' . do_shortcode($content) . '</div>';
}
add_shortcode('wpkeys_box', 'wpkeys_box_shortcode');

Использование в редакторе:

[wpkeys_box color="#e0f7fa" border="2px dashed #00796b"]Текст внутри цветной рамки[/wpkeys_box]

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

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

1. Шорткод для вывода последнего поста

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

function wpkeys_latest_post_shortcode() {
    $args = array(
        'numberposts' => 1,
        'post_status' => 'publish'
    );
    $recent_posts = wp_get_recent_posts($args);
    if (empty($recent_posts)) {
        return '<p>Посты отсутствуют.</p>';
    }
    $post = $recent_posts[0];
    $title = esc_html($post['post_title']);
    $permalink = esc_url(get_permalink($post['ID']));
    return '<p>Последний пост: <a href="' . $permalink . '">' . $title . '</a></p>';
}
add_shortcode('wpkeys_latest_post', 'wpkeys_latest_post_shortcode');

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

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

function wpkeys_button_shortcode($atts) {
    $attributes = shortcode_atts(array(
        'url' => '#',
        'text' => 'Кнопка',
        'color' => '#0073aa'
    ), $atts);
    $url = esc_url($attributes['url']);
    $text = esc_html($attributes['text']);
    $color = esc_attr($attributes['color']);
    return '<a href="' . $url . '" style="background:' . $color . '; color:#fff; padding:10px 20px; text-decoration:none; border-radius:3px; display:inline-block;">' . $text . '</a>';
}
add_shortcode('wpkeys_button', 'wpkeys_button_shortcode');

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

[wpkeys_button url="https://wpkeys.ru" text="Перейти на WPKeys" color="#005075"]

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

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

• Используйте функции безопасности — esc_html, esc_attr, esc_url для вывода данных.
• Обрабатывайте вложенный контент через do_shortcode(), чтобы поддерживать вложенность шорткодов.
• Не выводите напрямую, а возвращайте результат из функции.
• Избегайте сложных и ресурсоёмких операций в шорткодах.
• Тестируйте на разных страницах и с разными параметрами.

Как добавить шорткоды в виджеты и шаблоны WordPress

По умолчанию WordPress не поддерживает шорткоды в текстовых виджетах, но это легко исправить добавлением фильтра:

add_filter('widget_text', 'do_shortcode');

Чтобы вывести шорткод в PHP-шаблоне, используйте функцию do_shortcode:

echo do_shortcode('[wpkeys_hello name="Читатель"]');

Это полезно, когда нужно вставить динамический контент в тему напрямую.

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

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

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