Как создать тематический каталог тем WordPress с фильтрами и пагинацией

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

Почему нужен каталог с фильтрами и пагинацией в WordPress

Если у вас большой набор тем или шаблонов, пользователям становится сложно быстро найти подходящий вариант. Каталог с фильтрами позволяет сортировать и выбирать темы по нужным параметрам — например, по цене, популярности, поддержке Gutenberg, адаптивности и т.п. Пагинация же помогает не перегружать страницу длинным списком и ускоряет загрузку.

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

Создание кастомного типа записи для тем

Для начала регистрируем кастомный тип записи, например, wp_theme:

function wpthemes_register_post_type() {
    $labels = [
        'name'               => 'Темы',
        'singular_name'      => 'Тема',
        'menu_name'          => 'Темы',
        'add_new'            => 'Добавить тему',
        'add_new_item'       => 'Добавить новую тему',
        'edit_item'          => 'Редактировать тему',
        'new_item'           => 'Новая тема',
        'view_item'          => 'Просмотр темы',
        'search_items'       => 'Поиск тем',
        'not_found'          => 'Темы не найдены',
        'not_found_in_trash' => 'Темы не найдены в корзине',
    ];

    $args = [
        'labels'             => $labels,
        'public'             => true,
        'has_archive'        => true,
        'rewrite'            => ['slug' => 'themes'],
        'supports'           => ['title', 'editor', 'thumbnail'],
        'show_in_rest'       => true,
    ];

    register_post_type('wp_theme', $args);
}
add_action('init', 'wpthemes_register_post_type');

Этот код создаст новый тип записи «Темы» с базовыми поддерживаемыми полями и включит поддержку REST API для удобства AJAX-запросов.

Добавление мета-полей для характеристики тем

Чтобы фильтровать темы, нужно хранить дополнительные данные: цена, совместимость, рейтинг и прочее. Можно использовать мета-поля, например, с помощью add_post_meta или через интерфейс администратора с помощью плагинов типа Advanced Custom Fields (ACF).

Пример добавления мета-поля цены программно:

function wpthemes_add_price_meta_box() {
    add_meta_box('wpthemes_price', 'Цена темы', 'wpthemes_price_meta_box_callback', 'wp_theme', 'side');
}
add_action('add_meta_boxes', 'wpthemes_add_price_meta_box');

function wpthemes_price_meta_box_callback($post) {
    $value = get_post_meta($post->ID, '_wpthemes_price', true);
    echo '<label for="wpthemes_price_field">Цена (в рублях):</label>';
    echo '<input type="number" id="wpthemes_price_field" name="wpthemes_price_field" value="' . esc_attr($value) . '" min="0" step="1" />';
}

function wpthemes_save_price_meta_box_data($post_id) {
    if (array_key_exists('wpthemes_price_field', $_POST)) {
        update_post_meta($post_id, '_wpthemes_price', intval($_POST['wpthemes_price_field']));
    }
}
add_action('save_post', 'wpthemes_save_price_meta_box_data');

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

Создание таксономий для категорий и тегов тем

Для удобной фильтрации целесообразно создать таксономии, например, theme_category и theme_tag:

function wpthemes_register_taxonomies() {
    register_taxonomy('theme_category', 'wp_theme', [
        'labels' => [
            'name'          => 'Категории тем',
            'singular_name' => 'Категория темы',
        ],
        'hierarchical'      => true,
        'show_ui'           => true,
        'show_in_rest'      => true,
        'rewrite'           => ['slug' => 'theme-category'],
    ]);

    register_taxonomy('theme_tag', 'wp_theme', [
        'labels' => [
            'name'          => 'Теги тем',
            'singular_name' => 'Тег темы',
        ],
        'hierarchical'      => false,
        'show_ui'           => true,
        'show_in_rest'      => true,
        'rewrite'           => ['slug' => 'theme-tag'],
    ]);
}
add_action('init', 'wpthemes_register_taxonomies');

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

Реализация фильтров и пагинации на фронтенде с AJAX

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

HTML для фильтров

Пример базовой формы фильтрации:

<form id="wpthemes-filter">
    <label>Категория:</label>
    <select name="theme_category">
        <option value="">Все</option>
        <option value="business">Бизнес</option>
        <option value="blog">Блог</option>
    </select>

    <label>Максимальная цена:</label>
    <input type="number" name="max_price" min="0" />

    <button type="submit">Применить</button>
</form>

<div id="wpthemes-results"></div>  

JavaScript для AJAX-запроса

document.getElementById('wpthemes-filter').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);

    fetch(wpthemes_ajax_object.ajax_url, {
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
        },
        body: new URLSearchParams(formData),
    })
    .then(response => response.text())
    .then(html => {
        document.getElementById('wpthemes-results').innerHTML = html;
    });
});

PHP-обработчик AJAX-запроса

function wpthemes_ajax_filter() {
    $args = [
        'post_type' => 'wp_theme',
        'posts_per_page' => 10,
        'paged' => isset($_POST['paged']) ? intval($_POST['paged']) : 1,
    ];

    if (!empty($_POST['theme_category'])) {
        $args['tax_query'][] = [
            'taxonomy' => 'theme_category',
            'field'    => 'slug',
            'terms'    => sanitize_text_field($_POST['theme_category']),
        ];
    }

    if (!empty($_POST['max_price'])) {
        $args['meta_query'][] = [
            'key'     => '_wpthemes_price',
            'value'   => intval($_POST['max_price']),
            'compare' => '<=',
            'type'    => 'NUMERIC',
        ];
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        echo '<ul>';
        while ($query->have_posts()) {
            $query->the_post();
            echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a> — ' . get_post_meta(get_the_ID(), '_wpthemes_price', true) . ' руб.</li>';
        }
        echo '</ul>';
    } else {
        echo '<p>Темы не найдены.</p>';
    }
    wp_die();
}
add_action('wp_ajax_wpthemes_filter', 'wpthemes_ajax_filter');
add_action('wp_ajax_nopriv_wpthemes_filter', 'wpthemes_ajax_filter');

Для работы AJAX нужно в шаблоне подключить локализацию скрипта с передачей ajax_url и action в JS.

Оптимизация и расширение функционала каталога тем

Для улучшения пользовательского опыта можно добавить:

• Сортировку по цене, дате и популярности;
• Поддержку AJAX-пагинации с кнопкой «Показать ещё»;
• Вывод краткого описания и превью темы в списке;
• Возможность сохранять избранные темы через cookies или пользовательские мета;
• Использование готовых плагинов, например ABC Pagination для удобной пагинации.

Пример интеграции с темой и плагинами WPShop

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

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