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

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

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

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

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

Создание простого шорткода в WordPress

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

function wpstart_hello_shortcode() {
    return 'Привет! Это мой первый шорткод.';
}
add_shortcode('hello', 'wpstart_hello_shortcode');

Теперь вы можете использовать шорткод [hello] в любом посте или странице, и WordPress заменит его на текст «Привет! Это мой первый шорткод.».

Этот пример демонстрирует базовый принцип: функция возвращает строку, а шорткод регистрируется через add_shortcode.

Шорткод с параметрами: как принимать аргументы

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

function wpstart_greet_shortcode($atts) {
    $atts = shortcode_atts(
        array('name' => 'Гость'),
        $atts,
        'greet'
    );
    return 'Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на сайт.';
}
add_shortcode('greet', 'wpstart_greet_shortcode');

Использование: [greet name="Алексей"] выведет «Привет, Алексей! Добро пожаловать на сайт.» Если параметр не передан, будет использовано значение по умолчанию — «Гость».

Функция shortcode_atts помогает задать значения параметров по умолчанию и объединить их с теми, что передал пользователь. Обязательно используйте esc_html для защиты от XSS-атак.

Пример сложного шорткода: вывод списка последних постов

Рассмотрим пример шорткода, который выведет список последних N записей с возможностью указать число постов и категорию.

function wpstart_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
        'category' => ''
    ), $atts, 'recent_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="wpstart-recent-posts">';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<li><a href="' . esc_url(get_permalink()) . '">' . esc_html(get_the_title()) . '</a></li>';
    }
    wp_reset_postdata();
    $output .= '</ul>';

    return $output;
}
add_shortcode('recent_posts', 'wpstart_recent_posts_shortcode');

Использование:

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

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

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

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

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

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

Подключение скриптов только при использовании шорткода

Пример для подключения CSS:

function wpstart_enqueue_shortcode_assets() {
    wp_enqueue_style('wpstart-shortcode-style', get_template_directory_uri() . '/css/wpstart-shortcode.css');
}

function wpstart_conditional_shortcode_assets($content) {
    if (has_shortcode($content, 'recent_posts')) {
        add_action('wp_enqueue_scripts', 'wpstart_enqueue_shortcode_assets');
    }
    return $content;
}
add_filter('the_content', 'wpstart_conditional_shortcode_assets');

Таким образом стили подключатся только если в контенте есть шорткод [recent_posts].