Создаем эффективный shortcode в WordPress с примерами кода

Что такое shortcode в WordPress и зачем он нужен

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

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

Основы создания shortcode: хук и функция обработки

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

Пример простого шорткода, который выводит текущую дату:

function wpreg_show_date_shortcode() {
    return date('d.m.Y');
}
add_shortcode('wpreg_date', 'wpreg_show_date_shortcode');

Теперь, вставив в редактор [wpreg_date], вы увидите дату в формате день.месяц.год. Таким образом, создается базовый функционал shortcode.

Добавление параметров к шорткоду: использование атрибутов

Чтобы сделать shortcode более гибким, можно добавить атрибуты. Например, изменим дату, чтобы можно было задать формат через атрибут format:

function wpreg_show_date_shortcode($atts) {
    $atts = shortcode_atts(array(
        'format' => 'd.m.Y'
    ), $atts, 'wpreg_date');
    return date($atts['format']);
}
add_shortcode('wpreg_date', 'wpreg_show_date_shortcode');

Теперь можно использовать [wpreg_date format="Y-m-d"] для вывода даты в формате 2024-06-01. Это расширяет возможности шорткода и делает его универсальным.

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

Один из частых случаев — вывод списка последних записей. Создадим шорткод, который покажет последние 5 записей с ссылками.

function wpreg_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5
    ), $atts, 'wpreg_recent_posts');

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

    if (!$query->have_posts()) {
        return '<p>Записей не найдено.</p>';
    }

    $output = '<ul>';
    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('wpreg_recent_posts', 'wpreg_recent_posts_shortcode');

Такой шорткод [wpreg_recent_posts count="3"] выведет три последние записи. Это полезно для блогов и новостных сайтов.

Безопасность и производительность: важные аспекты при создании shortcode

При создании шорткодов важно учитывать безопасность. Никогда не выводите пользовательский ввод без фильтрации. Для HTML используйте функции esc_html или esc_attr. Для URL — esc_url.

Например, если шорткод принимает URL, нужно сделать так:

function wpreg_link_shortcode($atts) {
    $atts = shortcode_atts(array(
        'url' => '#',
        'text' => 'ссылка'
    ), $atts, 'wpreg_link');

    $url = esc_url($atts['url']);
    $text = esc_html($atts['text']);

    return '<a href="' . $url . '">' . $text . '</a>';
}
add_shortcode('wpreg_link', 'wpreg_link_shortcode');

Производительность тоже важна. Старайтесь минимизировать запросы к базе и кешировать результаты, если данные не меняются часто. Например, используйте встроенный объект WP_Object_Cache или транзиенты.

Пример расширенного shortcode с кешированием через транзиенты

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

function wpreg_popular_posts_shortcode($atts) {
    $cache_key = 'wpreg_popular_posts';
    $output = get_transient($cache_key);

    if ($output === false) {
        $query = new WP_Query(array(
            'posts_per_page' => 5,
            'meta_key' => 'wpreg_post_views',
            'orderby' => 'meta_value_num',
            'order' => 'DESC',
            'post_status' => 'publish'
        ));

        if (!$query->have_posts()) {
            return '<p>Популярные записи не найдены.</p>';
        }

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

        set_transient($cache_key, $output, HOUR_IN_SECONDS);
    }

    return $output;
}
add_shortcode('wpreg_popular_posts', 'wpreg_popular_posts_shortcode');

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

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

Шорткоды отлично работают в классических текстовых виджетах WordPress. Для добавления в виджет просто вставьте шорткод в текст.

В редакторе Gutenberg можно использовать блок «Шорткод» и вставлять туда ваши коды. Это расширяет возможности кастомизации контента без программирования.

Создание собственного блока Gutenberg с поддержкой шорткода WPReg

Если нужно интегрировать шорткод в дизайн через Gutenberg, можно создать свой блок на React, который выводит результат шорткода.

В плагине можно зарегистрировать блок с помощью функции register_block_type и в PHP-шаблоне вызвать do_shortcode с вашим шорткодом.

function wpreg_register_block() {
    register_block_type('wpreg/custom-shortcode-block', array(
        'render_callback' => 'wpreg_render_custom_shortcode_block',
    ));
}
add_action('init', 'wpreg_register_block');

function wpreg_render_custom_shortcode_block($attributes) {
    return do_shortcode('[wpreg_recent_posts count="5"]');
}

Такой подход позволяет легко внедрять динамический контент в редактор и использовать шорткоды как часть современного интерфейса.

Заключение: советы по разработке шорткодов для WordPress

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

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