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

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

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

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

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

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

• Удобство вставки сложного функционала без знания кода;
• Повторное использование одного и того же функционала в разных местах;
• Чистота и упорядоченность контента;
• Гибкость в настройке и расширении возможностей сайта.

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

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

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

function wpbloger_hello_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'name' => 'гость',
        ), $atts, 'hello');
    return 'Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на wp-bloger.ru';
}
add_shortcode('hello', 'wpbloger_hello_shortcode');

В редакторе WordPress вы сможете использовать этот шорткод так: [hello name="Иван"], и получите: Привет, Иван! Добро пожаловать на wp-bloger.ru

Разбор кода

Мы создаём функцию wpbloger_hello_shortcode, которая принимает параметры шорткода в массиве $atts. С помощью shortcode_atts устанавливаем значения по умолчанию. Затем возвращаем строку с приветствием, экранируя имя пользователя для безопасности.

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

Создание более сложного шорткода с параметрами и HTML-разметкой

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

function wpbloger_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'count' => 5,
        ), $atts, 'latest_posts');

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

    $query = new WP_Query($query_args);
    if (!$query->have_posts()) {
        return '<p>Публикации не найдены.</p>';
    }

    $output = '<ul class="wpbloger-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('latest_posts', 'wpbloger_latest_posts_shortcode');

Теперь в любом месте сайта можно вставить [latest_posts count="3"], чтобы вывести список из трех последних постов.

Разбор и советы

Используем класс WP_Query для выборки постов, что даёт гибкость в формировании запроса. Обязательно вызываем wp_reset_postdata() после цикла, чтобы не повлиять на основной запрос страницы.

Рекомендуется добавлять CSS-классы к выводимым элементам для удобной стилизации в вашей теме.

Как добавить стили и скрипты для шорткодов

Иногда для работы шорткода нужны собственные CSS или JS файлы. Чтобы правильно подключить их, используйте хуки WordPress.

Пример подключения стилей и скриптов, необходимых для наших шорткодов:

function wpbloger_enqueue_shortcode_assets() {
    // Подключаем CSS
    wp_enqueue_style('wpbloger-shortcode-style', get_template_directory_uri() . '/css/wpbloger-shortcode.css');

    // Подключаем JS
    wp_enqueue_script('wpbloger-shortcode-script', get_template_directory_uri() . '/js/wpbloger-shortcode.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'wpbloger_enqueue_shortcode_assets');

Обратите внимание, что пути нужно корректировать в зависимости от расположения файлов. Если вы разрабатываете плагин, используйте plugin_dir_url(__FILE__).

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

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

• Shortcodes Ultimate — набор из более 50 шорткодов с удобным визуальным редактором;
• WP Shortcode by MyThemeShop — лёгкий плагин с базовыми шорткодами для форматирования контента;
• Custom Content Shortcode — позволяет создавать шорткоды без программирования через интерфейс.

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

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

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

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

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