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

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

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

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

• Добавлять уникальные элементы на страницы и в записи.
• Упрощать работу контент-менеджерам, не требуя от них знаний программирования.
• Повысить гибкость сайта, интегрируя нестандартные функции.

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

Регистрация простого shortcode: пример от wpcompany

Начнём с базового примера — создадим shortcode, который выводит приветствие с именем пользователя. Код добавьте в файл functions.php вашей темы или в свой плагин.

function wpcompany_hello_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'name' => 'Гость',
    ), $atts, 'wpcompany_hello' );
    return '<p>Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на наш сайт.</p>';
}
add_shortcode( 'wpcompany_hello', 'wpcompany_hello_shortcode' );

Теперь в редакторе WordPress вы можете вставить [wpcompany_hello name="Иван"], и он выведет «Привет, Иван! Добро пожаловать на наш сайт.»

Создание shortcode с параметрами и логикой

Часто нужно не просто вывести текст, а выполнить какую-то логику, например, выводить последние записи определённой категории или показывать кастомный блок с кнопкой.

Рассмотрим пример shortcode, который выводит список последних записей из категории. Мы добавим параметры для количества записей и категории.

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

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

    if ( $atts['category'] ) {
        $query_args['category_name'] = sanitize_text_field($atts['category']);
    }

    $query = new WP_Query( $query_args );

    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( 'wpcompany_recent_posts', 'wpcompany_recent_posts_shortcode' );

Пример использования в редакторе: [wpcompany_recent_posts count="3" category="novosti"] выведет 3 последние записи из категории "новости".

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

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

• Очистка входных данных. Всегда используйте функции sanitize_text_field, intval и другие для обработки параметров.
• Экранирование вывода. Используйте esc_html, esc_url и подобные функции, чтобы избежать XSS-уязвимостей.
• Оптимизация запросов. Избегайте тяжелых запросов без необходимости, кешируйте результаты, если нужно.
• Не выводите напрямую, а возвращайте результат. Функции для shortcode должны возвращать HTML, а не выводить его напрямую.

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

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

• Shortcodes Ultimate. Набор из более 50 готовых shortcode: кнопки, вкладки, галереи, иконки и пр.
• WP Shortcode by MyThemeShop. Ещё один удобный набор для вставки элементов без программирования.
• Custom Shortcodes. Позволяет создавать и управлять своими shortcode через админку, без правки кода.

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

Расширенные примеры: вложенные shortcode и атрибуты массивы

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

Пример вложенного shortcode для вывода аккордеона:

function wpcompany_accordion_shortcode( $atts, $content = null ) {
    $content = do_shortcode($content);
    return '<div class="wpcompany-accordion">' . $content . '</div>';
}
add_shortcode( 'wpcompany_accordion', 'wpcompany_accordion_shortcode' );

function wpcompany_accordion_item_shortcode( $atts, $content = null ) {
    $atts = shortcode_atts( array(
        'title' => 'Заголовок',
    ), $atts, 'wpcompany_accordion_item' );

    return '<div class="accordion-item"><h3>' . esc_html($atts['title']) . '</h3><div class="content">' . do_shortcode($content) . '</div></div>';
}
add_shortcode( 'wpcompany_accordion_item', 'wpcompany_accordion_item_shortcode' );

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

[wpcompany_accordion]
[wpcompany_accordion_item title="Первый пункт"]Содержимое первого пункта[/wpcompany_accordion_item]
[wpcompany_accordion_item title="Второй пункт"]Содержимое второго пункта[/wpcompany_accordion_item]
[/wpcompany_accordion]

Такой подход позволяет создавать сложные интерактивные элементы без написания большого объёма фронтенд-кода.

Вывод

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