Как создать автоматические списки в WordPress с помощью PHP и JavaScript

Автор: Антон Захаров | Опубликовано: 11.03.2026

Автоматическое создание списков в WordPress — полезный навык для разработчиков, которые хотят динамически отображать контент, основанный на данных сайта или пользовательском вводе. В этой статье разберём, как создать автоматические списки с использованием PHP для серверной части и JavaScript для интерактивности на клиенте.

Зачем нужны автоматические списки в WordPress?

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

Преимущества автоматических списков:

Обновление данных без ручного редактирования
Интерактивность: фильтрация, сортировка, пагинация
Улучшение SEO за счёт правильной разметки

Создание автоматического списка на PHP в WordPress

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

Пример функции yelly_create_auto_list() для вывода последних 5 постов заданной категории:

function yelly_create_auto_list($category_slug) {
    $args = [
        'post_type' => 'post',
        'posts_per_page' => 5,
        'category_name' => $category_slug
    ];
    $query = new WP_Query($args);
    if ($query->have_posts()) {
        echo '<ul class="yelly-auto-list">';
        while ($query->have_posts()) {
            $query->the_post();
            echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        }
        echo '</ul>';
    } else {
        echo '<p>Записей не найдено.</p>';
    }
    wp_reset_postdata();
}

Вызвать эту функцию можно в шаблоне или через шорткод для удобства:

function yelly_shortcode_auto_list($atts) {
    ob_start();
    $atts = shortcode_atts(['category' => ''], $atts);
    yelly_create_auto_list($atts['category']);
    return ob_get_clean();
}
add_shortcode('yelly_auto_list', 'yelly_shortcode_auto_list');

Пример использования шорткода: [yelly_auto_list category="novosti"].

Добавление интерактивности с помощью JavaScript

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

HTML для фильтра:

<input type="text" id="yelly-list-filter" placeholder="Поиск в списке..." />

JavaScript для фильтрации:

document.addEventListener('DOMContentLoaded', function() {
    const filterInput = document.getElementById('yelly-list-filter');
    const list = document.querySelector('.yelly-auto-list');
    if (!filterInput || !list) return;
    filterInput.addEventListener('input', function() {
        const filter = this.value.toLowerCase();
        const items = list.getElementsByTagName('li');
        Array.from(items).forEach(function(item) {
            const text = item.textContent.toLowerCase();
            item.style.display = text.includes(filter) ? '' : 'none';
        });
    });
});

Добавьте этот код в footer.php или подключите через функцию wp_enqueue_script в functions.php.

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

Реализуем подключение скрипта через functions.php:

function yelly_enqueue_scripts() {
    wp_enqueue_script('yelly-filter', get_template_directory_uri() . '/js/yelly-filter.js', [], null, true);
}
add_action('wp_enqueue_scripts', 'yelly_enqueue_scripts');

Создайте файл js/yelly-filter.js с кодом фильтрации, приведённым выше. Вывод списка и поля фильтра сделайте так:

<input type="text" id="yelly-list-filter" placeholder="Поиск в списке..." />
<?php echo do_shortcode('[yelly_auto_list category="novosti"]'); ?>

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

Если хочется более продвинутых функций, можно обратить внимание на плагины, которые хорошо интегрируются с WordPress:

WP Remark — автоматизация сообщений и уведомлений с динамическими списками;
Подробнее: https://wpshop.ru/plugins/wpremark/
ABC Pagination — удобная пагинация больших списков с настройками отображения;
Подробнее: https://wpshop.ru/plugins/abc-pagination/
Expert Review — создание отзывов и рейтингов со списками пользователей;
Подробнее: https://wpshop.ru/plugins/expert-review/

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

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

При работе с динамическими списками важно учитывать производительность. Используйте кэширование (например, set_transient в WordPress) для хранения результатов запросов, чтобы не нагружать базу данных при каждом запросе. Оптимизируйте JavaScript, чтобы фильтрация была плавной, особенно на больших списках.

Также не забывайте о правильной разметке HTML для SEO и доступности — используйте семантические теги, aria-атрибуты, если требуется.

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