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

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

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

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

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

Для разработчиков и администраторов сайтов это также способ сделать функционал более доступным для контент-менеджеров, которые могут вставлять элементы без участия программиста.

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

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

Рассмотрим базовый пример создания шорткода, который выводит приветственное сообщение:

function wpteam_hello_shortcode() {
    return '<p>Привет, это мой первый шорткод в WordPress!</p>';
}
add_shortcode('wpteam_hello', 'wpteam_hello_shortcode');

Теперь, если вставить в редактор WordPress [wpteam_hello], вы увидите на сайте текст «Привет, это мой первый шорткод в WordPress!».

Обратите внимание на префикс wpteam_ в названии функции — это хорошая практика для избежания конфликтов с другими плагинами или темами.

Передача параметров в шорткод

Шорткоды могут принимать атрибуты, которые позволяют менять поведение и вывод. Например, сделаем шорткод с настраиваемым текстом:

function wpteam_custom_text_shortcode($atts) {
    $a = shortcode_atts(array(
        'text' => 'Привет, WordPress!'
    ), $atts);
    return '<p>' . esc_html($a['text']) . '</p>';
}
add_shortcode('wpteam_text', 'wpteam_custom_text_shortcode');

Теперь можно использовать [wpteam_text text="Добро пожаловать на wpteam.ru!"] для вывода любого текста.

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

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

Допустим, нужно вывести последние N записей из определённой категории. Создадим шорткод с параметрами для количества и категории:

function wpteam_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
        'category' => ''
    ), $atts);
    
    $args = array(
        'posts_per_page' => intval($atts['count']),
        'category_name' => sanitize_text_field($atts['category']),
        'post_status' => 'publish'
    );
    
    $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('wpteam_latest_posts', 'wpteam_latest_posts_shortcode');

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

Шорткод для вставки кнопки с кастомным стилем и ссылкой

Часто нужно быстро вставить кнопку с определённым текстом и ссылкой. Сделаем универсальный шорткод:

function wpteam_button_shortcode($atts) {
    $atts = shortcode_atts(array(
        'url' => '#',
        'text' => 'Нажми меня',
        'color' => '#0073aa'
    ), $atts);
    
    $url = esc_url($atts['url']);
    $text = esc_html($atts['text']);
    $color = sanitize_hex_color($atts['color']);
    
    return '<a href="' . $url . '" style="display:inline-block;padding:10px 20px;background-color:' . $color . ';color:#fff;text-decoration:none;border-radius:3px;">' . $text . '</a>';
}
add_shortcode('wpteam_button', 'wpteam_button_shortcode');

Пример использования: [wpteam_button url="https://wpteam.ru" text="Посетить WPTeam" color="#ff6600"]

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

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

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

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

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

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

Пример минимального плагина wpteam-shortcodes.php:

<?php
/*
Plugin Name: WPTeam Shortcodes
Description: Собственные шорткоды для сайта wpteam.ru
Version: 1.0
Author: WPTeam
*/

// Вставьте сюда код шорткодов из примеров выше

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

Выводы и рекомендации

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

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

Пусть ваши шорткоды делают сайт wpteam.ru ещё удобнее и эффективнее!