Как добавить счётчик просмотров в архив постов, каталог товаров WooCommerce и одиночные записи Blocksy

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

Однако в современных оптимизированных темах (в частности, в популярной теме Blocksy) встроенного счётчика просмотров внутри панели кастомайзера нет. Большинство вебмастеров устанавливают проверенный плагин Post Views Counter, но сталкиваются с неприятным сюрпризом: штатные режимы автоматического вывода плагина («Перед контентом» или «После контента») предназначены для тела статьи и совершенно не умеют аккуратно встраиваться в карточки архивов записей или каталога товаров.

В этой статье мы подробно разберём, как решить эту задачу на трёх уровнях:

• Встроить счётчик просмотров с аккуратной векторной иконкой в строку метаданных карточек записей блога в едином стиле темы Blocksy;
• Вывести количество просмотров в сетку каталога товаров WooCommerce;
• Бонус: добавить стилизованный счётчик в шапку одиночной статьи и на страницу отдельного товара без нарушения вёрстки.

Инструменты и подготовительная настройка

Для реализации нам понадобятся:

1. Тема Blocksy (подойдёт как бесплатная версия, так и Blocksy Companion Pro).
2. Плагин Post Views Counter (от dFactory / Digital Factory) — быстрый, легковесный инструмент учёта просмотров, оптимизированный под работу с кэшированием.
3. Векторная иконка глаза в формате SVG (например, загруженная в медиабиблиотеку).
4. Менеджер сниппетов (например, WPCodeBox) или файл functions.php дочерней темы.

Настройка Post Views Counter

Перейдите в админке в раздел Настройки → Post Views Counter (или «Счётчик просмотров»):

• Во вкладке Общие (General) в пункте «Типы записей» (Post Types Count) отметьте галочками Записи (Posts) и Товары (Products).
• В пункте «Режим подсчёта» (Counter Mode) обязательно выберите JavaScript или REST API. Если у вас активны плагины кэширования (FlyingPress, WP Rocket, Redis), стандартный режим PHP не сможет регистрировать просмотры из закешированных HTML-страниц!
• Во вкладке Отображение (Display) в параметре «Позиция» (Position) выберите Вручную (Manual). Это отключит авто-вставку плагина в тело текста, позволяя нам полностью контролировать место и внешний вид вывода.

Часть 1: Счётчик просмотров в архиве записей блога (карточки Blocksy)

В теме Blocksy метаданные карточек формируются списком <ul class="entry-meta">, где каждый пункт (дата, время чтения, автор) выводится отдельным тегом <li>, а разделители (слэши или точки) задаются через CSS-псевдоэлементы темы.

Чтобы счётчик просмотров стал органичной частью этой строки, мы используем хук вывода метаданных Blocksy. Добавьте следующий сниппет в WPCodeBox (тип: PHP, исполнение: Always / Everywhere):

<?php
/**
 * Вывод счётчика просмотров в метаданные карточек архива Blocksy
 */
add_action( 'blocksy:entry:meta:render', function( $meta_id ) {
    // Проверяем наличие плагина Post Views Counter
    if ( ! function_exists( 'pvc_get_post_views' ) ) {
        return;
    }

    $views = pvc_get_post_views( get_the_ID() );
    $views = ! empty( $views ) ? (int) $views : 0;

    // Ссылка на SVG-иконку или встроенный inline SVG
    $icon_url = 'https://wordpressbook.ru/wp-content/uploads/2026/10/eye.svg';

    echo '<li class="meta-views">';
    echo '<span class="meta-views-icon"><img src="' . esc_url( $icon_url ) . '" alt="Как добавить счётчик просмотров в архив постов, каталог товаров WooCommerce и одиночные записи Blocksy" width="14" height="14" /></span>';
    echo '<span class="meta-views-count">' . esc_html( number_format_i18n( $views ) ) . '</span>';
    echo '</li>';
}, 20 );

Решение проблемы с выравниванием иконки («уехала наверх»)

Частая проблема при ручном добавлении кастомных элементов в список метаданных — несовпадение базовых линий (baseline). Если задать контейнеру display: inline-flex, элемент выпадает из общего потока строки, иконка подпрыгивает вверх, а слэш-разделитель Blocksy съезжает вниз.

Чтобы иконка и число стояли строго на одной линии с датой и временем чтения, добавьте в кастомайзер (Внешний вид → Настроить → Дополнительные стили) или в SCSS-редактор сниппетов следующие правила:

/* Стилизация счётчика просмотров в карточках Blocksy */
.entry-meta .meta-views {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: baseline;
}

.entry-meta .meta-views-icon {
    display: inline-flex;
    align-items: center;
}

.entry-meta .meta-views-icon img,
.entry-meta .meta-views-icon svg {
    width: 14px;
    height: 14px;
    display: block;
    opacity: 0.8;
}

.entry-meta .meta-views-count {
    font-size: inherit;
    line-height: 1;
}

Благодаря vertical-align: baseline и выравниванию флекс-элементов по центру, счётчик выглядит монолитной частью дизайна Blocksy как в светлой, так и в тёмной теме оформления.

