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

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

Что такое шорткоды и зачем их создавать

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

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

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

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

Для создания собственного шорткода достаточно добавить функцию в файл functions.php вашей темы или создать небольшой плагин. Рассмотрим базовый пример.

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

    return '<a href="'.esc_url($atts['url']).'" style="background-color:'.esc_attr($atts['color']).'; padding:10px 20px; color:#fff; text-decoration:none; border-radius:4px;">'.esc_html($content).'</a>';
}
add_shortcode('wp2_button', 'wp2_create_button_shortcode');

В этом примере создан шорткод [wp2_button url="https://2wp.ru" color="red"]Кнопка[/wp2_button], который выводит стилизованную кнопку с заданной ссылкой и цветом. Атрибуты задаются через массив shortcode_atts, а содержимое — через параметр $content.

Разбор кода

Функция wp2_create_button_shortcode принимает два параметра: массив атрибутов и содержимое между тегами шорткода. Мы задаем значения по умолчанию, чтобы избежать ошибок, если атрибуты не переданы. Внутри функции формируем HTML-код ссылки с inline-стилями, применяем экранирование для безопасности и возвращаем результат.

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

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

function wp2_latest_posts_shortcode($atts) {
    $atts = shortcode_atts( array(
        'count' => 5,
        'category' => ''
    ), $atts, 'wp2_latest_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="wp2-latest-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('wp2_latest_posts', 'wp2_latest_posts_shortcode');

Шорткод [wp2_latest_posts count="3" category="novosti"] выведет 3 последних записи из категории «novosti». Если категория не указана, выводятся записи из всех категорий.

Объяснение

Мы используем класс WP_Query для выборки записей с учетом параметров. В цикле формируем список с ссылками на записи. Обязательно вызываем wp_reset_postdata() после цикла, чтобы не ломать глобальные переменные WordPress.

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

Безопасность и экранирование

Всегда используйте функции экранирования, такие как esc_html(), esc_url() и esc_attr(), чтобы предотвратить XSS-атаки через пользовательские данные.

Кэширование результатов

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

function wp2_cached_latest_posts_shortcode($atts) {
    $cache_key = 'wp2_latest_posts_'.md5(serialize($atts));
    $cached = get_transient($cache_key);
    if($cached !== false) {
        return $cached;
    }

    // Код запроса и формирования вывода, как в предыдущем примере

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

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

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

add_filter('widget_text', 'do_shortcode');

В редакторе Gutenberg можно использовать блок «Короткий код» и вставлять туда ваш шорткод.

Итог

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

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