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

Question

标题几乎说明了一切。我想做的是能够在我的每个链接之前放置一个自定义项目符号点，除了第一个。有没有办法打开wp_nav_menu（）;循环并在那里添加内容？

这是我的导航：

Vimux/Mainroad

基本上输出如下：

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

Answer 1

要制作带圆角的方形子弹，请制作方形元素并应用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>

Answer 2

您可以使用“之前”： https://developer.wordpress.org/reference/functions/wp_nav_menu/

SVG

Answer 3

您可以通过Wordpress向每个li添加课程。 方法如下：https://presscustomizr.com/snippet/adding-css-classes-wordpress-menu/

这样您就可以添加所需的class="custom_bullet"。

另外，正如hungerstar所提议的，:before可以做到这一点