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

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

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

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

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

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

Создание шорткодов позволяет упростить работу редактора и повысить гибкость сайта.

Как создать простой шорткод в WordPress

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

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

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

Вызов шорткода в редакторе: [wpeasy_greeting name="Алексей"] выведет Привет, Алексей! Добро пожаловать на wpeasy.ru.

Обратите внимание на использование функции shortcode_atts для обработки атрибутов и esc_html для безопасности вывода.

Передача атрибутов и вложенного контента в шорткод

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

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

function wpeasy_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => '#f0f0f0',
        'padding' => '10px',
    ), $atts, 'wpeasy_box');

    $style = 'background-color:' . esc_attr($atts['color']) . '; padding:' . esc_attr($atts['padding']) . '; border-radius:5px;';

    return '<div style="' . $style . '">' . do_shortcode($content) . '</div>';
}
add_shortcode('wpeasy_box', 'wpeasy_box_shortcode');

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

[wpeasy_box color="#dff0d8" padding="20px"]Это содержимое будет внутри цветного блока.[/wpeasy_box]

Этот подход позволяет создавать сложные визуальные компоненты с минимальными знаниями HTML для контент-менеджеров.

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

1. Вывод последних публикаций

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

function wpeasy_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
        'category' => '',
    ), $atts, 'wpeasy_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('wpeasy_latest_posts', 'wpeasy_latest_posts_shortcode');

Пример вызова: [wpeasy_latest_posts count="3" category="novosti"] — выведет 3 последних поста из категории «новости».

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

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

function wpeasy_button_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'url' => '#',
        'bgcolor' => '#0073aa',
        'color' => '#ffffff',
        'target' => '_self'
    ), $atts, 'wpeasy_button');

    $style = 'background-color:' . esc_attr($atts['bgcolor']) . '; color:' . esc_attr($atts['color']) . '; padding:10px 20px; text-decoration:none; border-radius:3px; display:inline-block;';

    return '<a href="' . esc_url($atts['url']) . '" target="' . esc_attr($atts['target']) . '" style="' . $style . '">' . do_shortcode($content) . '</a>';
}
add_shortcode('wpeasy_button', 'wpeasy_button_shortcode');

Использование: [wpeasy_button url="https://wpeasy.ru" bgcolor="#28a745" color="#fff"]Перейти на сайт[/wpeasy_button]

Как зарегистрировать шорткод в отдельном плагине

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

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

<?php
/**
 * Plugin Name: WP Easy Shortcodes
 * Description: Набор пользовательских шорткодов для сайта wpeasy.ru
 * Version: 1.0
 * Author: WPEasy
 */

// Вставьте сюда код шорткодов, например, wpeasy_greeting_shortcode

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

// Добавьте другие шорткоды по аналогии
?>

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

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

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

• Экранирование вывода: Используйте функции esc_html, esc_attr, esc_url для защиты от XSS-атак.
• Валидация атрибутов: Проверяйте и приводите к нужному типу входящие параметры.
• Минимизация запросов к базе: Старайтесь кешировать результаты, особенно если шорткод делает сложные запросы.
• Использование do_shortcode внутри шорткода: Позволяет обрабатывать вложенные шорткоды, делая функционал гибче.

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