arrow_drop_up arrow_drop_down
26 mei 2014 

Maak Je Eigen WordPress Thema - Deel 2

In het vorige deel van deze serie zijn we bezig geweest met het maken van je eigen WordPress thema. Toen we aan het einde waren hadden we een werkend thema die er uit zag zoals de bedoeling was. Helaas kon je nog geen pagina’s en berichten beheren. Vandaag gaan we ervoor zorgen dat je nieuwe thema de pagina’s en berichten weergeeft die in WordPress zijn toegevoegd. Het belangrijkste hiervan is ‘de loop’. Laten we maar snel beginnen.

De loop

De inhoud van een WordPress website wordt weergegeven in ‘de loop’. Deze term zul je nog wel vaker horen. Zo zul je bij de template tags van wordpress soms zien dat er bij staat ‘This tag must be within The Loop’, wat betekent dat hij in de loop moet staan. Als je je hier niet aan houdt kan het zijn dat te functies anders reageren dan je had verwacht. De loop wordt herhaald zolang er berichten zijn die moeten worden weergegeven. Je hoeft de structuur dus maar één keer te maken en WordPress doet het voor elk bericht.

Gebruik van de loop

Om te beginnen open je het index.php bestand. Verwijder alle berichten behalve 1 uit de html, wordpress zal dit voor elke bericht herhalen. Nu gaan we beginnen met de php van de loop.WordPress Loop

De loop bestaat uit 3 regels op te openen en vervolgens 2 om te sluiten. 1 if-statement 1 while statement en 1 functie. Alles wat in alle gevallen moet gebeuren zet je buiten de if-statement. Alles wat eenmalig moet gebeuren, maar alleen in het geval dat er berichten zijn die worden weergegeven, zet je tussen de if en while. Alles wat per bericht moet worden weergegevenzet in binnen de while-loop. Onze code komt er dan als volgt uit te zien.

WordPress Loop

Als je nu naar je website kijkt zie je dat het aantal berichten wel overeenkomt met wat je zou verwachten, alleen de inhoud is bij alle berichten hetzelfde. Nu gaan we zorgen dat de titel en de inhoud worden weergegeven. Op de plek waar de titel moet komen zet je the_title neer en voor de inhoud gebruik je the_excerpt. Op deze manier zorg je ervoor dat niet de hele inhoud, maar slechts een samenvatting wordt toegevoegd. De lees verder link zullen we later op een andere manier aanpassen, dus die kun je voorlopig weghalen. De code ziet er nu zo uit.

WordPress Loop

Meer weten over de loop? Kijk eens op https://codex.wordpress.org/The_Loop

Filters

Zoals beloofd zullen we nu de read more link aanpassen. Standaard breekt wordpressde inhoud af met ‘[…]’, zoals je misschien wel gezien hebt. Dit is natuurlijk zoals wij het graag willen. Voeg de volgende code toe aan functions.php.

WordPress filter excerpt more

Ter verduidelijking:

  • Add filter laat wordpress weten dat je nog iets wilt doen voordat wordpress een bepaalde waarde neerzet. Met excerpt_more laat je weten dat het om het afbreken van de inhoud gaat.
  • De $more variabele is hoe de waarde er nu uitziet. Hier doen we niks mee omdat we het op onze manier willen doen. Deze waarde kan handig zijn als je bijvoorbeeld iets toe wilt voegen.
  • Get_permalink haalt de url naar het huidige bericht op. En esc_url zorgt ervoor dat het een valide url is.

Als je meer wilt weten over filters, de permalink of data validatie kijk op: http://codex.wordpress.org/Plugin_API/Filter_Reference http://codex.wordpress.org/Function_Reference/get_permalink https://codex.wordpress.org/Data_Validation Zoals je ziet als je nu op de lees meer link klikt veranderd er niet veel aan de pagina. De inhoud wordt niet eens helemaal weergegeven. Dit komt omdat je nog steeds naar index.php wijst en daar staat dat de ‘excerpt’ moet worden weergegeven. Om dit te verhelpen moeten we een single.php template aanmaken, maar voor we dat doen gaan we aan het werk met header.php en footer.php.

Header.php

Om te zorgen dat je bij meerdere templates de header overal hetzelfde is gaan we de header.php template gebruiken. Gebruik is heel makkelijk, kopieer alles wat hetzelfde moet blijven naar het bestand header.php en zet in plaats daarvan ‘<?php get_header(); ?> neer. Dus knip alles van bovenaan index.php tot vlak voor de comment ‘CONTENT AREA’ en plaats dat in header php.

WordPress function get_header

Footer.php

Wat je voor header.php hebt gedaan geldt ook voor footer.php. Je wilt dat je footer overal hetzelfde blijft. Maak hiervoor footer.php, en plak alles wat hetzelfde mloet blijven daar in. In de demo is dat vanaf de comment FOOTER AREA tot het einde van het document.