Часть 2: Добавление счётчика в архив товаров WooCommerce (каталог)

В интернет-магазине карточки товаров формируются стандартными хуками WooCommerce Loop. Наиболее логичное место для счётчика просмотров — под заголовком товара или рядом с рейтингом/ценой.

Для вывода просмотров в каталоге товаров WooCommerce используем хук woocommerce_after_shop_loop_item_title:

<?php
/**
 * Вывод просмотров в каталоге товаров WooCommerce
 */
add_action( 'woocommerce_after_shop_loop_item_title', 'wpb_woocommerce_card_views', 7 );
function wpb_woocommerce_card_views() {
    if ( ! function_exists( 'pvc_get_post_views' ) ) {
        return;
    }

    global $product;
    if ( ! $product ) {
        return;
    }

    $product_id = $product->get_id();
    $views = pvc_get_post_views( $product_id );
    $views = ! empty( $views ) ? (int) $views : 0;

    $icon_url = 'https://wordpressbook.ru/wp-content/uploads/2026/10/eye.svg';

    echo '<div class="woocommerce-product-views">';
    echo '<span class="product-views-icon"><img src="' . esc_url( $icon_url ) . '" alt="Как добавить счётчик просмотров в архив постов, каталог товаров WooCommerce и одиночные записи Blocksy" width="13" height="13" /></span>';
    echo '<span class="product-views-text">' . esc_html( number_format_i18n( $views ) ) . ' просмотров</span>';
    echo '</div>';
}

И немного CSS для компактного размещения над ценой товара:

.woocommerce-product-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--theme-text-color, #666);
    opacity: 0.75;
    margin: 4px 0 8px 0;
}

.woocommerce-product-views .product-views-icon img {
    width: 13px;
    height: 13px;
    vertical-align: middle;
}

Бонус: Счётчик в одиночной записи (Single Post) и карточке отдельного товара

1. Одиночная статья блога

В одиночной записи (Single Post) тему Blocksy можно настроить двумя способами:

1. Через хук одиночной записи: хук blocksy:single:post:top или фильтр метаданных заголовка blocksy:single:post-meta:render позволяет вывести ту же аккуратную плашку сразу после даты публикации и имени автора.
2. Через Blocksy Content Blocks (в версии Pro): перейдите в Blocksy → Пользовательские блоки (Content Blocks), создайте новый блок типа «Хук», выберите позицию Single Post: Before/After Header или After Post Title и вставьте шорткод
   Views: 31
   с нужными классами оформления. Это решение полностью визуальное и не требует вставки PHP-кода в файлы сайта.

2. Страница отдельного товара WooCommerce

На детальной странице товара WooCommerce просмотры отлично смотрятся в блоке краткого описания рядом с артикулом (SKU) или категорией:

<?php
/**
 * Вывод просмотров на странице отдельного товара WooCommerce
 */
add_action( 'woocommerce_single_product_summary', 'wpb_single_product_views', 15 );
function wpb_single_product_views() {
    if ( ! function_exists( 'pvc_get_post_views' ) ) {
        return;
    }

    $views = pvc_get_post_views( get_the_ID() );
    $views = ! empty( $views ) ? (int) $views : 0;

    echo '<div class="single-product-views-badge">';
    echo '<span class="badge-icon">👁</span> ';
    echo '<span class="badge-count">' . sprintf( _n( '%s человек уже смотрел этот товар', '%s человек уже смотрели этот товар', $views, 'wordpressbook' ), number_format_i18n( $views ) ) . '</span>';
    echo '</div>';
}

Критический нюанс: Кэширование страниц (FlyingPress / Redis)

Если на вашем сайте настроен плагин кэширования страниц (например, FlyingPress) или серверный Object Cache (Redis), вы можете столкнуться с тем, что счётчик «замирает» и показывает одно и то же число для всех гостей.

Чтобы подсчёт работал корректно:

1. В настройках Post Views Counter убедитесь, что включен режим сбора через REST API / AJAX. В этом случае подсчёт инициируется фоновым асинхронным запросом браузера посетителя уже после отдачи страницы из кэша.
2. Если вы используете опцию FlyingPress «Delay JavaScript», добавьте скрипты post-views-counter в список исключений из задержки, чтобы просмотр фиксировался сразу при открытии страницы, а не только после движения курсора. Подробнее о тонкостях взаимодействия скриптов и кэша страниц читайте в нашей статье: Blocksy сбрасывает тёмную тему при переходе между страницами: решение для FlyingPress.
3. После внесения любых изменений в сниппеты обязательно выполните очистку кэша: в верхней панели админки нажмите FlyingPress → Purge Pages.

Резюме

Использование связки легковесного плагина Post Views Counter и встроенной хук-системы темы Blocksy позволяет получить аккуратный, производительный и визуально безупречный счётчик просмотров. Он не утяжеляет базу данных избыточными таблицами, идеально масштабируется в архивах записей блога, каталоге WooCommerce и отдельных статьях, гармонично дополняя дизайн любого современного проекта на WordPress.