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

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

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

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

В этой статье мы подробно рассмотрим, как создать собственный шорткод с помощью PHP, а также как сделать его максимально гибким и полезным.

Основы создания шорткода в WordPress

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

Общий синтаксис следующий:

add_shortcode('имя_шорткода', 'функция_обработчик_шорткода');

Функция обработчик может принимать атрибуты и содержимое между тегами шорткода.

Рассмотрим простой пример, который выводит текущую дату на сайт.

function wpfront_current_date_shortcode($atts) {
    return date('d.m.Y');
}
add_shortcode('wpfront_current_date', 'wpfront_current_date_shortcode');

Теперь в редакторе можно написать [wpfront_current_date], и на сайте отобразится текущая дата.

Создание шорткода с атрибутами и содержимым

Часто шорткодам нужны параметры для настройки вывода. Атрибуты передаются в виде массива, а содержимое — как отдельный параметр.

Рассмотрим пример шорткода, который выводит приветствие с именем и опционально с сообщением внутри.

function wpfront_greeting_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            'name' => 'Гость',
        ), $atts, 'wpfront_greeting'
    );

    $output = '<div class="wpfront-greeting">';
    $output .= 'Привет, ' . esc_html($atts['name']) . '!';
    if ($content) {
        $output .= '<p>' . esc_html($content) . '</p>';
    }
    $output .= '</div>';

    return $output;
}
add_shortcode('wpfront_greeting', 'wpfront_greeting_shortcode');

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

• [wpfront_greeting name="Алексей"] — выведет «Привет, Алексей!»
• [wpfront_greeting name="Ирина"]Добро пожаловать на сайт![/wpfront_greeting] — выведет приветствие с дополнительным текстом.

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

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

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

Этот шорткод выведет список последних постов из заданной категории с ссылками.

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

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

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

    $query = new WP_Query($query_args);
    if (!$query->have_posts()) {
        return 'Посты не найдены';
    }

    $output = '<ul class="wpfront-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('wpfront_latest_posts', 'wpfront_latest_posts_shortcode');

Пример использования: [wpfront_latest_posts category="novosti" count="3"]

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

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

function wpfront_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#',
            'color' => '#0073aa',
        ), $atts, 'wpfront_button'
    );

    $color = esc_attr($atts['color']);
    $text = esc_html($atts['text']);
    $url = esc_url($atts['url']);

    return '<a href="' . $url . '" class="wpfront-button" style="background-color:' . $color . '; color: #fff; padding: 10px 20px; text-decoration: none; border-radius: 4px; display: inline-block;">' . $text . '</a>';
}
add_shortcode('wpfront_button', 'wpfront_button_shortcode');

Пример использования: [wpfront_button text="Купить" url="https://example.com" color="#e74c3c"]

Полезные плагины для расширения функционала шорткодов

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

• Shortcodes Ultimate — один из самых популярных плагинов с большим набором шорткодов и возможностью создавать свои.
• WP Shortcode by MyThemeShop — простой и легкий плагин с базовыми элементами и настройками.
• Custom Content Shortcode — для создания сложных шорткодов с PHP кодом напрямую через админку.

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

Оптимизация и безопасность шорткодов

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

• Обязательно используйте функции esc_html(), esc_attr() и esc_url() для обработки входящих данных и вывода, чтобы избежать XSS-уязвимостей.
• Не выводите напрямую пользовательский ввод без проверки.
• Минимизируйте количество сложных запросов внутри шорткода, чтобы не замедлять загрузку страниц.
• Пишите код с префиксом, например wpfront_, чтобы избежать конфликтов с другими плагинами и темами.

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