在Cutom菜單中添加樣式圖像

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