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

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

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

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

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

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

Теперь перейдем к практической части — созданию собственного шорткода.

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

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

Пример самой простой функции шорткода, которая выводит текст «Привет, мир!»:

function wpset_hello_shortcode() {
    return 'Привет, мир!';
}
add_shortcode('hello', 'wpset_hello_shortcode');

Теперь в любом месте записи или страницы можно вставить [hello], и на сайте появится надпись «Привет, мир!». Обратите внимание, что функция возвращает значение, а не выводит его напрямую — это важно, чтобы шорткод корректно обрабатывался.

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

Шорткод может принимать параметры, которые передаются через атрибуты. Например, добавим в функцию параметр name, чтобы персонализировать приветствие:

function wpset_hello_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'name' => 'гость',
        ),
        $atts,
        'hello'
    );
    return 'Привет, ' . esc_html($atts['name']) . '!';
}
add_shortcode('hello', 'wpset_hello_shortcode');

Теперь вызов [hello name="Алексей"] выведет «Привет, Алексей!». Использование shortcode_atts() гарантирует, что функция корректно обработает параметры и задаст значения по умолчанию.

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

1. Шорткод для вывода текущей даты

Иногда нужно выводить на сайте актуальную дату, например, для заметок или объявлений. Создадим шорткод [wpset_date], который покажет сегодняшнюю дату в формате «день.месяц.год».

function wpset_date_shortcode() {
    return date_i18n('d.m.Y');
}
add_shortcode('wpset_date', 'wpset_date_shortcode');

Функция date_i18n() учитывает локализацию WordPress и выводит дату в соответствии с настройками сайта.

2. Шорткод для создания кнопки с ссылкой

Добавим шорткод [wpset_button url="https://example.com" text="Перейти"], который выведет стилизованную кнопку.

function wpset_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'url' => '#',
            'text' => 'Кнопка',
        ),
        $atts,
        'wpset_button'
    );
    $url = esc_url($atts['url']);
    $text = esc_html($atts['text']);
    return '<a href="' . $url . '" class="wpset-button" style="display:inline-block;padding:10px 20px;background:#0073aa;color:#fff;text-decoration:none;border-radius:4px;">' . $text . '</a>';
}
add_shortcode('wpset_button', 'wpset_button_shortcode');

Кнопку можно стилизовать через встроенный стиль или добавить класс и прописать стили отдельно. Такой шорткод удобно использовать для CTA (призывов к действию).

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

Создадим шорткод [wpset_latest_posts count="5"], который покажет список последних записей с заголовками и ссылками.

function wpset_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
    ), $atts, 'wpset_latest_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="wpset-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('wpset_latest_posts', 'wpset_latest_posts_shortcode');

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

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

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

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

Рекомендуется придерживаться следующих правил:

• Функция шорткода должна возвращать значение, а не выводить его напрямую;
• Используйте shortcode_atts() для обработки параметров;
• Экранируйте все выводимые данные;
• Оптимизируйте запросы и используйте кэширование при необходимости;
• Документируйте свои шорткоды для удобства поддержки.

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

После добавления кода в functions.php или плагин, нужно проверить, что шорткод работает корректно. Для этого создайте новую запись или страницу и вставьте тег шорткода, например, [hello name="Иван"].

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

Кроме того, некоторые визуальные редакторы могут по-разному обрабатывать шорткоды — советуем тестировать их в редакторе WordPress и на фронтенде сайта.