WordPress – Menu met span elementen opzetten
Ken je dat obstakel ook, PSD bestanden die mooi lijken te zijn opgezet in (X)HTML/CSS en cross-browser netjes, maar dan komt de stap om alles naar een WordPress theme op te zetten. Opzich hoeft dit geen probleem te zijn, maar wat nu als het menu een <span> element bevat, dat zit niet standaard in een dynamisch WordPress menu. Een WordPress menu straalt simplicity uit, minder code == betere vindbaarheid. Maar wat nu als het menu element echt een <span> element moet bevatten, omdat er bijvoorbeeld een achtergrond 100% variabel getoond moet worden.
<ul id="menu-hoofdmenu"> <li class="current_page_item"><a href="/">Home</a></li> <li><a href="/contact">Contact</a></li> </ul>
(X)HTML/CSS WordPress-ready maken
Na het A HREF element komt een <span>, althans zo zijn onze HTML files wel opgezet, prima HTML/CSS alleen niet WordPress-Ready. Dit moet het eindresultaat worden:
<ul id="menu-hoofdmenu"> <li class="current_page_item"><a href="/"><span>Home</span></a></li> <li><a href="/contact"><span>Contact</span></a></li> </ul>
jQuery en .each + .wrapAll
Eerst even de latest jQuery library in de sectie van je theme toevoegen. Vlak daaronder zetten we dit kleine stukje jQuery code:
<script type="text/javascript"> $(document).ready(function(){ $("#menu-hoofdmenu > li a").each(function() { $(this).contents().wrapAll("<span>"); }); }); </script>
