Как реализовать нестандартное меню в вордпресс?

Question

[Сергей Бурдужа]

У меня есть такое меню


Вот код отдельного элемента меню


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

Если сделать стандартным способом, то как добавить картинку для меню? И код не соответствует ul с li.

Вот ссылка на сайт test.webforworld.info/Transcargo

Это не рабочий проект, а первый учебный.

Что посоветуете?

Comments

[CODALSD]

Вам нужно поменять разметку. Слишком сложная структура

<ul>
  <li>
    <a href="#"><img src="#"></a>
    <h3></h3>
    <a href="#">Я ссылка</a>
  </li>
</ul>

[Сергей Бурдужа]

CODALSD, Понятно, когда верстал, не думал, что буду натягивать на worpdress.
А как из админки добавить картинку и заголовок?

[Dymok]

Сергей Бурдужа, может стоит сделать отдельный тип постов для этого?

[CODALSD]

А это уже зависит от того, откуда берутся данные (страница, пост, или произвольное поле).

[Сергей Бурдужа]

Dymok, Я просто не могу понять, как сделать правильные ссылки для меню.

[Сергей Бурдужа]

CODALSD, Ссылку на сайт добавил в шапку, извините, сразу не сообразил.

[Сергей Бурдужа]

Dymok, Добавил ссылку на сайт в шапку

[CODALSD]

1. самый легкий вариант: Сделайте статично и пропишите ссылку вручную
2. Циклом выводите страницы. Тут подробнее про циклы https://wp-kama.ru/id_767/3-sposoba-postroeniya-ts...
3. С помощью плагинов создаете произвольное меню с контентом или произвольные типы постов

[Сергей Бурдужа]

CODALSD, Про циклы и произвольный тип записей я знаю. Уже подумал об этом. Проблема кроется в том, как передать в произвольные поля правильный адрес для страницы?
То есть, тут нужно будет прописать вручную.
Это тоже вариант.

Я вот, что подумал. Можно фильтровать элементы меню nav_menu_item_args.
Только как передать title и картинку в элементы меню? Если бы можно было через shortcode?
Просто я хочу все автоматизировать, а не прописать вручную. Хотя вариант, что выше тоже подходит.
Я все же попробую через фильтры.

[CODALSD]

вам нужно вывести не меню!
а список страниц и оттуда уже нужные поля.

[Сергей Бурдужа]

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

Я вот, что накопал.
Оказывается можно задавать title и description для элементов меню


А потом отфильтровать эти данные, и сформировать новую разметку.

[CODALSD]

<?php the_permalink(); ?>
Чем вас не устраивает?

[Сергей Бурдужа]

CODALSD, Точно, чего вы раньше не сказали?
Сейчас попробую, потом отпишусь.

Answer 1

[Сергей Бурдужа]

Решил проблему следующим образом

add_filter( 'nav_menu_link_attributes', 'filter_function_name_3020', 10, 4 );
function filter_function_name_3020( $atts, $item, $args, $depth ){
    $img = $item->description;
    $link = $atts['href'];

    if ( $args->theme_location == 'index-menu' ) {
        $args->link_before = '
                    <div class="main-item">
                        <div class="img-wrap">
                            <a href="'.$link.'">
                                <div class="img-inner">
                                    <img src="'.$img.'" alt="img">
                                </div>
                            </a>
                        </div>
                        <h3 class="main-title">';
        $args->link_after = '</h3>
                        <a href="'.$link.'" class="home-button button-red">View Page</a>';
    }

    return $atts;
}

В меню в поле description прописал путь до картинке из медиафайлов


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

Comments

[Игорь Воротнёв]

Не надо никаких произвольных типов записи, посмотрите Walker_Nav_Menu

[Сергей Бурдужа]

Игорь Воротнёв, Спасибо, обязательно посмотрю. Только на этот раз я использовал фильтры, и заработало.

[Игорь Воротнёв]

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

[Сергей Бурдужа]

Игорь Воротнёв, В следующий раз воспользуюсь вашим советом. Это у меня учебный пример.