Настройка меню в тайлах (WordPress, html, php, bootstrap 4, flex)

Question

Настройка меню в тайлах (WordPress, html, php, bootstrap 4, flex)

Я хотел бы сделать меню таким образом, чтобы каждый элемент в меню был отдельной плиткой смотреть вложение

Возможно? У меня уже есть код:

 <?php

$my_menu = array(
'menu' => 'menu-oferta',
'container' => 'padding-offer',
'items_wrap' => '%3$s'

);

wp_nav_menu( $my_menu );

?>

Благодаря этому я смог сгенерировать такой код:

<li>
<a href=""> link 1 </a>
</li>

<li>
<a href=""> link 2 </a>
</li>

<li>
<a href=""> link 3 </a>
</li>

<li>
<a href=""> link 4 </a>
</li>

но проблема в том, что эти плитки соединяются друг с другом, и я не могу разделить их, используя PADDING. Вот почему я хочу, чтобы мое меню выглядело так:

<div class="my-class">
<li>
<a href=""> link 1 </a>
</li>
</div>

<div class="my-class">
<li>
<a href=""> link 2 </a>
</li>
</div>

<div class="my-class">
<li>
<a href=""> link 3 </a>
</li>
</div>

<div class="my-class">
<li>
<a href=""> link 4 </a>
</li>
</div>

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

0

bootstrap-4 flexbox menu php wordpress

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Используйте до и после свойства wp_nav_menu, вот обновленный код

<?php
$my_menu = array(
'menu' => 'menu-oferta',
'container' => 'padding-offer',
'items_wrap' => '%3$s',
'before' => '<div class="my-class">',
'after' => '</div>'
);
wp_nav_menu( $my_menu );

?>

Итак, ваш код будет выглядеть так:

<li>
<div class="my-class">
<a href=""> link 1 </a>
</div>
</li>
<li>
<div class="my-class">
<a href=""> link 2 </a>
</div>
</li>
<li>
<div class="my-class">
<a href=""> link 3 </a>
</div>
</li>
<li>
<div class="my-class">
<a href=""> link 4 </a>
</div>
</li>

тогда вы можете легко добавить фон в «мой класс».

0