Ik zocht eigenlijk al een tijd naar een techniek om navigatie in WordPress websites voor bedrijven, te hardcoden. Met hardcoden bedoel ik dus dat je het dynamisch via je CMS niet kan aanpassen. De reden dat ik dit liever zo had, komt door het feit dat je de laadtijd van je WordPress website kan verminderen als je minder queries uit je database oproept. Daarnaast gebruik je ook minder CPU, wat dus tweemaal zo voordelig is als je de navigatie gewoon in de code plaatst.
Navigatie bouwen en linken aan de pagina’s is gewoon pannenkoek. Om ervoor te zorgen dat de knopjes gaan branden als je op de desbetreffende pagina staat, dat was wel een probleem. Gelukkig vond ik uiteindelijk een artikel op WordPress zelf, waarin dit alles mooi is uitgelegd.
Zie:
Voor mij heeft methode twee het beste gewerkt. Als je navigatie is geplaatst in een div genaamd navigatie (dus #navigatie), plaats dan in je CSS bijvoorbeeld:
#navigatie .current
{
background-color: #336699;
}
Dit is in tegenstelling tot wat in de documentatie van WordPress staat, maar dit doe je alleen zodat hij de juiste waardes die je opgeeft voor .current gelijk oppakt.
In de navigatie zelf, vervang dit:
echo " id=\"current\"";
Naar:
echo " class=\"current\"";
Een navigatie als die van hieronder:
<div id="navigatie"> <ul> <li ><a class="" href="#">Over ons</a></li> <li ><a class="" href="#">Diensten</a></li> </ul> </div>
Schrijf je als:
<div id="navigatie">
<ul>
<li<?php
if (is_page('2'))
{
echo " class=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>/?page_id=2">Over ons</a>
</li>
<li<?php
if (is_page('6'))
{
echo " class=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>/?page_id=6">Diensten</a>
</li>
</ul>
</div>
Dat is voor het geval je met page_id’s werkt, anders gewoon vervangen de pagina slug.
Daarnaast als je wilt kan je <?php bloginfo(‘url’) ?> ook vervangen met je domein, voorbeeld http://www.navinpoeran.com.
Veel succes hiermee, suggesties, feedback, ideeën, van harte welkom.
Ik heb trouwens gebruik gemaakt van de Syntax highligher WordPress plugin, om de codes duidelijk aan te geven.
If you enjoyed this post, make sure you subscribe to my RSS feed! Relevante items