Как изменить способ отображения категорий в WordPress

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

Типовые способы вывода категорий в WordPress

По умолчанию категории выводятся с помощью функции the_category() в шаблонах темы, либо через виджеты категорий. Это простой список с ссылками на архивацию записей по категориям. Однако такой подход часто ограничен:

• Отсутствие возможности кастомизировать вывод HTML;
• Недостаточно визуальных настроек (иконки, цвет, описание);
• Нет удобного управления порядком и вложенностью.

Для решения этих задач есть несколько подходов, о которых и пойдёт речь далее.

Изменение вывода категорий через фильтр wp_list_categories

Настройка HTML и добавление классов

Функция wp_list_categories() выводит список категорий. Для изменения HTML и добавления собственных классов можно использовать фильтр wp_list_categories. Пример, как добавить кастомный класс к каждой категории в списке:

add_filter('wp_list_categories', 'wptests_add_class_to_categories', 10, 2);
function wptests_add_class_to_categories($output, $args) {
    // Добавляем класс "wptests-category-item" к элементам списка
    $output = str_replace('<li>', '<li class="wptests-category-item">', $output);
    return $output;
}

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

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

Чтобы добавить иконки к категориям, можно использовать поле описания категории или мета-данные таксономии. Пример добавления иконки через описание (например, Unicode символ или HTML-иконку):

add_filter('wp_list_categories', 'wptests_add_icon_to_category', 10, 2);
function wptests_add_icon_to_category($output, $args) {
    $categories = get_categories();
    foreach ($categories as $category) {
        // Формируем иконку, например, берем первый символ описания
        $icon = substr($category->description, 0, 1);
        // Ищем ссылку на категорию в выводе и заменяем на иконку + название
        $pattern = '/<a href="([^"]*)">'.preg_quote($category->name, '/').'<\/a>/';
        $replacement = '<a href="$1">' . $icon . ' ' . $category->name . '</a>';
        $output = preg_replace($pattern, $replacement, $output);
    }
    return $output;
}

Такой метод позволяет без изменения шаблонов добавить в список категорий визуальные элементы.

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

Если нужна более глубокая кастомизация, лучше создать собственный шаблон для вывода категорий. Например, создать файл template-categories.php в корне темы с кодом:

<?php
/* Template Name: WPTets Custom Categories */
get_header();
$categories = get_categories(array('orderby' => 'name', 'order' => 'ASC'));
echo '<div class="wptests-category-list">';
foreach ($categories as $category) {
    echo '<div class="wptests-category-item">';
    echo '<h3>' . esc_html($category->name) . '</h3>';
    echo '<p>' . esc_html($category->description) . '</p>';
    echo '<a href="' . esc_url(get_category_link($category->term_id)) . '">Перейти к категории</a>';
    echo '</div>';
}
echo '</div>';
get_footer();
?>

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

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

Плагин Category Posts Widget

Если нужно вывести записи из определённых категорий с дополнительными опциями, плагин Category Posts Widget отлично подойдёт. Он позволяет настраивать вывод списка постов по категориям с миниатюрами, отрывками и сортировкой.

Плагин Custom Taxonomy UI

Для расширенного управления таксономиями и категориями удобен Custom Taxonomy UI. С его помощью можно создавать новые категории, менять их иерархию и настраивать метаданные.

Как изменить URL категорий без плагинов

Иногда необходимо изменить ЧПУ категорий, например, убрать префикс /category/. Для этого в WordPress есть способ через фильтр category_link и правила перезаписи:

add_filter('category_link', 'wptests_remove_category_slug', 10, 2);
function wptests_remove_category_slug($link, $category_id) {
    $category = get_category($category_id);
    if ($category) {
        $link = home_url('/' . $category->slug . '/');
    }
    return $link;
}

add_action('init', 'wptests_remove_category_slug_rewrite');
function wptests_remove_category_slug_rewrite() {
    add_rewrite_rule('^([^/]+)/?$', 'index.php?category_name=$matches[1]', 'top');
}

После добавления этого кода нужно обновить постоянные ссылки в настройках WordPress.

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

Для расширения информации о категориях можно использовать пользовательские поля (термин-мета). С WordPress 4.4 это реализовано через функции get_term_meta() и update_term_meta(). Пример добавления и вывода пользовательского поля "Иконка категории":

// Добавление поля в админке - пример через хук (упрощённый)
add_action('category_add_form_fields', 'wptests_category_icon_field');
add_action('category_edit_form_fields', 'wptests_category_icon_field_edit');

function wptests_category_icon_field() {
    ?>
    <div class="form-field">
        <label for="wptests_category_icon">Иконка категории (HTML)</label>
        <input name="wptests_category_icon" id="wptests_category_icon" type="text" value="">
        <p class="description">Введите HTML иконку для категории</p>
    </div>
    <?php
}

function wptests_category_icon_field_edit($term) {
    $icon = get_term_meta($term->term_id, 'wptests_category_icon', true);
    ?>
    <tr class="form-field">
        <th scope="row"><label for="wptests_category_icon">Иконка категории (HTML)</label></th>
        <td>
            <input name="wptests_category_icon" id="wptests_category_icon" type="text" value="<?php echo esc_attr($icon); ?>">
            <p class="description">Введите HTML иконку для категории</p>
        </td>
    </tr>
    <?php
}

// Сохранение данных
add_action('created_category', 'wptests_save_category_icon');
add_action('edited_category', 'wptests_save_category_icon');

function wptests_save_category_icon($term_id) {
    if (isset($_POST['wptests_category_icon'])) {
        update_term_meta($term_id, 'wptests_category_icon', wp_kses_post($_POST['wptests_category_icon']));
    }
}

// Вывод иконки при списке категорий
function wptests_display_category_icon($category_id) {
    $icon = get_term_meta($category_id, 'wptests_category_icon', true);
    if ($icon) {
        echo '<span class="wptests-cat-icon">' . $icon . '</span> ';
    }
}

Далее в шаблоне category.php или другом месте вывода категорий можно вызвать функцию wptests_display_category_icon($category->term_id).