Sliding Doors und wp_nav_menu

Tocki

Hallo alle!

Hat jemand schon Erfahrungen mit dem seit Wordpress 3.0 möglichen Menü und einem CSS mit Sliding Doors?

Bisher war es ja möglich in selbst gebastelte Menüs, die man mit wp_list_categories gebaut hat die nötigen <span>-Tags einzubauen. Wie geht das aber mit den neuen und absolut zu bevorzugenden Wordpress Menüs?

Wordpress macht aus diesem Code:

PHP

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'hauptnavi' ) ); ?>

in etwa das hier:

HTML

<div class="menu-header">
	<ul id="menu-hauptnavigation" class="menu">
		<li id="menu-item-4" class="menu-item"><a href="#">Haupt 1</a></li> 
		<li id="menu-item-5" class="menu-item"><a href="#">Haupt 2</a></li> 
		<li id="menu-item-6" class="menu-item"><a href="#">Haupt 3</a></li> 
	</ul>
</div>

Ich hab irgendwie keine Chance da ein span einzufügen. Oder?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

spickzettel

Wie wär's mit den Parametern $before und $after, die in der Dokumentation erwähnt werden?

Zitat

$before
(string) (optional) Output text before the <a> of the link
Default: None
$after
(string) (optional) Output text after the <a> of the link
Default: None

Tocki

Hi spickzettel!

Oh cool, das könnte gehen. Probier ich gleich mal aus.
Danke!

cebito

Meinst du mit sliding doors runde Ecken? Die lassen sich direkt mit css3 erstellen. Wenn es aber Bilder sein sollen, kannst du before und after auch direkt per css beeinflussen.

Code

#menu-hauptnavigation li{position:relative;padding:10px;}
#menu-hauptnavigation li:before, #menu-hauptnavigation li:after, #menu-hauptnavigation li a:before, #menu-hauptnavigation li a:after{content:'';position:absolute;width:10px;height:10px;}
#menu-hauptnavigation li:before{background:url(oli.jpg);top:0;left:0;}
#menu-hauptnavigation li:after{background:url(ore.jpg);top:0;right:0;}
#menu-hauptnavigation li a:before{background:url(uli.jpg);bottom:0;left:0;}
#menu-hauptnavigation li a:after{background:url(ure.jpg);bottom:0;right:0;}

Tocki

Hui, auch cool.
Danke!

Tocki

Der Tipp von cebito ists geworden.

Danke Euch beiden!
t.

herrfischer

das mit dem ":before" checken aber der ie6 und ie7 nicht. warum nicht sowas:

PHP

<?php wp_nav_menu(
                    array(
                        'menu' => 'Top-main',
                        'container_id' => 'menu',
                        'link_before' => '<span>',
                        'link_after' => '</span>',
                    )
                );
?>

dann habe ich

li > a und in dem a ein schönes span

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Sliding Doors und wp_nav_menu

Jetzt mitmachen!