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

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

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

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

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

Пример простого шорткода — кнопка с кастомным текстом, которую можно добавлять в любую запись.

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

Регистрация шорткода в functions.php или в плагине

Чтобы создать свой шорткод, нужно использовать функцию add_shortcode(). Например, давайте зарегистрируем шорткод [wpcorp_button], который выводит HTML-кнопку с настраиваемым текстом и ссылкой.

function wpcorp_button_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'text' => 'Нажми меня',
        'url' => '#'
    ), $atts, 'wpcorp_button' );

    return '<a href="'.esc_url($atts['url']).'" class="wpcorp-btn">'.esc_html($atts['text']).'</a>';
}
add_shortcode( 'wpcorp_button', 'wpcorp_button_shortcode' );

Этот код можно добавить в файл functions.php вашей темы или в собственный плагин. Теперь в любом месте сайта можно вставить [wpcorp_button text="Перейти" url="https://wpcorp.ru"], и отобразится кнопка.

Добавление стилей для шорткода

Чтобы кнопка выглядела красиво, добавим CSS. Рекомендуется подключать стили через хук wp_enqueue_scripts:

function wpcorp_enqueue_styles() {
    wp_enqueue_style( 'wpcorp-shortcodes', get_stylesheet_directory_uri() . '/css/wpcorp-shortcodes.css' );
}
add_action( 'wp_enqueue_scripts', 'wpcorp_enqueue_styles' );

В файле wpcorp-shortcodes.css можно прописать стили для класса .wpcorp-btn:

.wpcorp-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.wpcorp-btn:hover {
    background-color: #005177;
}

Примеры полезных шорткодов и их применение

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

Часто необходимо показывать в статье или на странице последние записи блога. Создадим шорткод [wpcorp_latest_posts], который выведет список из 5 последних постов с заголовками и ссылками.

function wpcorp_latest_posts_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'count' => 5
    ), $atts, 'wpcorp_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="wpcorp-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( 'wpcorp_latest_posts', 'wpcorp_latest_posts_shortcode' );

Такой шорткод можно вставить в любую страницу или запись, указав количество постов, например: [wpcorp_latest_posts count="3"].

Шорткод с формой обратной связи

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

Пример базового шорткода с HTML-формой:

function wpcorp_contact_form_shortcode() {
    if ( isset($_POST['wpcorp_contact_submit']) ) {
        $name = sanitize_text_field( $_POST['wpcorp_name'] );
        $email = sanitize_email( $_POST['wpcorp_email'] );
        $message = sanitize_textarea_field( $_POST['wpcorp_message'] );

        // Здесь можно добавить логику отправки письма или сохранения в базу

        return '<p>Спасибо, '.esc_html($name).'! Ваше сообщение отправлено.</p>';
    }

    $form = '<form method="post" class="wpcorp-contact-form">'
        .'<p><label>Имя:</label>'
        .'<input type="text" name="wpcorp_name" required /></p>'
        .'<p><label>Email:</label>'
        .'<input type="email" name="wpcorp_email" required /></p>'
        .'<p><label>Сообщение:</label>'
        .'<textarea name="wpcorp_message" required></textarea></p>'
        .'<p><input type="submit" name="wpcorp_contact_submit" value="Отправить" /></p>'
        .'</form>';

    return $form;
}
add_shortcode( 'wpcorp_contact_form', 'wpcorp_contact_form_shortcode' );

Такой подход подходит для простых форм, но для сложных рекомендуем использовать специализированные плагины, например Contact Form 7 или Gravity Forms.

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

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

• Обязательно используйте функции очистки данных, такие как sanitize_text_field(), sanitize_email(), esc_html() и esc_url(), чтобы избежать XSS-атак.
• Не выводите необработанные данные пользователя напрямую.
• Для сложных операций используйте nonce-проверки и проверку прав доступа.

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

Использование готовых плагинов для расширения функционала шорткодов

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

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

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

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

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

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