Как создать страницу категории товара в WordPress: полное руководство

Страницы категорий товаров являются неотъемлемой частью любого интернет-магазина на WordPress с использованием WooCommerce. Они служат навигационными узлами, помогая пользователям находить нужные товары, и играют важную роль в SEO-продвижении сайта.

Саммари статьи

ChatGPT

Google AI

Grok

Perplexity

Что такое страница категории товара и зачем она нужна?

Страница категории товара (или архив категории) — это автоматически генерируемая WordPress страница, которая отображает список всех товаров, отнесенных к определенной категории. Основные функции:

• Организация каталога: Группировка схожих товаров для удобства навигации.
• Улучшение пользовательского опыта (UX): Позволяет покупателям быстро сузить поиск и найти интересующие их группы товаров.
• SEO-оптимизация: Является целевой страницей для поисковых запросов, связанных с группами товаров (например, «купить мужские кроссовки»).

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

Хорошо оптимизированная страница категории:

• Привлекает целевой трафик: Ранжируется выше в поисковой выдаче по релевантным запросам.
• Повышает конверсию: Упрощает навигацию и поиск, что ведет к увеличению вероятности покупки.
• Снижает показатель отказов: Предоставляет пользователям релевантный контент и удобный интерфейс, удерживая их на сайте.

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

Создание базовой страницы категории товара

WooCommerce предоставляет встроенные инструменты для создания и управления категориями товаров.

Создание категорий товаров в WooCommerce

1. Перейдите в админ-панели WordPress: Товары → Категории.
2. В левой части экрана введите:
   • Название: Имя категории, которое будет отображаться на сайте (например, «Электроника»).
   • Ярлык (Slug): URL-дружественная версия названия (например, elektronika). Обычно генерируется автоматически, но можно задать вручную.
   • Родительская категория: Если создается подкатегория, выберите родительскую категорию из выпадающего списка.
   • Описание: Краткое описание категории. Оно может отображаться на странице категории (зависит от темы).
   • Тип отображения: Определяет, что будет показано на странице категории (товары, подкатегории или и то, и другое).
   • Миниатюра: Изображение, представляющее категорию.
3. Нажмите кнопку «Добавить новую категорию».

Добавление товаров в созданные категории

При создании или редактировании товара на странице редактирования товара найдите метабокс «Категории товаров» (обычно справа).

• Отметьте галочками одну или несколько категорий, к которым относится товар.
• Если нужной категории нет, можно быстро добавить ее, нажав «+ Добавить новую категорию» прямо в этом блоке.
• Не забудьте «Обновить» или «Опубликовать» товар, чтобы сохранить изменения.

Просмотр стандартной страницы категории (архива)

После создания категории и добавления в нее товаров, ее можно просмотреть на фронтенде сайта.

1. Перейдите в Товары → Категории.
2. Наведите курсор на нужную категорию в списке справа.
3. Нажмите на ссылку «Перейти».

Вы увидите стандартную страницу архива категории, внешний вид которой определяется вашей активной темой WordPress.

Настройка и оптимизация страницы категории товара

Стандартный вид страницы категории часто требует доработки для улучшения SEO и UX.

Добавление описания категории (текст и изображения)

Как упоминалось ранее, при создании/редактировании категории можно добавить описание. Это поле поддерживает базовое HTML-форматирование и добавление изображений через медиабиблиотеку.

• SEO: Используйте описание для добавления релевантного контента с ключевыми словами. Оптимальная длина — 500-1500 символов, в зависимости от конкуренции и тематики.
• UX: Кратко опишите, какие товары представлены в категории, их особенности или преимущества. Можно добавить баннер или изображение для визуального акцента.

Место отображения описания контролируется темой. Обычно оно выводится над списком товаров.

Использование плагинов для расширенной настройки

Существует множество плагинов для кастомизации страниц категорий без необходимости править код:

• Плагины для фильтрации: WooCommerce Product Filters, FacetWP, Filter Everything позволяют добавить продвинутые AJAX-фильтры по атрибутам, цене, рейтингу и т.д.
• Плагины для конструкторов страниц: Elementor Pro, Beaver Themer позволяют создавать полностью кастомные шаблоны архивов товаров с помощью визуального интерфейса.
• Специализированные плагины: Некоторые плагины нацелены на улучшение конкретных аспектов, например, Advanced Product Labels for WooCommerce для добавления стикеров к товарам.

Выбор плагина зависит от конкретных задач и бюджета.

Настройка SEO для страниц категорий товаров

Используйте SEO-плагины (например, Yoast SEO, Rank Math, SEOPress) для оптимизации:

• SEO Title (Заголовок): Создайте привлекательный и информативный заголовок, включающий основное ключевое слово и название бренда. Пример: «Купить Смартфоны — Лучшие Цены | ВашМагазин».
• Meta Description (Мета-описание): Напишите краткое (до 160 символов) описание содержимого страницы, мотивирующее пользователя перейти по ссылке. Включите ключевые слова и призыв к действию.
• Open Graph и Twitter Cards: Настройте отображение страницы при шаринге в социальных сетях (заголовок, описание, изображение).
• Schema Markup: Убедитесь, что плагин корректно генерирует структурированные данные (например, ItemList) для страниц категорий.

Расширенная настройка: индивидуальный шаблон страницы категории товара

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

Создание дочерней темы (Child Theme)

Перед внесением изменений в код темы всегда создавайте и активируйте дочернюю тему. Это гарантирует, что ваши модификации не будут перезаписаны при обновлении родительской темы. Создание дочерней темы — стандартная процедура WordPress, включающая создание папки для темы и файла style.css с необходимыми заголовками.

