Как создать динамические блоки с помощью шорткодов в WordPress

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

Что такое динамические блоки и зачем они нужны в WordPress

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

Примеры применения динамических блоков:

• Вывод последних записей определённой категории;
• Показ формы обратной связи с подтверждением;
• Динамические таблицы с данными;
• Персонализированный контент для пользователя;
• Интерактивные списки и фильтры.

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

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

Для создания динамического блока нам потребуется зарегистрировать шорткод и написать функцию, которая будет возвращать HTML-код блока. Используем стандартный хук add_shortcode.

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

function wpset_dynamic_date_shortcode() {
    return '<div class="wpset-date">Сегодня: ' . date('d.m.Y') . '</div>';
}
add_shortcode('wpset_date', 'wpset_dynamic_date_shortcode');

Теперь в редакторе можно вставить [wpset_date] — и посетитель увидит текущую дату.

Создание шорткода с параметрами: динамические списки и фильтрация

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

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

function wpset_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'category' => '',
            'count' => 5
        ), $atts, 'wpset_posts');

    $args = array(
        'posts_per_page' => intval($atts['count']),
        'category_name' => sanitize_text_field($atts['category']),
        'post_status' => 'publish'
    );

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

    $output = '<ul class="wpset-latest-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('wpset_posts', 'wpset_latest_posts_shortcode');

Использование: [wpset_posts category="novosti" count="3"] — выведет 3 последние записи из категории «новости».

Динамические формы в шорткодах: пример с обратной связью

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

Пример шорткода с формой и обработкой

function wpset_feedback_form_shortcode() {
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['wpset_feedback_nonce']) && wp_verify_nonce($_POST['wpset_feedback_nonce'], 'wpset_feedback_action')) {
        $name = sanitize_text_field($_POST['wpset_name']);
        $message = sanitize_textarea_field($_POST['wpset_message']);
        // Здесь можно отправить письмо или записать в базу
        $response = '<p>Спасибо, ' . esc_html($name) . ', за ваше сообщение!</p>';
    } else {
        $response = '';
    }

    $form = $response . '<form method="post">'
        . wp_nonce_field('wpset_feedback_action', 'wpset_feedback_nonce', true, false)
        . '<p><label>Имя:</label><br><input type="text" name="wpset_name" required></p>'
        . '<p><label>Сообщение:</label><br><textarea name="wpset_message" required></textarea></p>'
        . '<p><button type="submit">Отправить</button></p>'
        . '</form>';

    return $form;
}
add_shortcode('wpset_feedback_form', 'wpset_feedback_form_shortcode');

Вставьте [wpset_feedback_form] в нужном месте, чтобы вывести форму обратной связи.

Использование плагина Clearfy Pro для улучшения динамических блоков

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

Clearfy Pro позволяет выбирать, на каких страницах подключать определённые скрипты и стили шорткодов, что снижает нагрузку и ускоряет загрузку.

Советы по безопасности и оптимизации динамических блоков

При создании динамических блоков важно:

• Использовать sanitize_text_field, sanitize_textarea_field и другие функции очистки данных;
• Применять wp_nonce_field и проверять nonce для форм;
• Избегать тяжелых запросов без кеширования — если блок формирует сложные выборки, реализуйте кеширование с помощью Transients API;
• Минимизировать количество подключаемых стилей и скриптов;
• Тестировать шорткоды на совместимость с другими плагинами.

Расширение функционала: использование AJAX для динамических блоков

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

Это требует добавления JavaScript кода и регистрации обработчиков на стороне PHP через wp_ajax_ и wp_ajax_nopriv_.

Краткий пример AJAX-запроса для шорткода подгрузки постов

// В JS (файл подключается через wp_enqueue_script)
jQuery(document).ready(function($) {
    $('#wpset-load-more').on('click', function() {
        var data = {
            action: 'wpset_load_more_posts',
            offset: $('#wpset-latest-posts li').length
        };
        $.post(wpset_ajax_object.ajax_url, data, function(response) {
            if(response) {
                $('#wpset-latest-posts').append(response);
            } else {
                $('#wpset-load-more').hide();
            }
        });
    });
});

// В functions.php
function wpset_load_more_posts_ajax() {
    $offset = intval($_POST['offset']);
    $args = array(
        'posts_per_page' => 5,
        'offset' => $offset,
        'post_status' => 'publish'
    );
    $query = new WP_Query($args);
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        }
    }
    wp_die();
}
add_action('wp_ajax_wpset_load_more_posts', 'wpset_load_more_posts_ajax');
add_action('wp_ajax_nopriv_wpset_load_more_posts', 'wpset_load_more_posts_ajax');

Этот подход значительно улучшит UX, позволяя пользователю загружать больше контента без перезагрузки.