Создание своего shortcode в WordPress: практическое руководство

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

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

Shortcode — это простой макрос, который подставляется в текст записи и преобразуется движком WordPress в определенный HTML или функциональность. Благодаря shortcode можно без знаний программирования вставлять галереи, формы, кнопки, списки и даже сложные элементы.

Например, стандартный shortcode WordPress — [gallery] — выводит галерею изображений. Но если стандартных решений недостаточно, можно создать свои собственные shortcode.

Преимущества создания собственного shortcode:

• Упрощение вставки повторяющегося кода;
• Централизованное управление функционалом;
• Гибкость и расширяемость;
• Возможность добавлять параметры для настройки вывода.

Теперь перейдем к практике.

Как создать простой shortcode в WordPress: пошагово

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

Пример простого shortcode, который выводит приветствие:

function wpload_short_greeting() {
    return 'Привет, это мой первый shortcode на wpload.ru!';
}
add_shortcode('wpload_greeting', 'wpload_short_greeting');

Этот код можно добавить в файл functions.php вашей темы или в собственный плагин.

Теперь в любом месте записи или страницы, если вписать [wpload_greeting], отобразится текст приветствия.

Особенности создания shortcode:

• Функция должна возвращать строку, а не выводить ее напрямую.
• Имя shortcode должно быть уникальным, чтобы не конфликтовать с другими.
• Рекомендуется использовать префиксы в названиях функций, например, wpload_, чтобы избежать конфликтов.

Добавляем параметры в shortcode: как передавать данные

Часто нужно, чтобы shortcode был гибким и мог принимать параметры, например, цвет текста, количество элементов и т.д.

Для этого функция обратного вызова принимает два параметра: массив атрибутов и содержимое между тегами (если используется парный shortcode).

Пример shortcode с параметром color:

function wpload_short_colored_text($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            'color' => 'black',
        ), $atts, 'wpload_colored_text');

    return '<span style="color:' . esc_attr($atts['color']) . '">' . do_shortcode($content) . '</span>';
}
add_shortcode('wpload_colored_text', 'wpload_short_colored_text');

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

[wpload_colored_text color="red"]Красный текст[/wpload_colored_text]

В результате выведется красный текст внутри span.

Объяснение кода:

• shortcode_atts задает значения по умолчанию для параметров и объединяет их с переданными;
• esc_attr защищает от XSS уязвимостей;
• do_shortcode позволяет обрабатывать вложенные шорткоды внутри содержимого.

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

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

function wpload_short_recent_posts($atts) {
    $atts = shortcode_atts(
        array(
            'count' => 5,
            'category' => '',
        ), $atts, 'wpload_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>';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<li><a href="' . esc_url(get_permalink()) . '">' . esc_html(get_the_title()) . '</a></li>';
    }
    wp_reset_postdata();
    $output .= '</ul>';

    return $output;
}
add_shortcode('wpload_recent_posts', 'wpload_short_recent_posts');

Использование:

[wpload_recent_posts count="3" category="wordpress"]

Выведет список из 3 последних записей категории "wordpress".

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

При создании shortcode важно соблюдать проверку и очистку входящих данных, чтобы избежать уязвимостей. Всегда используйте функции esc_html, esc_attr, sanitize_text_field и т.п.

Также не забывайте сбрасывать глобальные переменные после выполнения запросов, используя wp_reset_postdata().

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

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

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

• Shortcodes Ultimate — большой набор готовых шорткодов и удобный конструктор;
• WP Shortcode — простой и легкий плагин с базовыми элементами;
• Custom Content Shortcode — для создания кастомных шорткодов через админку.

Эти плагины экономят время и позволяют создавать мощные функциональные элементы без программирования.

Заключение: как использовать shortcode для решения практических задач

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

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

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