Пользовательское меню с категориями и тегами

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Настройка меню
Шаг 2: Кастомизация меню
Шаг 3: Визуализация и настройки
Шаг 4: Тестирование
Заключение

Вопрос или проблема

В принципе, мне нужно индивидуальное меню, состоящее из двух уровней.
Верхний уровень будет состоять из доступных категорий, возможно, с добавленной функцией, чтобы название каждой категории сопровождалось количеством постов в этой конкретной категории, т.е. Статьи (37).
Второй или нижний уровень будет состоять из всех уникальных тегов, относящихся к этой конкретной категории.
Мне очень хотелось бы это визуализировать, но я идиот в этом интерфейсе. Что бы я ни пытался сделать, у меня ничего не получается, поэтому я сделаю это способом html.

<ul id="menu">
    <li class="category">
        cat1
        <ul>
            <li class="tag">tag1</li>
            <li class="tag">tag2</li>
            <li class="tag">tag3</li>
        </ul>
    </li>
    <li class="category">
        cat2
        <ul>
            <li class="tag">tag3</li>
            <li class="tag">tag7</li>
            <li class="tag">tag14</li>
        </ul>
    </li>
    <li class="category">
        cat3    
        <ul>
            <li class="tag">tag2</li>
            <li class="tag">tag8</li>
            <li class="tag">tag14</li>
        </ul>
    </li>
<ul>

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

Я думаю, это в общем-то всё.

Я пытался сделать это самостоятельно, но у меня ничего не получается, поэтому любая помощь будет очень ценна.

С наилучшими пожеланиями

Вы знакомы с меню wp_nav?

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

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

Ответ или решение

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

Шаг 1: Настройка меню

Создание меню в WordPress:
- Перейдите в админку WordPress.
- В меню слева выберите Внешний вид > Меню.
- Создайте новое меню и назовите его, например, "Категории и теги".
- Добавьте ваши категории в это меню. Для этого выберите "Категории" в левой колонке и добавьте нужные категории, перетащив их в структуру меню.
Добавление постов в категории:
- В каждой категории будет отображаться количество постов, которые к ней относятся. Чтобы это сделать, вам нужно отредактировать каждую категорию через панель управления. Никаких дополнительных действий не потребуется: WordPress по умолчанию показывает количество постов в каждой категории.

Шаг 2: Кастомизация меню

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

add_filter('wp_nav_menu_items', 'add_tags_to_menu', 10, 2);

function add_tags_to_menu($items, $args) {
    if($args->theme_location == 'your_menu_location') { // замените на ваше местоположение меню
        $categories = get_categories();

        foreach ($categories as $category) {
            $tag_links = get_tags();
            $tag_list = '<ul>';

            foreach($tag_links as $tag) {
                if ($tag->term_id > 0) { // условие для фильтрации тегов
                    $tag_list .= '<li class="tag"><a href="'.get_tag_link($tag->term_id).'">'.esc_html($tag->name).'</a></li>';
                }
            }
            $tag_list .= '</ul>';

            $items .= '<li class="category"><a href="'.get_category_link($category->term_id).'">' . esc_html($category->name) . ' (' . $category->count . ')</a>' . $tag_list . '</li>';
        }
    }
    return $items;
}

Шаг 3: Визуализация и настройки

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

#menu {
    list-style-type: none;
}

.category {
    margin: 10px 0;
}

.tag {
    list-style-type: none;
    margin-left: 20px;
}

.tag a {
    text-decoration: none;
}

Шаг 4: Тестирование

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

Заключение

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