Добавить изображение и заголовок к элементам wp_nav_menu

На чтение 5 мин Опубликовано 28.09.2024

Содержание

Вопрос или проблема
Ответ или решение
Шаги для реализации:
Пояснения:
Заключение:

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

Мне очень нравится это решение от Ахмада М, но как мне добавить изображения вместе с заголовками, не заменяя заголовки? (Извините, я все еще довольно нов в PHP и Stackexchange).

Добавление изображений в меню WordPress

В основном, я разобрался. Я использую фильтр Ахмада М, но нужно было добавить “.$menu_object->title” к миниатюре, так что теперь это выглядит так:

$menu_object->title = has_post_thumbnail($menu_object->object_id) ? get_the_post_thumbnail($menu_object->object_id, 'full') .  $menu_object->title .  : $menu_object->title;

Теперь моя задача заключается в том, что я хочу добавить это только к пунктам третьего уровня меню (дочернему элементу дочернего элемента родителя).

Следующий код позволит вам получить миниатюру для третьего уровня вашей навигационной панели. Вы должны передать ID навигационного меню в wp_get_nav_menu_items(). Это даст вам список меню (Дополнительные сведения).

<ul>
    <?php
        $navMenu = wp_get_nav_menu_items(9); /*/Передайте ID или имя навигационного меню*/
        $previousMenuParent = $level = 0;
        foreach ($navMenu as $menu) {

            if($menu->menu_item_parent == 0)
            {
                $level = 0;
                echo '<li><a href="'. $menu->url .'">'. $menu->title .'</a>';
            }
            elseif($menu->menu_item_parent != '' && $menu->menu_item_parent != $previousMenuParent)
            {
                $level++;
                echo '<ul class="submenu">';
                echo '<li><a href="'. $menu->url .'">'. $menu->title .'</a>';
                $previousMenuParent = $menu->menu_item_parent;
            }
            elseif($previousMenuParent == $menu->menu_item_parent)
            {
                echo '</li><li><a href="'. $menu->url .'">';
                if($level == 3)
                {
                    echo get_the_post_thumbnail($menu->ID);
                }
                echo $menu->title .'</a>';
            }
        }
    ?>
    </li>
</ul>

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

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

Шаги для реализации:

Получение элементов меню: Вам необходимо получить элементы меню с помощью функции wp_get_nav_menu_items(), передав ID или имя вашего меню.
Цикл по элементам меню: Вам необходимо пройтись по элементам меню и определить уровень вложенности, чтобы обработать только третьи уровень подменю.
Добавление изображения к заголовку: Используем функцию get_the_post_thumbnail() для получения изображений и добавим их к заголовкам элементов.

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

<ul>
    <?php
        $navMenu = wp_get_nav_menu_items(9); // Замените '9' на ID вашего меню
        $previousMenuParent = $level = 0;

        foreach ($navMenu as $menu) {
            if($menu->menu_item_parent == 0) {
                $level = 0;
                echo '<li><a href="'. esc_url($menu->url) .'">'. esc_html($menu->title) .'</a>';
            }
            elseif($menu->menu_item_parent != '' && $menu->menu_item_parent != $previousMenuParent) {
                $level++;
                echo '<ul class="submenu">';
                echo '<li><a href="'. esc_url($menu->url) .'">'. esc_html($menu->title) .'</a>';
                $previousMenuParent = $menu->menu_item_parent;
            }
            elseif($previousMenuParent == $menu->menu_item_parent) {
                echo '</li><li><a href="'. esc_url($menu->url) .'">';
                if($level == 2) { // Учитываем уровень, так как 0 - родитель, 1 - первый уровень, 2 - второй уровень, 3 - третий уровень
                    echo get_the_post_thumbnail($menu->object_id, 'full'); // Получаем изображение
                }
                echo esc_html($menu->title) .'</a>';
            }
        }
        echo '</li></ul>'; // Закрываем элементы списка и подменю
    ?>
</ul>

Пояснения:

Параметр 9: Замените 9 на ID вашего меню или на его название с помощью wp_get_nav_menu_items('your_menu_name').
Уровень вложенности: Обратите внимание, что в этом примере уровень вложенности контролируется с помощью переменной $level. Мы используем if($level == 2), чтобы удостовериться, что добавляем изображение только для третьего уровня подменю, так как индексация начинается с нуля.
Экранирование: Используем функции esc_url() и esc_html() для безопасного вывода URL и названий элементов меню, чтобы предотвратить возможные XSS-атаки и обеспечить безопасность.

Заключение:

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