wordpress navigatie

[rickcure]

Ik heb een site gebouwd in html/css, en wil er nu een wordpress theme van maken. Opzich geeft dat niet zoveel problemen met de nodige tutorials, maar bij alle tutorials die ik kan vinden wordt er gewoon tekst gebruikt als navidatie, dus gewoon getypt:

home product verkoop media contact

Nu heb ik in dreamweaver een navigationbar gemaakt met afbeeldingen als buttons, dus wanneer er met de muis overheen gegaan wordt veranderd de kleur en ook als je er op klikt. (zie bijgevoegde afbeelding voor verduidelijking).

Nu weet ik niet hoe ik dit moet coderen in php om er een goed werkende navigatie in wordpress van te maken.

Kan iemand mij hierbij helpen?

Code:

<div id="menu">
    <a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','homebutton','images/layoutopnieuwgesliced_07.jpg',1)" onmouseover="MM_nbGroup('over','homebutton','images/layoutopnieuwgesliced_07.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="buttons/homebutton.jpg" alt="home" name="homebutton" width="114" height="30" border="0" id="homebutton" onload="" /></a><img src="images/layoutopnieuwgesliced_08.jpg" width="7" height="30" /><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','productbutton','images/layoutopnieuwgesliced_09.jpg',1)" onmouseover="MM_nbGroup('over','productbutton','images/layoutopnieuwgesliced_09.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="buttons/productbutton.jpg" alt="product" name="productbutton" width="114" height="30" border="0" id="productbutton" onload="" /></a><img src="images/layoutopnieuwgesliced_10.jpg" width="7" height="30" /><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','verkoopbutton','images/layoutopnieuwgesliced_11.jpg',1)" onmouseover="MM_nbGroup('over','verkoopbutton','images/layoutopnieuwgesliced_11.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="buttons/verkoopbutton.jpg" alt="verkoop" name="verkoopbutton" width="114" height="30" border="0" id="verkoopbutton" onload="" /></a><img src="images/layoutopnieuwgesliced_12.jpg" width="7" height="30" /><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','mediabutton','images/layoutopnieuwgesliced_13.jpg',1)" onmouseover="MM_nbGroup('over','mediabutton','images/layoutopnieuwgesliced_13.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="buttons/mediabutton.jpg" alt="media" name="mediabutton" width="114" height="30" border="0" id="mediabutton" onload="" /></a><img src="images/layoutopnieuwgesliced_14.jpg" width="7" height="30" /><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','contactbutton','images/layoutopnieuwgesliced_15.jpg',1)" onmouseover="MM_nbGroup('over','contactbutton','images/layoutopnieuwgesliced_15.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="buttons/contactbutton.jpg" alt="contact" name="contactbutton" width="114" height="30" border="0" id="contactbutton" onload="" /></a></div>

Screenshot:

http://img180.imageshack.us/img180/1007/foto20090908192238.jpg

 

[ginocolada]

Menu structuur in Wordpress

De menu structuur in Wordpress gaat op de volgende manier:

<ul id="pages">
<?php wp_list_pages('title_li=&sort_column=post_title&sort_order=desc&depth=1' ) ?>
				</ul>

Vervang deze code door je eigen pagina's in de header.php of index.php. Er zijn meerdere manieren om het menu te ontwerpen, gebruik een programma zoals firebug om meer inzicht te krijgen in je code.

Mvg, Gino