在图块中设置菜单（Wordpress、html、php、bootstrap 4、flex）答案

【问题标题】：Setting the menu in tiles (Wordpress, html, php, bootstrap 4, flex)在图块中设置菜单（Wordpress、html、php、bootstrap 4、flex）
【发布时间】：2018-12-31 20:54:18
【问题描述】：

我想制作一个菜单，使菜单中的每个项目都是一个单独的图块look attachment

有可能吗？我已经有代码了：

 <?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？请帮忙。问候

【问题讨论】：

标签： php wordpress menu flexbox bootstrap-4

【解决方案1】：

使用wp_nav_menu的before和after属性，这里是更新后的代码

<?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>

然后您可以轻松地为“我的班级”添加背景。

【讨论】：