WordPress function get_footer

Single.php

Nu kunnen we verder met het maken van de template voor een enkel bericht. Maak hiervoor het bestand single.php aan en voeg alvast get_header en get_footer toe. Kopieer nu het content gedeelte van artikel.html en plak het tussen de get_header en get_footer. Om het artikel weer de juiste inhoud weer te laten geven moet je weer de loop gebruiken. Eigenlijk doe je precies hetzelfde als met index.php, je plaatst het artikel in de loop en vervangt de titel en de inhoud door functies. Deze keer moet je niet the_excerpt gebruiken maar the_content omdat je nu wel de hele inhoud wilt weergeven.

WordPress single template

Zoals je ziet is hier geen text aan toegevoegd die aangeeft dat er geen berichten zijn gevonden. Dat komt omdat wanneer er geen berichten zijn deze template niet geladen zal worden. Als je naar een enkel bericht gaat die niet bestaat zal de 404 pagina het overnemen.

Navigatie

Als afsluiter van deel 2 van dit artikel gaan we het menu nog aanpassen. Deze bestaat nu nog uit HTML code en als je er op klikt dan krijg je een 404 error of zie je dat er geen berichten zijn. Hiervoor moet je 2 dingen doen. Het hoofdmenu registreren en een plaats kiezen voor wordpress om het menu te plaatsen. We beginnen met het eerste.

Het menu registreren

Het registreren gaat heel makkelijk. Dit doe je met 1 regel in functions.php. Deze functie zorgt dat je een menu kan aanmaken en kan koppelen aan de locatie Hoofdmenu. De eerste parameter gebruik je zodalijk om de locatie te bepalen.

WordPress functie register_nav_menu

Meer hierover: http://codex.wordpress.org/Function_Reference/register_nav_menu

Menu plaatsen

Om het menu een plekje te geven gebruik je wp_nav_menu. Ga naar header.php en verwijder het menu. Voeg nu wp_nav_menu toe zoals onderstaand voorbeeld:

WordPress functie wp_nav_menu

Zoals je kan zien worden er wel wat waardes aan wp_nav_menu meegegeven.

  • Theme_location: hiermee geef je aan welk menu er op die plek moet komen. In dit geval het hoofdmenu.
  • Container: hier kun je mee bepalen of er een div of nav of helemaal niks om de ul heen komt. In dit geval een nav.
  • Container_class:  de class die bovenstaande container mee krijgt. Bij de demo is dit menu.
  • Menu_class: de class die de ul van het menu mee krijgt. Wij willen graag dat hij left mee krijgt.
  • Fallback_cb: Deze zal misschien de meeste verwarring veroorzaken. Hiermee kun je bepalen wat er moet gebeuren als het menu niet is gevonden. Standaard zal wordpress de functie wp_page_menu uitvoeren. Omdat we in dit geval niet willen dat er iets komt te staan kun je dit uitzetten door false mee te geven.

Er zijn nog een stuk meer waardes waarmee je de weergave van het menu kunt aanpassen. Voor de volledige lijst en verdere uitleg moet je even kijken op: http://codex.wordpress.org/Function_Reference/wp_nav_menu

Conclusie

In dit artikel zijn we alweer een stuk verder gekomen. Je kunt nu berichten toevoegen en ze weergeven zoals jij het wilt. Ook het menu is nu een weergave van de aanwezige pagina’s. Wat je waarschijnlijk nog gemist hebt is de mogelijkheid om pagina’s anders weer te geven. Dit werkt ongeveer hetzelfde als berichten maar dan met page.php.  Ook de titel tussen de head-tags is nog statisch. Hier gaan we volgende keer mee verder en we zullen gaan kijken naar de sidebar en widgets.

Over de schrijver
Ik ben Peter Padberg en ik ben eigenaar en webdeveloper bij IT Starts With Coffee, een jong en dynamisch bedrijf. Bij ons begint het met een kop koffie en eindigt het altijd met een website met karakter. Dàt is ons motto. We leveren producten die er niet alleen mooi uitzien, maar die ook functioneel en makkelijk te beheren zijn. Daarvoor gebruiken we WordPress en maken we onze eigen premium thema's en plugins. Naast het ontwikkelen van WordPress thema's en plugins vind ik het leuk om nieuwe dingen uit te zoeken en nieuwe kennis op te doen over PHP, Javascript en jQuery.
Hugo
Door

Hugo

op 9 November 2014

Mooie tutorial! Alleen vraag over de "readmore" optie. Als ik mijn permalink verander naar postname of iets dergelijks dan werkt hij niet meer. Hoe kan ik dat voorkomen? Groet, Hugo

Reactie plaatsen