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

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

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

Шорткод – это короткая метка в квадратных скобках, например, [hueman_button], которая заменяется на определённый HTML или динамический контент при отображении страницы. Благодаря шорткодам можно значительно упростить редактирование контента, не прибегая к сложным редакторам или программированию.

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

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

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

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

    return '<a href="' . esc_url($atts['url']) . '" class="hueman-btn">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('hueman_button', 'hueman_button_shortcode');

Этот код создаёт шорткод [hueman_button text="Текст" url="ссылка"], который выводит простую кнопку с заданным текстом и ссылкой. По умолчанию текст – «Нажми меня», а ссылка – «#».

Добавление стилей и скриптов для шорткода

Чтобы кнопка выглядела красиво, нужно подключить CSS. Для этого рекомендуем использовать хук wp_enqueue_scripts и проверять, что подключение происходит только при необходимости.

function hueman_enqueue_styles() {
    wp_enqueue_style('hueman-shortcode-style', get_template_directory_uri() . '/css/hueman-shortcode.css');
}
add_action('wp_enqueue_scripts', 'hueman_enqueue_styles');

В файле hueman-shortcode.css можно задать стили для класса hueman-btn:

.hueman-btn {
    background-color: #0073aa;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.hueman-btn:hover {
    background-color: #005177;
}

Расширение шорткода: добавляем атрибуты и обработку ошибок

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

function hueman_button_shortcode($atts) {
    $atts = shortcode_atts(array(
        'text' => '',
        'url' => ''
    ), $atts, 'hueman_button');

    if (empty($atts['text']) || empty($atts['url'])) {
        return '<!-- Ошибка: укажите text и url в шорткоде -->';
    }

    if (!filter_var($atts['url'], FILTER_VALIDATE_URL)) {
        return '<!-- Ошибка: неверный URL -->';
    }

    return '<a href="' . esc_url($atts['url']) . '" class="hueman-btn" target="_blank" rel="noopener noreferrer">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('hueman_button', 'hueman_button_shortcode');

Такой подход повышает надёжность кода и удобство использования шорткода.

Пример сложного шорткода: вывод последних постов с кастомными параметрами

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

function hueman_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
        'category' => ''
    ), $atts, 'hueman_recent_posts');

    $args = array(
        'posts_per_page' => intval($atts['count']),
        'post_status' => 'publish'
    );

    if (!empty($atts['category'])) {
        $args['category_name'] = sanitize_text_field($atts['category']);
    }

    $query = new WP_Query($args);
    if (!$query->have_posts()) {
        return '<p>Посты не найдены.</p>';
    }

    $output = '<ul class="hueman-recent-posts">';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    wp_reset_postdata();
    $output .= '</ul>';

    return $output;
}
add_shortcode('hueman_recent_posts', 'hueman_recent_posts_shortcode');

Этот шорткод [hueman_recent_posts count="3" category="novosti"] выведет три последних поста из категории «novosti». Можно использовать и без параметров, тогда выведет 5 последних постов из всех категорий.

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

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

• Shortcodes Ultimate – большой набор готовых шорткодов с удобным интерфейсом.
• Custom Shortcodes – позволяет создавать и управлять своими шорткодами через админку.
• WPBakery Page Builder и Elementor – визуальные конструкторы с поддержкой шорткодов.

Но если нужно что-то уникальное и оптимальное, лучше создавать свои шорткоды, как показано в примерах выше.

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

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

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

Следуя этим рекомендациям, вы сделаете свои шорткоды надёжными и быстрыми.