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

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

Создание кастомного типа записей «Велосипеды»

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

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

function wpgen_register_bicycle_post_type() {
    $labels = array(
        'name'               => 'Велосипеды',
        'singular_name'      => 'Велосипед',
        'add_new'            => 'Добавить велосипед',
        'add_new_item'       => 'Добавить новый велосипед',
        'edit_item'          => 'Редактировать велосипед',
        'new_item'           => 'Новый велосипед',
        'all_items'          => 'Все велосипеды',
        'view_item'          => 'Просмотр велосипеда',
        'search_items'       => 'Поиск велосипедов',
        'not_found'          => 'Велосипеды не найдены',
        'not_found_in_trash' => 'Велосипеды не найдены в корзине',
        'menu_name'          => 'Велосипеды'
    );

    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'has_archive'        => true,
        'menu_position'      => 5,
        'supports'           => array('title', 'editor', 'thumbnail', 'custom-fields'),
        'rewrite'            => array('slug' => 'velosipedy'),
        'show_in_rest'       => true
    );

    register_post_type('wpgen_bicycle', $args);
}
add_action('init', 'wpgen_register_bicycle_post_type');

Теперь в админке появится новый раздел «Велосипеды», где можно добавлять записи с описанием моделей.

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

Для удобной организации каталога создадим две таксономии — «Категории» (горные, шоссейные, гибриды) и «Бренды».

function wpgen_register_bicycle_taxonomies() {
    // Категории
    register_taxonomy('wpgen_bicycle_category', 'wpgen_bicycle', array(
        'labels'            => array(
            'name'          => 'Категории',
            'singular_name' => 'Категория'
        ),
        'hierarchical'      => true,
        'show_ui'           => true,
        'show_in_rest'      => true,
        'rewrite'           => array('slug' => 'velosipednye-kategorii')
    ));

    // Бренды
    register_taxonomy('wpgen_bicycle_brand', 'wpgen_bicycle', array(
        'labels'            => array(
            'name'          => 'Бренды',
            'singular_name' => 'Бренд'
        ),
        'hierarchical'      => false,
        'show_ui'           => true,
        'show_in_rest'      => true,
        'rewrite'           => array('slug' => 'velosipednye-brendy')
    ));
}
add_action('init', 'wpgen_register_bicycle_taxonomies');

Теперь можно назначать категории и бренды каждой модели велосипеда.

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

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

Пример добавления метаполя для цены вручную:

function wpgen_add_bicycle_price_metabox() {
    add_meta_box('wpgen_bicycle_price', 'Цена велосипеда', 'wpgen_bicycle_price_callback', 'wpgen_bicycle', 'side', 'default');
}
add_action('add_meta_boxes', 'wpgen_add_bicycle_price_metabox');

function wpgen_bicycle_price_callback($post) {
    $price = get_post_meta($post->ID, '_wpgen_bicycle_price', true);
    echo '<label for="wpgen_bicycle_price_field">Цена (в рублях):</label>';
    echo '<input type="number" id="wpgen_bicycle_price_field" name="wpgen_bicycle_price_field" value="' . esc_attr($price) . '" style="width:100%;" />';
}

function wpgen_save_bicycle_price_meta($post_id) {
    if (array_key_exists('wpgen_bicycle_price_field', $_POST)) {
        update_post_meta($post_id, '_wpgen_bicycle_price', sanitize_text_field($_POST['wpgen_bicycle_price_field']));
    }
}
add_action('save_post', 'wpgen_save_bicycle_price_meta');

Так же добавьте метаполя для других параметров по аналогии.

Реализация фильтрации и сортировки каталога

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

Создание формы фильтрации

Добавим форму фильтров в шаблон архива велосипедов (archive-wpgen_bicycle.php):

