Как создать и использовать shortcode в WordPress

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

Что такое shortcode и зачем он нужен

Shortcode — это сокращённый тег, который WordPress заменяет на определённый контент или функционал при выводе страницы. Это позволяет пользователям без знаний PHP легко добавлять сложные элементы в контент: формы, таблицы, галереи, кнопки и многое другое.

Например, стандартный шорткод [gallery] выводит галерею изображений. Но что если вам нужно что-то уникальное? Тогда на помощь приходят кастомные шорткоды, которые можно написать самостоятельно.

Использование shortcode значительно упрощает редактирование контента, позволяет переиспользовать блоки кода и делает сайт более гибким.

Как создать свой shortcode в WordPress

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

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

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

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

Теперь в редакторе WordPress можно написать [wpmentor_greeting name="Иван"] и на странице отобразится: Привет, Иван! Добро пожаловать на wpmentor.ru.

Функция shortcode_atts позволяет задавать значения по умолчанию для параметров шорткода, что облегчает работу с атрибутами.

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

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

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

function wpmentor_shortcode_box($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => '#f0f0f0',
    ), $atts, 'wpmentor_box');

    return '<div style="background-color:' . esc_attr($atts['color']) . '; padding: 15px; border-radius: 5px;">' . do_shortcode($content) . '</div>';
}
add_shortcode('wpmentor_box', 'wpmentor_shortcode_box');

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

[wpmentor_box color="#d0eaff"]Это важное сообщение для пользователей.[/wpmentor_box]

Вывод будет обёрнут в блок с заданным цветом фона, при этом внутри можно использовать вложенные шорткоды, благодаря вызову do_shortcode($content).

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

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

function wpmentor_shortcode_latest_posts($atts) {
    $atts = shortcode_atts(array(
        'count' => 3,
        'category' => '',
    ), $atts, 'wpmentor_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 class="wpmentor-latest-posts">';
    while ($query->have_posts()) {
        $query->the_post();
        $thumb = has_post_thumbnail() ? get_the_post_thumbnail(get_the_ID(), 'thumbnail') : '';
        $output .= '<li>' . $thumb . '<a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    wp_reset_postdata();
    $output .= '</ul>';

    return $output;
}
add_shortcode('wpmentor_latest_posts', 'wpmentor_shortcode_latest_posts');

Пример использования:

[wpmentor_latest_posts count="5" category="novosti"]

Этот шорткод выведет 5 последних записей из категории «новости» с миниатюрами и заголовками, что удобно для размещения блока новостей на любой странице.

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

Очень важно при создании шорткодов правильно обрабатывать входящие данные и вывод. Все значения, получаемые из атрибутов, необходимо очищать с помощью функций esc_html, esc_attr или аналогичных. Это предотвращает XSS-уязвимости.

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

Если ваш шорткод выводит HTML, старайтесь использовать функции WordPress для формирования элементов (например, get_the_post_thumbnail) — это повысит совместимость с темами и плагинами.

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

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

Минимальный пример плагина с шорткодом:

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

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

Активируйте плагин через админку WordPress, и шорткод станет доступен.

Выводы и рекомендации по работе с shortcode в WordPress

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

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

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