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

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

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

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

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

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

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

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

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

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

В редакторе WordPress вы можете написать [hello name="Алексей"], и на странице отобразится Привет, Алексей!. Если параметр name не задан, будет использовано значение по умолчанию — «гость».

Параметры шорткодов и их обработка

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

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

function wpmoney_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'url' => '#',
            'text' => 'Нажми меня'
        ),
        $atts,
        'wpmoney_button'
    );
    return '<a href="' . esc_url($atts['url']) . '" class="wpmoney-button">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpmoney_button', 'wpmoney_button_shortcode');

Теперь в контенте можно использовать [wpmoney_button url="https://wpmoney.ru" text="Перейти на сайт"], и будет выведена кнопка с нужной ссылкой и текстом.

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

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

Пример шорткода, который выводит последние 5 постов из категории с ID 3:

function wpmoney_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(
        array('cat' => 3, 'count' => 5),
        $atts,
        'recent_posts'
    );

    $query = new WP_Query(array(
        'cat' => intval($atts['cat']),
        'posts_per_page' => intval($atts['count'])
    ));

    if (!$query->have_posts()) {
        return '<p>Посты не найдены.</p>';
    }

    $output = '<ul class="wpmoney-recent-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('wpmoney_recent_posts', 'wpmoney_recent_posts_shortcode');

Используйте в контенте [wpmoney_recent_posts cat="3" count="5"], чтобы вывести список постов.

Для стилизации можно добавить CSS в файл темы или плагина:

.wpmoney-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}
.wpmoney-button:hover {
    background-color: #005177;
}
.wpmoney-recent-posts {
    list-style: disc inside;
    margin: 1em 0;
}
.wpmoney-recent-posts li {
    margin-bottom: 0.5em;
}

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

Хотя создавать шорткоды руками просто, иногда удобнее использовать готовые решения. Вот несколько популярных плагинов:

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

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

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

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

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

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

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

Если вы планируете использовать шорткод на нескольких сайтах или хотите сохранить чистоту темы, лучше оформить шорткод в виде плагина. Создайте файл wpmoney-shortcodes.php в папке wp-content/plugins с таким содержимым:

<?php
/**
 * Plugin Name: WPMoney Shortcodes
 * Description: Собственные шорткоды для сайта WPMoney.ru
 * Version: 1.0
 * Author: Ваша Имя
 */

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

// Добавляйте сюда остальные шорткоды

После этого активируйте плагин в админке WordPress — и шорткод готов к работе.