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

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

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

Шорткоды — это специальные метки в квадратных скобках, например [shortcode], которые WordPress преобразует в определенный HTML или PHP код при отображении страницы. Они позволяют:

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

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

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

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

function wpmail_greeting_shortcode($atts) {
    $atts = shortcode_atts(array(
        'name' => 'Гость',
    ), $atts, 'wpmail_greeting');

    return '<p>Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на наш сайт.</p>';
}
add_shortcode('wpmail_greeting', 'wpmail_greeting_shortcode');

Теперь в любой записи или странице можно написать [wpmail_greeting name="Иван"], и выведется: Привет, Иван! Добро пожаловать на наш сайт.

Разбор кода

Функция wpmail_greeting_shortcode принимает массив атрибутов $atts, задает значение по умолчанию через shortcode_atts() и возвращает безопасный HTML с помощью esc_html(). Затем шорткод регистрируется под именем wpmail_greeting.

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

1. Вывод последних записей блога

Шорткод для вывода списка последних публикаций с заголовками и ссылками.

function wpmail_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
    ), $atts, 'wpmail_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('wpmail_recent_posts', 'wpmail_recent_posts_shortcode');

Использование: [wpmail_recent_posts count="3"] — выведет 3 последние статьи.

2. Кнопка с настраиваемым текстом и ссылкой

Этот шорткод создаст кнопку с заданным текстом и URL.

function wpmail_button_shortcode($atts) {
    $atts = shortcode_atts(array(
        'url' => '#',
        'text' => 'Нажми меня',
        'class' => 'wpmail-button',
    ), $atts, 'wpmail_button');

    return '<a href="' . esc_url($atts['url']) . '" class="' . esc_attr($atts['class']) . '">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpmail_button', 'wpmail_button_shortcode');

Добавьте CSS для класса wpmail-button в вашу тему, чтобы стилизовать кнопку.

Советы по разработке сложных шорткодов

Обработка вложенного контента

Если шорткод должен обрабатывать контент между открывающим и закрывающим тегами, используйте второй параметр функции — $content. Например:

function wpmail_box_shortcode($atts, $content = null) {
    return '<div class="wpmail-box">' . do_shortcode($content) . '</div>';
}
add_shortcode('wpmail_box', 'wpmail_box_shortcode');

Вызов: [wpmail_box]Текст внутри коробки[/wpmail_box].

Безопасность и очистка данных

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

Поддержка атрибутов и значений по умолчанию

Используйте shortcode_atts() для обработки атрибутов и установки значений по умолчанию, чтобы шорткод был гибким и удобным в использовании.

Как подключить шорткод в функции темы или плагина

Лучшее место для размещения кода шорткодов — файл functions.php вашей дочерней темы или собственный плагин. Это обеспечит сохранность кода при обновлениях и позволит легко управлять функционалом.

Пример создания плагина для шорткодов:

/*
Plugin Name: WP Mail Shortcodes
Description: Собственные шорткоды для сайта WP Mail.
Version: 1.0
Author: Ваше Имя
*/

// Код шорткодов здесь

Заключение

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