Копирование шаблона archive-product.php в дочернюю тему

Стандартный шаблон WooCommerce для отображения архивов товаров (включая категории) находится по пути: wp-content/plugins/woocommerce/templates/archive-product.php.

1. Скопируйте файл archive-product.php.
2. Вставьте его в папку вашей дочерней темы, сохраняя структуру папок WooCommerce: ваша-дочерняя-тема/woocommerce/archive-product.php. Если папки woocommerce нет, создайте ее.

Теперь WordPress будет использовать этот файл из дочерней темы вместо стандартного.

Редактирование шаблона для изменения внешнего вида и функциональности (HTML, CSS, PHP)

Откройте скопированный файл archive-product.php в редакторе кода. Вы можете изменять HTML-структуру, добавлять CSS-классы для стилизации и использовать PHP для добавления динамического контента или изменения логики.

Важно: Шаблон archive-product.php часто использует хуки (do_action()) и функции WooCommerce (wc_get_template_part(), woocommerce_product_loop_start() и др.). Старайтесь использовать хуки для добавления или удаления элементов там, где это возможно, вместо прямого редактирования основной структуры файла, чтобы сохранить совместимость с обновлениями WooCommerce.

Примеры кастомизации

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

<?php
defined( 'ABSPATH' ) || exit;

get_header( 'shop' );

/**
 * Hook: woocommerce_before_main_content.
 */
do_action( 'woocommerce_before_main_content' );
?>
<header class="woocommerce-products-header">
    <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
        <h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
    <?php endif; ?>

    <?php
    /**
     * Hook: woocommerce_archive_description.
     *
     * @hooked woocommerce_taxonomy_archive_description - 10
     * @hooked woocommerce_product_archive_description - 10
     */
    do_action( 'woocommerce_archive_description' );
    ?>
</header>
<?php

// --- НАЧАЛО КАСТОМНОГО КОДА: Добавление баннера для категории 'odezhda' ---
if ( is_product_category( 'odezhda' ) ) { // Проверяем, является ли текущая страница архивом категории с ярлыком 'odezhda'
    echo '<div class="category-promo-banner" style="background-color: #eaf7ff; border: 1px solid #b3d4fc; padding: 15px; margin-bottom: 25px; text-align: center;">';
    echo '<h4>Летняя распродажа одежды! Скидки до 50%!</h4>';
    // Сюда можно добавить изображение или ссылку
    echo '</div>';
}
// --- КОНЕЦ КАСТОМНОГО КОДА ---

if ( woocommerce_product_loop() ) {

    /**
     * Hook: woocommerce_before_shop_loop.
     */
    do_action( 'woocommerce_before_shop_loop' );

    woocommerce_product_loop_start();

    if ( wc_get_loop_prop( 'total' ) ) {
        while ( have_posts() ) {
            the_post();

            /**
             * Hook: woocommerce_shop_loop.
             */
            do_action( 'woocommerce_shop_loop' );

            wc_get_template_part( 'content', 'product' );
        }
    }

    woocommerce_product_loop_end();

    /**
     * Hook: woocommerce_after_shop_loop.
     */
    do_action( 'woocommerce_after_shop_loop' );

} else {
    /**
     * Hook: woocommerce_no_products_found.
     *
     * @hooked wc_no_products_found - 10
     */
    do_action( 'woocommerce_no_products_found' );
}

/**
 * Hook: woocommerce_after_main_content.
 */
do_action( 'woocommerce_after_main_content' );

/**
 * Hook: woocommerce_sidebar.
 */
// do_action( 'woocommerce_sidebar' ); // Раскомментируйте, если нужен сайдбар

get_footer( 'shop' );

?>

Пример 2: Изменение количества отображаемых товаров (чаще делается через хуки)

Хотя это можно сделать и в шаблоне, более правильный способ — использовать хук loop_shop_per_page в файле functions.php дочерней темы:

<?php
/**
 * Изменяет количество товаров, отображаемых на страницах магазина и категорий.
 *
 * @param int $cols Количество товаров по умолчанию.
 * @return int Новое количество товаров.
 */
add_filter( 'loop_shop_per_page', 'custom_loop_shop_per_page', 20 );

function custom_loop_shop_per_page( int $cols ): int {
    // Устанавливаем новое количество товаров на странице
    $cols = 15;
    return $cols;
}
?>

Рекомендации и лучшие практики

• Оптимизация изображений товаров: Используйте современные форматы (WebP), сжимайте изображения без потери качества и применяйте ленивую загрузку (loading="lazy") для ускорения загрузки страниц категорий.
• Анализ конкурентов: Изучите страницы категорий у лидеров вашей ниши. Обратите внимание на структуру, контент, наличие фильтров, качество описаний и изображений. Адаптируйте лучшие практики для своего сайта.
• Тестирование и мониторинг: Регулярно отслеживайте показатели страниц категорий в Google Analytics (трафик, показатель отказов, конверсии) и Google Search Console (позиции, CTR, ошибки). Проводите A/B-тестирование различных элементов (например, расположения описания, призывов к действию) для поиска оптимальных решений.
• Структура URL: Убедитесь, что URL категорий короткие, понятные и содержат ключевые слова (vashsite.com/category/muzhskaya-obuv/).
• Внутренняя перелинковка: Ссылайтесь на важные страницы категорий из других разделов сайта (статьи блога, главная страница) для улучшения их SEO-веса.

Создание и оптимизация страниц категорий товаров — непрерывный процесс. Следуя этим рекомендациям и используя возможности WordPress и WooCommerce, вы сможете значительно улучшить как видимость вашего магазина в поисковых системах, так и опыт взаимодействия для ваших покупателей.