php - 在自定义菜单wordpress中添加样式图像

Question

我是 wordpress 的初学者，正在创建我的第一个主题。我被困在一个地方。在我的静态 html 中，我使用列表中的图像来设置导航样式。我能够在 wordpress 中进行动态导航，但我无法将我的图像动态地放入 li 中。

我的导航静态代码在这里

    <ul>
      <li class="li_img"><img src="imgs/line-img.png" /></li>
      <li class="li_txt"><a href="#">Home</a></li>
      <li class="li_img"><img src="imgs/line-img.png" /></li>
      <li class="li_txt"><a href="#">About</a></li>
      <li class="li_img"><img src="imgs/line-img.png" /></li>
      <li class="li_txt"><a href="#">Archives</a></li>
      <li class="li_img"><img src="imgs/line-img.png" /></li>
      <li class="li_txt"><a href="#">Write for Us</a></li>
      <li class="li_img"><img src="imgs/line-img.png" /></li>
      <li class="li_txt"><a href="#">Sitemap</a></li>
      <li class="li_img"><img src="imgs/line-img.png" /></li>
      <li class="li_txt"><a href="#">Contact</a></li>
      <li class="li_img"><img src="imgs/line-img.png" /></li>
    </ul>

我怎样才能动态地得到这个的替代品

   <li class="li_img"><img src="imgs/line-img.png" /></li>

Answer 1

如果可以，我会避免以这种方式设置菜单项的样式。为边框/分隔符图像使用单独的 li 会破坏 HTML/CSS 关系的目的。可以将 line-img.png 应用于 li 元素的背景吗？

你在菜单中使用 wp_nav_menu() 吗？它应该生成类似于以下的代码:

<ul class="menu">
    <li id="menu-item-1" class="menu-item">Menu Item</li>
</ul>

您可以将上面的样式设置为:

.menu-item {
    background: url(imgs/line-img.png) no-repeat right center;
}