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

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

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

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

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

Создание базового динамического шорткода в WordPress

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

function clearfy_dynamic_shortcode_example($atts) {
    // Задаём параметры по умолчанию
    $atts = shortcode_atts(array(
        'name' => 'Гость',
    ), $atts, 'clearfy_greeting');

    // Формируем ответ
    return '<p>Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на сайт.</p>';
}
add_shortcode('clearfy_greeting', 'clearfy_dynamic_shortcode_example');

Теперь при использовании шорткода [clearfy_greeting name="Алексей"] в записи или на странице, вы получите вывод: «Привет, Алексей! Добро пожаловать на сайт.» Если параметр name не указан, будет использовано значение по умолчанию — «Гость».

Объяснение кода

Функция clearfy_dynamic_shortcode_example принимает массив атрибутов, который заполняется значениями по умолчанию через shortcode_atts. Затем возвращается HTML-код с экранированным именем пользователя, что важно для безопасности.

Использование динамических данных в шорткодах: пример с выводом последних записей

Практическое применение динамических шорткодов — вывод последних записей из определённой категории. Создадим шорткод, который принимает параметр category для фильтрации постов и count для количества выводимых записей.

function clearfy_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'category' => '',
        'count' => 5,
    ), $atts, 'clearfy_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']);
    }

    $posts = get_posts($args);
    if (empty($posts)) {
        return '<p>Записи не найдены.</p>';
    }

    $output = '<ul>';
    foreach ($posts as $post) {
        $title = esc_html(get_the_title($post));
        $permalink = esc_url(get_permalink($post));
        $output .= '<li><a href="' . $permalink . '">' . $title . '</a></li>';
    }
    $output .= '</ul>';

    return $output;
}
add_shortcode('clearfy_recent_posts', 'clearfy_recent_posts_shortcode');

Пример использования: [clearfy_recent_posts category="novosti" count="3"] выведет 3 последних поста из категории «новости».

Советы по безопасности и производительности

• Всегда используйте функции экранирования (esc_html, esc_url) при выводе данных.
• Не забывайте фильтровать и проверять входящие параметры.
• Для сложных запросов используйте кэширование, чтобы снизить нагрузку на базу данных.

Расширение функциональности: шорткод с интерактивным выводом на AJAX

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

Добавьте следующий код в functions.php или плагин:

function clearfy_ajax_load_more() {
    wp_enqueue_script('clearfy-ajax-script', get_template_directory_uri() . '/js/clearfy-ajax.js', array('jquery'), null, true);
    wp_localize_script('clearfy-ajax-script', 'clearfy_ajax_obj', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('clearfy_ajax_nonce'),
    ));
}
add_action('wp_enqueue_scripts', 'clearfy_ajax_load_more');

function clearfy_ajax_handler() {
    check_ajax_referer('clearfy_ajax_nonce', 'nonce');

    // Пример динамического контента: вывод времени сервера
    $time = current_time('H:i:s');
    wp_send_json_success('Текущее серверное время: ' . $time);
}
add_action('wp_ajax_clearfy_get_time', 'clearfy_ajax_handler');
add_action('wp_ajax_nopriv_clearfy_get_time', 'clearfy_ajax_handler');

function clearfy_ajax_shortcode() {
    return '<button id="clearfy-ajax-btn">Показать время сервера</button><div id="clearfy-ajax-result"></div>';
}
add_shortcode('clearfy_ajax_time', 'clearfy_ajax_shortcode');

Создайте файл js/clearfy-ajax.js в папке темы со следующим содержимым:

jQuery(document).ready(function($) {
    $('#clearfy-ajax-btn').on('click', function() {
        $.ajax({
            url: clearfy_ajax_obj.ajaxurl,
            method: 'POST',
            data: {
                action: 'clearfy_get_time',
                nonce: clearfy_ajax_obj.nonce
            },
            success: function(response) {
                if(response.success) {
                    $('#clearfy-ajax-result').text(response.data);
                } else {
                    $('#clearfy-ajax-result').text('Ошибка при загрузке данных');
                }
            },
            error: function() {
                $('#clearfy-ajax-result').text('Ошибка AJAX запроса');
            }
        });
    });
});

Теперь при вставке шорткода [clearfy_ajax_time] на страницу появится кнопка, при нажатии на которую подгрузится текущее время сервера.

Объяснение

Мы регистрируем и подключаем JS-скрипт, локализуем переменные для AJAX, создаём обработчик на PHP для AJAX-запроса, который возвращает данные в формате JSON. Шорткод выводит кнопку и блок для вывода результата.

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

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

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

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

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

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

• Всегда называйте функции и хуки с уникальным префиксом, например, clearfy_, чтобы избежать конфликтов.
• Проверяйте и фильтруйте все входные данные для безопасности.
• Тестируйте шорткоды на разных страницах и с разными параметрами.
• Используйте кэширование или transient API для тяжелых запросов.
• Документируйте параметры и возможности шорткода для удобства использования.

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