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

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

Что такое динамический шорткод с параметрами

Шорткод — это своего рода «короткая команда» для вставки функционала в записи и страницы WordPress. Обычно шорткод генерирует HTML при загрузке страницы, но без перезагрузки содержимое не меняется. Чтобы сделать шорткод обновляемым, нужно добавить поддержку AJAX-запросов.

Параметры шорткода позволяют гибко настраивать вывод. Например, [premiumwp_list category="news" count="5"] выведет 5 записей из категории news. Но если нужно менять эти параметры на лету — без перезагрузки — понадобится AJAX.

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

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

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

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => intval($atts['count']),
    );

    if ( $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="premiumwp-post-list">';
    while ( $query->have_posts() ) {
        $query->the_post();
        $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    $output .= '</ul>';

    wp_reset_postdata();

    return $output;
}
add_shortcode( 'premiumwp_list', 'premiumwp_shortcode_list' );

Этот шорткод выводит список постов по категории и количеству.

Добавляем AJAX для обновления шорткода без перезагрузки

Чтобы обновлять содержимое динамически, создадим JavaScript и PHP обработчик AJAX-запросов.

Регистрация скрипта и локализация

Добавьте в functions.php код для подключения скрипта и передачи параметров AJAX:

function premiumwp_enqueue_scripts() {
    wp_enqueue_script( 'premiumwp-ajax-script', get_template_directory_uri() . '/js/premiumwp-ajax.js', array('jquery'), '1.0', true );

    wp_localize_script( 'premiumwp-ajax-script', 'premiumwp_ajax', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'nonce' => wp_create_nonce( 'premiumwp_ajax_nonce' ),
    ) );
}
add_action( 'wp_enqueue_scripts', 'premiumwp_enqueue_scripts' );

Создаём AJAX обработчик на PHP

Обработчик будет принимать параметры, формировать вывод и возвращать HTML:

function premiumwp_ajax_load_posts() {
    check_ajax_referer( 'premiumwp_ajax_nonce', 'nonce' );

    $category = isset( $_POST['category'] ) ? sanitize_text_field( $_POST['category'] ) : '';
    $count = isset( $_POST['count'] ) ? intval( $_POST['count'] ) : 5;

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => $count,
    );

    if ( $category ) {
        $args['category_name'] = $category;
    }

    $query = new WP_Query( $args );

    if ( ! $query->have_posts() ) {
        wp_send_json_error( 'Нет записей для отображения.' );
    }

    $output = '<ul class="premiumwp-post-list">';
    while ( $query->have_posts() ) {
        $query->the_post();
        $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    $output .= '</ul>';

    wp_reset_postdata();

    wp_send_json_success( $output );
}
add_action( 'wp_ajax_premiumwp_load_posts', 'premiumwp_ajax_load_posts' );
add_action( 'wp_ajax_nopriv_premiumwp_load_posts', 'premiumwp_ajax_load_posts' );

JavaScript для отправки AJAX-запроса

Создайте файл js/premiumwp-ajax.js в вашей теме и добавьте:

jQuery(document).ready(function($) {
    $('#premiumwp-filter-button').on('click', function(e) {
        e.preventDefault();

        var category = $('#premiumwp-category').val();
        var count = $('#premiumwp-count').val();

        $.ajax({
            url: premiumwp_ajax.ajax_url,
            method: 'POST',
            data: {
                action: 'premiumwp_load_posts',
                nonce: premiumwp_ajax.nonce,
                category: category,
                count: count
            },
            success: function(response) {
                if (response.success) {
                    $('#premiumwp-posts-container').html(response.data);
                } else {
                    $('#premiumwp-posts-container').html('<p>' + response.data + '</p>');
                }
            },
            error: function() {
                $('#premiumwp-posts-container').html('<p>Ошибка загрузки данных.</p>');
            }
        });
    });
});

Добавляем HTML-интерфейс для управления шорткодом

Теперь нужно добавить в шорткод HTML поля для ввода параметров и кнопку:

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

    ob_start();
    ?>
    <div class="premiumwp-list-filter">
        <input type="text" id="premiumwp-category" placeholder="Категория" value="<?php echo esc_attr($atts['category']); ?>" />
        <input type="number" id="premiumwp-count" min="1" max="20" value="<?php echo intval($atts['count']); ?>" />
        <button id="premiumwp-filter-button">Обновить</button>
    </div>
    <div id="premiumwp-posts-container">
        <?php echo premiumwp_shortcode_list( $atts ); ?>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode( 'premiumwp_list_filter', 'premiumwp_shortcode_list_with_filter' );

Теперь, вставив [premiumwp_list_filter] в запись, вы получите список постов с полями для фильтрации и динамическим обновлением.

Использование плагинов для расширения функционала

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

Для визуального конструирования форм с AJAX-поддержкой обратите внимание на WPRemark. Он позволит создавать фильтры и интерактивные списки без погружения в код.

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

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

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