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

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

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

Шорткод – это короткий код, заключенный в квадратные скобки, например [wpexperts_recent_posts]. При отображении страницы WordPress заменяет этот код на определенный контент, который генерируется функцией, связанной с этим шорткодом.

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

• Вставлять динамический или сложный контент легко и быстро;
• Повысить удобство редактирования страниц для пользователей без технических навыков;
• Повысить гибкость и масштабируемость сайта.

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

Основы создания собственного шорткода WordPress

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

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

function wpexperts_hello_shortcode($atts) {
    $atts = shortcode_atts(array(
        'name' => 'Гость'
    ), $atts, 'wpexperts_hello');
    return 'Привет, ' . esc_html($atts['name']) . '!';
}
add_shortcode('wpexperts_hello', 'wpexperts_hello_shortcode');

Теперь, добавив в контент [wpexperts_hello name="Иван"], пользователь увидит: Привет, Иван!

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

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

function wpexperts_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5
    ), $atts, 'wpexperts_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('wpexperts_recent_posts', 'wpexperts_recent_posts_shortcode');

Вызов [wpexperts_recent_posts count="3"] выведет три последние записи с ссылками.

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

Иногда нужно, чтобы шорткод обрабатывал содержимое между открывающим и закрывающим тегами. Для этого функция шорткода принимает второй аргумент $content. Рассмотрим пример шорткода, который оборачивает содержимое в блок с классом:

function wpexperts_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => 'yellow'
    ), $atts, 'wpexperts_box');

    $color = esc_attr($atts['color']);
    $content = do_shortcode($content); // Обрабатываем вложенные шорткоды

    return '<div class="wpexperts-box" style="background-color:' . $color . ';">' . $content . '</div>';
}
add_shortcode('wpexperts_box', 'wpexperts_box_shortcode');

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

[wpexperts_box color="lightblue"]Текст внутри цветного блока.[/wpexperts_box]

Вывод:

<div class="wpexperts-box" style="background-color:lightblue;">Текст внутри цветного блока.</div>

Рекомендации по безопасности и производительности шорткодов

При создании шорткодов важно учитывать несколько моментов:

• Всегда фильтруйте и экранируйте входящие данные (атрибуты) с помощью функций esc_html, esc_attr и подобных.
• Используйте wp_reset_postdata() после запроса к базе, чтобы не нарушать глобальный цикл WordPress.
• Избегайте тяжелых запросов внутри шорткода, чтобы не замедлять загрузку страниц.
• Если шорткод используется часто, рассмотрите возможность кеширования результата.

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

Чтобы использовать шорткод в виджете "Текст", просто вставьте шорткод в текстовое поле. WordPress сам обработает его.

Если нужно вывести шорткод напрямую в PHP-коде темы, например в файле single.php, используйте функцию do_shortcode():

echo do_shortcode('[wpexperts_recent_posts count="3"]');

Подведение итогов: что вы получили

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

Практикуйтесь, создавайте свои шорткоды под задачи проекта и делайте сайты на WordPress еще мощнее и удобнее.