标题几乎说明了一切。我想做的是能够在我的每个链接之前放置一个自定义项目符号点,除了第一个。有没有办法打开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>
答案 0 :(得分:2)
要制作带圆角的方形子弹,请制作方形元素并应用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>
答案 1 :(得分:0)
答案 2 :(得分:-1)
您可以通过Wordpress向每个li
添加课程。
方法如下:https://presscustomizr.com/snippet/adding-css-classes-wordpress-menu/
这样您就可以添加所需的class="custom_bullet"
。
另外,正如hungerstar所提议的,:before
可以做到这一点