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

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

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

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

В этой статье я подробно расскажу, как создать свой шорткод, приведу примеры кода и объясню, как его можно кастомизировать.

Основы создания собственного шорткода в WordPress

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

Пример базового шорткода:

function wpmobile_simple_shortcode() {
    return '<div>Привет, это мой шорткод!</div>';
}
add_shortcode('wpmobile_hello', 'wpmobile_simple_shortcode');

Теперь, если в редакторе WordPress вы вставите [wpmobile_hello], на странице появится текст: "Привет, это мой шорткод!".

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

Добавление параметров в шорткод: динамическое управление выводом

Шорткоды могут принимать параметры, которые задаются в виде атрибутов. Это делает их более гибкими.

Пример шорткода с параметрами:

function wpmobile_greeting_shortcode($atts) {
    // Задаём значения по умолчанию
    $atts = shortcode_atts(
        array('name' => 'Гость'),
        $atts,
        'wpmobile_greeting'
    );
    return '<p>Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на wpmobile.ru.</p>';
}
add_shortcode('wpmobile_greeting', 'wpmobile_greeting_shortcode');

Теперь, написав в редакторе [wpmobile_greeting name="Алексей"], вы получите: "Привет, Алексей! Добро пожаловать на wpmobile.ru.".

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

Пример: шорткод для отображения последних записей блога

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

function wpmobile_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'count' => 5
        ),
        $atts,
        'wpmobile_recent_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="wpmobile-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('wpmobile_recent_posts', 'wpmobile_recent_posts_shortcode');

Используйте [wpmobile_recent_posts count="3"] в редакторе, чтобы показать 3 последних поста. Если параметр не указан, будет показано 5 записей по умолчанию.

Как кастомизировать вывод и стили

Чтобы стилизовать список последних записей, добавьте CSS в файл стилей вашей темы или в кастомный CSS плагин:

.wpmobile-recent-posts {
    list-style: disc inside;
    padding-left: 0;
}
.wpmobile-recent-posts li {
    margin-bottom: 5px;
}

Таким образом вы сможете легко контролировать внешний вид без изменения кода шорткода.

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

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

• Используйте функции esc_html(), esc_attr() и wp_kses() для обработки пользовательских данных и защиты от XSS-атак.
• Не выводите данные напрямую, всегда возвращайте их из функции.
• Используйте wp_reset_postdata() после пользовательских запросов, чтобы не нарушить глобальный цикл WordPress.

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

function wpmobile_filtered_shortcode_output() {
    $output = '<div>Контент шорткода</div>';
    return apply_filters('wpmobile_shortcode_output', $output);
}

Так вы обеспечите расширяемость своего кода.

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

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

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

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

Практические советы для разработчиков: организация кода шорткодов

Чтобы поддерживать чистоту и удобство кода, рекомендую придерживаться следующих правил:

• Все функции и хук-имена начинайте с префикса, например, wpmobile_, чтобы избежать конфликтов.
• Храните шорткоды в отдельном файле вашего плагина или темы, чтобы не мешать основному коду.
• Документируйте функции с описанием параметров и возвращаемых значений.
• Тестируйте шорткоды в разных условиях, чтобы избежать ошибок на сайте.

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