Wie HTML-Inhalt zwischen Links mit der wp_nav_menu-Funktion

Question

setzen Der Titel sagt so ziemlich alles. Was ich tun möchte, ist in der Lage, einen benutzerdefinierten Aufzählungspunkt vor jedem meiner Links, abgesehen von dem ersten, zu platzieren. Gibt es eine Möglichkeit, das wp_nav_menu() zu öffnen; Schleife und fügen Sie dort Inhalt hinzu?

Das ist mein nav:

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

Es ist im Grunde eine Ausgabe wie folgt aus:

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

aber ich möchte dies:

<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

Um Platz Kugeln mit abgerundeten Ecken Sie und gelten machen ein quadratisches Element border-radius . Dies kann mit Pseudoelementen erreicht werden, anstatt zusätzliches Markup mit wp_nav_menu hinzuzufügen. Male die Kugeln mit background-color. Nehmen Sie Anpassungen nach Bedarf vor.

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

Sie hinzufügen Klassen zu jedem li durch Wordpress. So geht's: https://presscustomizr.com/snippet/adding-css-classes-wordpress-menu/

Auf diese Weise können Sie die class="custom_bullet" hinzufügen, die Sie benötigen.

Auch als hungerstar vorgeschlagen, kann :before der Trick

Answer 3

Sie können "vor" verwenden: https://developer.wordpress.org/reference/functions/wp_nav_menu/

wp_nav_menu( 
    array( 
     'theme_location' => 'head_nav', 
     'menu_class' => 'header_nav', 
     'before' => '<div class="custom_bullet"></div>' 
    ) 
);