<form method="GET" id="wpgen_bicycle_filter" action="<?php echo esc_url(get_post_type_archive_link('wpgen_bicycle')); ?>">
    <select name="bicycle_category">
        <option value="">Все категории</option>
        <?php
        $categories = get_terms('wpgen_bicycle_category', array('hide_empty' => true));
        foreach ($categories as $cat) {
            $selected = (isset($_GET['bicycle_category']) && $_GET['bicycle_category'] == $cat->slug) ? 'selected' : '';
            echo '<option value="' . esc_attr($cat->slug) . '" ' . $selected . '>' . esc_html($cat->name) . '</option>';
        }
        ?>
    </select>

    <select name="bicycle_brand">
        <option value="">Все бренды</option>
        <?php
        $brands = get_terms('wpgen_bicycle_brand', array('hide_empty' => true));
        foreach ($brands as $brand) {
            $selected = (isset($_GET['bicycle_brand']) && $_GET['bicycle_brand'] == $brand->slug) ? 'selected' : '';
            echo '<option value="' . esc_attr($brand->slug) . '" ' . $selected . '>' . esc_html($brand->name) . '</option>';
        }
        ?>
    </select>

    <input type="number" name="price_min" placeholder="Цена от" value="<?php echo isset($_GET['price_min']) ? intval($_GET['price_min']) : ''; ?>" />
    <input type="number" name="price_max" placeholder="Цена до" value="<?php echo isset($_GET['price_max']) ? intval($_GET['price_max']) : ''; ?>" />

    <select name="orderby">
        <option value="date">По дате</option>
        <option value="price">По цене</option>
        <option value="title">По названию</option>
    </select>

    <select name="order">
        <option value="ASC">По возрастанию</option>
        <option value="DESC">По убыванию</option>
    </select>

    <button type="submit">Фильтровать</button>
</form>

Обработка параметров фильтрации и сортировки в запросе

Используем хук pre_get_posts для изменения главного запроса архива:

function wpgen_filter_bicycle_archive($query) {
    if (!is_admin() && $query->is_main_query() && is_post_type_archive('wpgen_bicycle')) {
        // Фильтр по категории
        if (!empty($_GET['bicycle_category'])) {
            $query->set('tax_query', array(
                array(
                    'taxonomy' => 'wpgen_bicycle_category',
                    'field'    => 'slug',
                    'terms'    => sanitize_text_field($_GET['bicycle_category'])
                )
            ));
        }

        // Фильтр по бренду
        if (!empty($_GET['bicycle_brand'])) {
            $tax_query = $query->get('tax_query');
            if (!is_array($tax_query)) {
                $tax_query = array();
            }
            $tax_query[] = array(
                'taxonomy' => 'wpgen_bicycle_brand',
                'field'    => 'slug',
                'terms'    => sanitize_text_field($_GET['bicycle_brand'])
            );
            $query->set('tax_query', $tax_query);
        }

        // Фильтр по цене
        if (!empty($_GET['price_min']) || !empty($_GET['price_max'])) {
            $meta_query = array('relation' => 'AND');
            if (!empty($_GET['price_min'])) {
                $meta_query[] = array(
                    'key'     => '_wpgen_bicycle_price',
                    'value'   => intval($_GET['price_min']),
                    'compare' => '>=',
                    'type'    => 'NUMERIC'
                );
            }
            if (!empty($_GET['price_max'])) {
                $meta_query[] = array(
                    'key'     => '_wpgen_bicycle_price',
                    'value'   => intval($_GET['price_max']),
                    'compare' => '<=',
                    'type'    => 'NUMERIC'
                );
            }
            $query->set('meta_query', $meta_query);
        }

        // Сортировка
        $orderby = isset($_GET['orderby']) ? sanitize_text_field($_GET['orderby']) : 'date';
        $order = isset($_GET['order']) ? sanitize_text_field($_GET['order']) : 'DESC';

        if ($orderby === 'price') {
            $query->set('meta_key', '_wpgen_bicycle_price');
            $query->set('orderby', 'meta_value_num');
        } elseif ($orderby === 'title') {
            $query->set('orderby', 'title');
        } else {
            $query->set('orderby', 'date');
        }

        $query->set('order', $order);
    }
}
add_action('pre_get_posts', 'wpgen_filter_bicycle_archive');

Вывод каталога с фильтрами и пагинацией

Для вывода списка велосипедов используйте стандартный цикл WordPress. Пример вывода в шаблоне архива:

if (have_posts()) :
    echo '<div class="wpgen-bicycle-list">';
    while (have_posts()) : the_post();
        $price = get_post_meta(get_the_ID(), '_wpgen_bicycle_price', true);
        echo '<div class="bicycle-item">';
        echo '<h2>' . get_the_title() . '</h2>';
        if (has_post_thumbnail()) {
            the_post_thumbnail('medium');
        }
        echo '<p>Цена: ' . esc_html($price) . ' руб.</p>';
        echo '<a href="' . get_permalink() . '">Подробнее</a>';
        echo '</div>';
    endwhile;
    echo '</div>';

    // Пагинация
    the_posts_pagination(array(
        'mid_size'  => 2,
        'prev_text' => 'Назад',
        'next_text' => 'Вперед',
    ));
else :
    echo '<p>Велосипеды не найдены.</p>';
endif;

Улучшаем функционал с помощью плагина Clearfy Pro

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

Итог

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