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

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

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

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

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

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

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

function wpabout_simple_shortcode() {
    return '<div>Это простой шорткод от wpabout.ru</div>';
}
add_shortcode('wpabout_simple', 'wpabout_simple_shortcode');

Теперь, если в любом месте записи или страницы вставить [wpabout_simple], WordPress подставит блок с текстом «Это простой шорткод от wpabout.ru».

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

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

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

Рассмотрим пример создания кнопки с настраиваемым текстом и цветом:

function wpabout_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'color' => '#0073aa',
            'url' => '#'
        ), $atts, 'wpabout_button'
    );

    $text = esc_html($atts['text']);
    $color = esc_attr($atts['color']);
    $url = esc_url($atts['url']);

    return '<a href="' . $url . '" style="background-color:' . $color . '; color:#fff; padding:10px 20px; text-decoration:none; border-radius:4px;">' . $text . '</a>';
}
add_shortcode('wpabout_button', 'wpabout_button_shortcode');

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

[wpabout_button text="Купить" color="#e74c3c" url="https://wpabout.ru/shop"]

Это выведет красную кнопку с текстом «Купить», которая ведет на указанный URL.

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

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

function wpabout_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
        'category' => ''
    ), $atts, 'wpabout_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="wpabout-recent-posts">';
    while ($query->have_posts()) {
        $query->the_post();
        $thumbnail = get_the_post_thumbnail(get_the_ID(), array(50, 50));
        $title = get_the_title();
        $permalink = get_permalink();

        $output .= '<li style="margin-bottom:10px;">';
        if ($thumbnail) {
            $output .= '<a href="' . esc_url($permalink) . '" style="vertical-align:middle; margin-right:10px;">' . $thumbnail . '</a>';
        }
        $output .= '<a href="' . esc_url($permalink) . '">' . esc_html($title) . '</a>';
        $output .= '</li>';
    }
    wp_reset_postdata();

    $output .= '</ul>';
    return $output;
}
add_shortcode('wpabout_recent_posts', 'wpabout_recent_posts_shortcode');

Вот как использовать этот шорткод:

[wpabout_recent_posts count="3" category="wordpress"]

Это выведет список из трех последних записей из категории «wordpress» с миниатюрами и ссылками. Если параметр category опущен, выведутся последние записи из всех категорий.

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

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

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

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

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

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

• Shortcodes Ultimate — мощный набор готовых шорткодов с визуальным редактором.
• WP Shortcode by MyThemeShop — простой плагин с базовым набором шорткодов.
• Shortcoder — позволяет создавать свои шорткоды с HTML, JavaScript и PHP.

Все они значительно упрощают работу с шорткодами и позволяют быстро добавлять функциональность без программирования.

Заключение: когда использовать собственные шорткоды

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

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