Создать собственный shortcode WordPress: подробное руководство

Shortcode — это удобный способ добавить динамический контент в записи и страницы WordPress без необходимости писать сложный код каждый раз. Они выглядят как короткие метки в квадратных скобках, например [gallery], и WordPress автоматически заменяет их на нужный HTML или другой вывод. В этой статье мы подробно разберем, как создать собственный shortcode в WordPress, чтобы расширить функциональность вашего сайта на wpcontent.ru.

Что такое shortcode в WordPress и зачем их создавать

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

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

Преимущества собственных shortcode:

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

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

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

Рассмотрим простой пример. Допустим, нам нужен шорткод, который выводит текущий год. Добавьте следующий код в файл functions.php вашей темы или в собственный плагин:

function wpcontent_current_year_shortcode() {
    return date('Y');
}
add_shortcode('current_year', 'wpcontent_current_year_shortcode');

Теперь в любом месте записи или страницы вы можете написать [current_year], и он автоматически заменится на текущий год, например, 2024.

Передача параметров в shortcode

Shortcode поддерживают атрибуты, которые передаются в функцию-обработчик как массив. Это позволяет делать shortcode динамичными.

Пример: создадим shortcode, который выводит кнопку с настраиваемым текстом и ссылкой:

function wpcontent_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#'
        ), $atts, 'wp_button'
    );

    return '<a href="' . esc_url($atts['url']) . '" class="wpcontent-button">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wp_button', 'wpcontent_button_shortcode');

Использование: [wp_button text="Перейти" url="https://wpcontent.ru"]

Этот код создаст ссылку-кнопку с заданным текстом и адресом. Также не забудьте добавить CSS для класса wpcontent-button в вашей теме для стилизации.

Создание сложных shortcode с HTML и логикой

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

Например, сделаем shortcode, который выводит список последних 5 публикаций с ссылками:

function wpcontent_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5
    ), $atts, 'latest_posts');

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

    if (!$query->have_posts()) {
        return '<p>Публикаций не найдено.</p>';
    }

    $output = '<ul class="wpcontent-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('latest_posts', 'wpcontent_latest_posts_shortcode');

Использование: [latest_posts count="3"] выведет 3 последних поста с ссылками.

Оптимизация и безопасность shortcode

При создании shortcode важно:

• Использовать esc_html(), esc_url() и другие функции экранирования для защиты от XSS.
• Не использовать напрямую echo — shortcode должны возвращать строку.
• При работе с пользовательским вводом применять фильтры и валидацию.
• По возможности использовать shortcode_atts() для установки значений по умолчанию.

Подключение стилей и скриптов для shortcode

Если ваш shortcode содержит сложную верстку, JavaScript или стили, необходимо правильно подключать их, чтобы не грузить лишнее на все страницы.

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

Пример подключения стилей для shortcode кнопки:

function wpcontent_enqueue_shortcode_assets() {
    if (is_singular() && has_shortcode(get_post()->post_content, 'wp_button')) {
        wp_enqueue_style('wpcontent-button-style', get_template_directory_uri() . '/css/wpcontent-button.css');
    }
}
add_action('wp_enqueue_scripts', 'wpcontent_enqueue_shortcode_assets');

Создание плагина с shortcode

Для удобства и переиспользуемости лучше создавать shortcode в виде отдельного плагина. Создайте папку и файл, например wpcontent-shortcodes/wpcontent-shortcodes.php с заголовком плагина и добавьте туда код ваших shortcode. Это позволит управлять ими независимо от темы.

Примеры полезных shortcode для WordPress

Для вдохновения приведем несколько идей, которые можно реализовать через shortcode:

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

Реализация каждого из них потребует своей логики, но принцип создания остается тем же — функция-обработчик и регистрация через add_shortcode.

Пример: shortcode с аккордеоном

Ниже простой пример вывода аккордеона с помощью HTML и CSS внутри shortcode:

function wpcontent_accordion_shortcode($atts, $content = null) {
    return '<div class="wpcontent-accordion"><h3 class="title">'. esc_html($atts['title']) .'</h3><div class="content">' . do_shortcode($content) . '</div></div>';
}
add_shortcode('accordion', 'wpcontent_accordion_shortcode');

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

[accordion title="Заголовок"]Текст внутри аккордеона[/accordion]

Затем добавьте стили и JavaScript для открытия/закрытия аккордеона в вашем CSS/JS файлах.