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;
}

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

1 个答案: