php - 如何使用 wp_nav_menu 函数在链接之间放置 html 内容

Question

标题几乎说明了一切。我想要做的是能够在我的每个链接之前放置一个自定义元素符号点，除了第一个。有什么办法可以打开 wp_nav_menu();循环并在其中添加内容？

这是我的导航:

<?php wp_nav_menu( array( 'theme_location' => 'head_nav' , 'menu_class' => 'header_nav' ) ); ?>

基本上是这样输出的:

<ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

但我想要这个:

<ul>
    <li><a href="#"></a></li>
    <li><div class="custom_bullet"></div><a href="#"></a></li>
    <li><div class="custom_bullet"></div><a href="#"></a></li>
    <li><div class="custom_bullet"></div><a href="#"></a></li>
</ul>

Answer 1

要制作带圆 Angular 的方形子弹，您需要制作一个方形元素并应用 border-radius。这可以通过伪元素来完成，而不是使用 wp_nav_menu 添加额外的标记。使用 background-color 为元素符号着色。根据需要进行调整。

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  display: inline;
}

ul li::before {
  content: '';
  display: inline-block;
  position: relative;
  top: -1px;
  margin-right: 0.5rem;
  width: 7px;
  height: 7px;
  vertical-align: middle;
  background-color: darkgray;
  border-radius: 2px;
}

ul li:nth-child(1)::before {
  background-color: indianred;
}
ul li:nth-child(2)::before {
  background-color: gold;
}
ul li:nth-child(3)::before {
  background-color: seagreen;
}
ul li:nth-child(4)::before {
  background-color: dodgerblue;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>