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

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

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

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

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

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

• Вставки кастомного HTML или PHP-кода в записи и страницы;
• Автоматизации вывода данных из базы или API;
• Повторного использования сложных блоков контента;
• Создания удобных интерфейсов для пользователей без технических знаний.

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

Для создания шорткода нужно добавить функцию в файл functions.php вашей темы или в отдельный плагин. Далее зарегистрировать шорткод с помощью функции add_shortcode().

Пример простого шорткода, который выводит приветствие:

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

    return 'Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на wpmart.ru.';
}
add_shortcode('hello', 'wpmart_hello_shortcode');

Использование в записи: [hello] или [hello name="Иван"]. В результате выводится: «Привет, Иван! Добро пожаловать на wpmart.ru.»

Расширяем функциональность: шорткод с параметрами и вложенным контентом

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

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

function wpmart_highlight_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => 'yellow',
    ), $atts, 'highlight');

    return '<span style="background-color:' . esc_attr($atts['color']) . '">' . do_shortcode($content) . '</span>';
}
add_shortcode('highlight', 'wpmart_highlight_shortcode');

В записи используйте так: [highlight color="lightblue"]Важный текст[/highlight]. Это создаст выделение текста светло-голубым цветом.

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

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

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

function wpmart_button_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'url' => '#',
        'color' => 'blue',
        'target' => '_self',
    ), $atts, 'button');

    $color = esc_attr($atts['color']);
    $url = esc_url($atts['url']);
    $target = esc_attr($atts['target']);
    $text = $content ? do_shortcode($content) : 'Кнопка';

    return '<a href="' . $url . '" target="' . $target . '" class="wpmart-btn wpmart-btn-' . $color . '">' . $text . '</a>';
}
add_shortcode('button', 'wpmart_button_shortcode');

Добавьте стили в CSS темы:

.wpmart-btn { padding: 10px 20px; color: #fff; text-decoration: none; border-radius: 4px; display: inline-block; }
.wpmart-btn-blue { background-color: #0073aa; }
.wpmart-btn-red { background-color: #d54e21; }
.wpmart-btn-green { background-color: #46b450; }

Используйте: [button url="https://wpmart.ru" color="green" target="_blank"]Посетить WPmart[/button]

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

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

function wpmart_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
    ), $atts, '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 class="wpmart-recent-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('recent_posts', 'wpmart_recent_posts_shortcode');

Вставьте [recent_posts count="3"], чтобы показать 3 последних записи.

Как безопасно работать с шорткодами: рекомендации

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

• Используйте esc_html(), esc_attr(), esc_url() для экранирования вывода.
• Не выводите необработанный пользовательский ввод.
• Если используете вложенный контент, применяйте do_shortcode() и wp_kses_post() для фильтрации HTML.
• Тестируйте шорткоды на конфликт с плагинами и темой.

Пример создания плагина для шорткода на WPmart.ru

Если хотите вынести шорткод в плагин, создайте файл wpmart-shortcodes.php в папке wp-content/plugins и добавьте в него:

<?php
/**
 * Plugin Name: WPmart Shortcodes
 * Description: Набор полезных шорткодов для сайта WPmart.ru
 * Version: 1.0
 * Author: WPmart
 */

// Здесь вставьте функции шорткодов, описанные выше

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

Заключение

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