Как вывести популярные метки на страницах категорий WordPress • YUZAA

Содержание

Дополнительные настройки
Решение возможных проблем
Расширенные возможности

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

Мы создадим систему, которая:

Автоматически собирает все метки из постов текущей категории
Сортирует их по популярности (частоте использования)
Выводит красивый блок сразу после заголовка категории
Показывает количество постов для каждой метки
Полностью адаптивна для мобильных устройств

Шаг 1: Подготовка дочерней темы

Перед началом убедитесь, что у вас активирована дочерняя тема. Если её нет, создайте:

В папке /wp-content/themes/ создайте папку yourtheme-child
Внутри создайте файл style.css:

/*
Theme Name: YourTheme Child
Template: yourtheme
Version: 1.0
*/

Активируйте дочернюю тему в админке: «Внешний вид» → «Темы»

Шаг 2: Создаем functions.php в дочерней теме

Создайте файл functions.php в папке дочерней темы и добавьте следующий код:

<?php
/**
 * Функции дочерней темы
 */

// Подключаем стили дочерней темы
function child_theme_enqueue_styles() {
    wp_enqueue_style(
        'child-theme-style',
        get_stylesheet_uri(),
        array('parent-theme-style'),
        wp_get_theme()->get('Version')
    );
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles', 20);

// Функция вывода меток категории
function display_category_tags() {
    // Работаем только на страницах категорий
    if (!is_category()) {
        return;
    }

    // Получаем текущую категорию
    $category = get_queried_object();

    // Получаем ID всех постов в категории
    $post_ids = get_posts(array(
        'cat' => $category->term_id,
        'posts_per_page' => -1,
        'fields' => 'ids',
        'post_status' => 'publish',
    ));

    if (empty($post_ids)) {
        return;
    }

    // Получаем метки с сортировкой по популярности
    $tags = wp_get_object_terms($post_ids, 'post_tag', array(
        'orderby' => 'count', // Сортировка по частоте использования
        'order' => 'DESC',    // По убыванию
        'number' => 15,       // Ограничение количества
    ));

    if (empty($tags) || is_wp_error($tags)) {
        return;
    }

    // Выводим HTML блок
    ?>
    <div class="category-tags-container">
        <div class="category-tags-inner">
            <h3 class="category-tags-title">Метки категории:</h3>
            <div class="category-tags-list">
                <?php foreach ($tags as $tag): ?>
                    <a href="<?php echo get_tag_link($tag->term_id); ?>" 
                       class="category-tag-link"
                       title="Записи с меткой <?php echo esc_attr($tag->name); ?>">
                        <?php echo esc_html($tag->name); ?>
                        <span class="tag-count"><?php echo $tag->count; ?></span>
                    </a>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
    <?php
}

Шаг 3: Добавляем вызов функции в archive.php

Создайте или отредактируйте файл archive.php в дочерней теме. Найдите блок с заголовком категории и добавьте вызов функции после него:

<header class="page-header">
    <!-- Заголовок категории -->
    <h1 class="page-title"><?php the_archive_title(); ?></h1>
    <div class="archive-description"><?php the_archive_description(); ?></div>
</header>

<?php
// Выводим метки категории
if (function_exists('display_category_tags')) {
    display_category_tags();
}
?>

<div class="post-cards">
    <!-- Список постов -->
</div>

Шаг 4: Добавляем стили в style.css

В конец файла style.css дочерней темы добавьте CSS стили:

/* Стили для блока меток категории */
.category-tags-container {
    margin: 30px 0 40px;
}

.category-tags-inner {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #007cba;
}

.category-tags-title {
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.category-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.category-tag-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.category-tag-link:hover {
    background-color: #007cba;
    color: white;
    border-color: #007cba;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 124, 186, 0.2);
}

.tag-count {
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
}

.category-tag-link:hover .tag-count {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Адаптивность */
@media (max-width: 768px) {
    .category-tags-container {
        margin: 20px 0;
    }
    .category-tags-inner {
        padding: 15px;
    }
    .category-tags-list {
        gap: 8px;
    }
    .category-tag-link {
        padding: 6px 12px;
        font-size: 13px;
    }
}

Шаг 5: Проверяем результат

Перейдите на любую страницу категории вашего сайта
После заголовка категории должен появиться блок с метками
Метки должны быть отсортированы по популярности
При наведении на метку должен работать эффект hover

Как работает сортировка по популярности? Система использует встроенную функцию WordPress wp_get_object_terms() с параметром 'orderby' => 'count'. Это означает:

count — количество постов, в которых используется метка
DESC — сортировка по убыванию (самые популярные первые)

Пример: если метка «Финансы» используется в 25 постах, а «Маркетинг» в 18, то «Финансы» будет выведена первой.

Дополнительные настройки

Изменение количества меток: В функции display_category_tags() измените параметр 'number': ‘number’ => 20, // Вместо 15
Изменение заголовка: Замените текст в HTML выводе: <h3 class=»category-tags-title»>Популярные темы:</h3>
Другие варианты сортировки: // По алфавиту (A-Z) ‘orderby’ => ‘name’, ‘order’ => ‘ASC’, // Случайный порядок ‘orderby’ => ‘rand’, // По ID (старые/новые) ‘orderby’ => ‘term_id’,

Решение возможных проблем

Метки не выводятся:

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

Стили не применяются:

Проверьте, что стили добавлены в style.css
Очистите кэш браузера и WordPress
Убедитесь, что дочерняя тема активна

Сортировка работает неправильно:

Проверьте параметры orderby и order
Убедитесь, что у меток есть заполненное поле count

Расширенные возможности

Для более сложных сценариев можно:

Добавить шорткод для вывода меток в любом месте:

add_shortcode('category_tags', 'display_category_tags');
// Использование: [category_tags]

Создать настройки в админке для управления количеством и сортировкой
Добавить кэширование для повышения производительности
Сделать AJAX-фильтрацию по меткам

Система полностью автоматическая — вам не нужно вручную обновлять метки при добавлении новых постов. Все изменения в контенте сразу отражаются на блоке меток.

Попробуйте реализовать это решение на своем сайте и наблюдайте, как улучшается пользовательский опыт!

Статья подготовлена для владельцев сайтов на WordPress. Все решения протестированы на актуальных версиях CMS и теме WP Community.