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

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

Что такое shortcode и зачем он нужен в WordPress

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

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

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

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

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

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

function wpma_ru_hello_shortcode() {
    return '<p>Привет, это мой собственный shortcode!</p>';
}
add_shortcode('wpma_hello', 'wpma_ru_hello_shortcode');

Теперь при вставке в записи или на страницу тега [wpma_hello] будет выводиться текст «Привет, это мой собственный shortcode!».

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

Shortcode с параметрами: как передавать данные

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

function wpma_ru_greet_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'name' => 'гость',
        ), $atts, 'wpma_greet'
    );
    return '<p>Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на сайт.</p>';
}
add_shortcode('wpma_greet', 'wpma_ru_greet_shortcode');

Пример использования в контенте: [wpma_greet name="Алексей"]. Выведет: «Привет, Алексей! Добро пожаловать на сайт.»

Функция shortcode_atts() задает значения параметров по умолчанию и объединяет их с переданными.

Shortcode с динамическим выводом: пример с выводом последних записей

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

function wpma_ru_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'count' => 5,
        ), $atts, 'wpma_recent_posts'
    );

    $query_args = array(
        'posts_per_page' => intval($atts['count']),
        'post_status' => 'publish',
    );

    $query = new WP_Query($query_args);
    if (!$query->have_posts()) {
        return '<p>Нет записей для отображения.</p>';
    }

    $output = '<ul>';
    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('wpma_recent_posts', 'wpma_ru_recent_posts_shortcode');

Использование: [wpma_recent_posts count="3"] — выведет 3 последние записи с ссылками. Это полезно для размещения подборок на страницах и в сайдбарах.

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

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

Кроме того, если шорткод должен выводить HTML, используйте wp_kses_post() для очистки содержимого.

Пример с безопасной обработкой ссылки:

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

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

    return '<a href="' . $url . '" class="wpma-button">' . $text . '</a>';
}
add_shortcode('wpma_button', 'wpma_ru_button_shortcode');

Использование: [wpma_button url="https://wpma.ru" text="Перейти на WPMA"]

Подключение стилей и скриптов для shortcode

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

Пример подключения CSS для шорткода кнопки:

function wpma_ru_enqueue_shortcode_styles() {
    if ( is_singular() ) {
        global $post;
        if ( has_shortcode( $post->post_content, 'wpma_button' ) ) {
            wp_enqueue_style('wpma-button-style', get_stylesheet_directory_uri() . '/css/wpma-button.css');
        }
    }
}
add_action('wp_enqueue_scripts', 'wpma_ru_enqueue_shortcode_styles');

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

Отладка и оптимизация шорткодов

Для отладки шорткодов советую включить WP_DEBUG и использовать функции error_log(), чтобы отслеживать ошибки. Также важно тестировать шорткоды на разных страницах и с разными параметрами.

Оптимизация включает кэширование результатов, если вывод сложный и ресурсоемкий. Например, можно сохранять результат в transient:

function wpma_ru_recent_posts_shortcode_cached($atts) {
    $atts = shortcode_atts(array('count' => 5), $atts, 'wpma_recent_posts_cached');
    $cache_key = 'wpma_recent_posts_' . intval($atts['count']);
    $output = get_transient($cache_key);
    if (false === $output) {
        $output = wpma_ru_recent_posts_shortcode($atts);
        set_transient($cache_key, $output, 12 * HOUR_IN_SECONDS);
    }
    return $output;
}
add_shortcode('wpma_recent_posts_cached', 'wpma_ru_recent_posts_shortcode_cached');

Это уменьшит нагрузку на базу данных при большом трафике.

Полезные плагины для управления shortcode

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

• Shortcoder — удобный интерфейс для создания шорткодов с HTML и JavaScript.
• Code Snippets — позволяет добавлять PHP-код, включая шорткоды, без правки functions.php.
• Shortcodes Ultimate — коллекция готовых шорткодов для различных задач.

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

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

Создание собственных shortcode — отличный способ добавить уникальный функционал на сайт WordPress. Главное — писать чистый, безопасный и оптимизированный код, использовать префиксы для функций и тестировать на разных условиях.

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

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