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

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

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

Шорткод — это специальный тег в квадратных скобках, например [wphow_shortcode], который WordPress заменяет на определённый контент или функциональность при выводе страницы. Это отличный способ внедрять повторяющиеся элементы, формы, галереи, таблицы и даже сложные интерактивные элементы без постоянного редактирования кода тем или плагинов.

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

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

Теперь перейдём к практике и создадим собственный шорткод.

Создание простого шорткода: пошаговая инструкция

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

function wphow_hello_shortcode() {
    return '<p>Привет от wphow.ru!</p>';
}
add_shortcode('wphow_hello', 'wphow_hello_shortcode');

Объяснение:

• Функция wphow_hello_shortcode возвращает HTML строку с текстом.
• Функция add_shortcode регистрирует шорткод с именем wphow_hello, который вызывает нашу функцию.

Теперь, если вы вставите [wphow_hello] в любой пост или страницу, на сайте отобразится сообщение "Привет от wphow.ru!"

Добавление атрибутов к шорткоду

Шорткоды могут принимать параметры, с помощью которых можно менять их поведение. Давайте добавим параметр name, чтобы приветствие было персонализированным.

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

    return '<p>Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на wphow.ru.</p>';
}
add_shortcode('wphow_hello', 'wphow_hello_shortcode');

Теперь вызов [wphow_hello name="Иван"] выведет "Привет, Иван! Добро пожаловать на wphow.ru."

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

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

function wphow_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'count' => 5,
            'category' => '',
        ), $atts, 'wphow_latest_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="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    wp_reset_postdata();
    $output .= '</ul>';

    return $output;
}
add_shortcode('wphow_latest_posts', 'wphow_latest_posts_shortcode');

Шорткод [wphow_latest_posts count=3 category="wordpress"] выведет три последние записи из категории «wordpress».

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

Обратите внимание, что мы используем функцию sanitize_text_field для очистки параметра категории и intval для параметра количества. Это предотвращает возможные уязвимости.

Также важно использовать wp_reset_postdata() после пользовательского запроса, чтобы не нарушить работу основного цикла WordPress.

Добавление кастомного CSS и JavaScript для шорткодов

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

function wphow_enqueue_shortcode_assets() {
    wp_enqueue_style('wphow_shortcode_styles', get_stylesheet_directory_uri() . '/css/wphow-shortcode.css');
    wp_enqueue_script('wphow_shortcode_scripts', get_stylesheet_directory_uri() . '/js/wphow-shortcode.js', array('jquery'), null, true);
}

function wphow_latest_posts_shortcode($atts) {
    wphow_enqueue_shortcode_assets();
    // остальной код шорткода
}

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

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

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

• Shortcoder — создаёт пользовательские шорткоды с HTML, JavaScript и PHP.
• WP Shortcode by MyThemeShop — набор готовых шорткодов с разнообразными функциями.
• Shortcodes Ultimate — большой набор визуальных шорткодов с настройками.

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

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

При создании шорткодов следуйте рекомендациям:

• Всегда используйте esc_html(), esc_url() и другие функции экранирования для безопасности.
• Обрабатывайте все входящие параметры через shortcode_atts с указанием значений по умолчанию.
• Избегайте лишних запросов к базе данных и правильно сбрасывайте данные после WP_Query.
• Подключайте стили и скрипты только при необходимости.
• Тестируйте шорткод в разных темах и с разными плагинами для совместимости.

Если шорткод не работает, включите WP_DEBUG в wp-config.php для поиска ошибок.