arrow_drop_up arrow_drop_down
19 juni 2014 

Maak Je Eigen WordPress Thema – Deel 3

In de vorige lessen hebben we een begin gemaakt aan je eigen WordPress thema, er voor gezorgd dat de website beheerbaar is en dat je een blog kunt gebruiken. Vandaag gaan we de basis afronden. Dat doen we door de titel van de website dynamisch te maken en de sidebar functionaliteit te benutten. Ook gaan we de pagina template maken waardoor we naast het blog ook een informatieve website hebben.

Dynamische website titel

Zoals je misschien al wel gezien had staat er als website titel, bovenin de browser, bij elke pagina ‘Blog | Zelf een WordPress Thema maken’. Tenminste als je de demo bestanden hebt gebruikt. De website titel past zich in ieder geval nog niet aan aan de pagina. Dit gaan we nu heel eenvoudig aanpassen.

Ga naar het bestand header.php en zoek naar de <title> tag. De text tussen deze tags wil je veranderen in  een stukje php met een functie van wordpress. De functie daarvoor is wp_title en, om de website titel erachter te zetten, get_bloginfo. Het ziet er dan zo uit

Maak je eigen wordpress thema - dynamische-titel

De parameters bij wp_title zorgen voor het volgende:

  • Seperator: wat moet er voor of na de titel komen? In dit geval ‘ | ‘.
  • Display: moet de titel meteen worden weergegeven? We gebruiken al een echo waarmee we de titel weergeven dus dat is niet nodig.
  • Side: aan welke kant moet de seperator komen?  Die willen we graag aan de rechter kant hebben.

Vervolgens plakken we get_bloginfo er aan vast. Deze functie haalt de algemene titel van de website op. En zo zorgen we ervoor dat de titel zich aanpast aan de weergegeven pagina.

Pagina template

Zoals gezegd, in de vorige les en de inleiding, worden pagina’s nu hetzelfde weergegeven als blog posts. Het zou kunnen dat dit goed genoeg is maar in de meeste gevallen wil je dat pagina’s er anders uitzien. Hiervoor maken we een nieuw bestand aan, page.php.

Net zoals index.php en single.php beginnen we bij page.php ook met het ophalen van de header en footer. Dit is immers wel gewoon overal hetzelfde.

Maak je eigen wordpress thema - begin page

Nu gaan we even terug naar de HTML bestanden. Open een html bestand die een pagina weergeeft. Kopieer nu alle inhoud hiervan die niet in de header of footer voorkomt en zet dat tussen de get_header en get_footer functies van page.php.

Nu lijkt het wel op een pagina maar is het helaas weer niet beheerbaar. Daarvoor moeten we ‘de loop’ nog inbouwen. Vervang alles inhoud die door wordpress moet worden beheerd en plaats de loop. Dat ziet er zo uit.

Maak je eigen wordpress thema - page loop

Nu ziet de pagina eruit zoals je verwacht en is de inhoud volledig beheerbaar.

Sidebar

Er is nu nog 1 ding in de website die niet beheerbaar is. En dat de sidebar. Als je naar je blog gaat zie je dat er wel een sidebar maar deze werkt nog niet met WordPress. Daar gaan we als laatste verandering in brengen.

Als je index.php en single.php opent zie je dat daar allebei apart een sidebar in staat. Dit is het eerste wat we gan veranderen. Kopieer de HTML die verantwoordelijk is voor de sidebar. Maak een nieuw bestand sidebar.php  en plak de HTML hier in. Verander nu in zowel index.php als single.php de HTML voor de sidebar in een stukje PHP, namenlijk de functie get_sidebar. Het komt er dan zo uit te zien.

Maak je eigen wordpress thema - get-sidebar

Oke dat nu staat het op 1 plek, maar het is nog steeds slecht beheerbaar. Goed gezien, laten we daar wat aan doen.

Voordat we een sidebar kunnen gebruiken moeten we die eerst registreren. Dat gaat ongeveer op dezelfde manier als het menu. Open functions.php en voeg de functie register_sidebar toe. Deze functie kun je gebruiken zonder opties mee te geven, maar om te zorgen dat de structuur er zo uit komt te zien als we het nu hebben geven we toch wat mee. Dit ziet er zo uit:

Maak je eigen wordpress thema - register sidebar

  • Name: De naam die in het beheerscherm te zien is, zodat je weet om welke sidebar het gaat als er meerdere zijn.
  • Id: Een uniek ID die we gebruiken om aan te geven waar deze sidebar moet komen.
  • Before_widget: De HTML die voor elke widget komt. Voornamenlijk handig om de opmaak ervan aan te passen.
  • After_widget: De HTML die nodig is om alles wat geopend is bij before_widget weer te sluiten.
  • Before_title: Hetzelfde als before_widget maar dan voor de titel.
  • After_title: hetzelfde als after_widget maar dan na de titel.

Meer informatie over register_sidebar vind je op https://codex.wordpress.org/Function_Reference/register_sidebar

Als je nu naar het beheer scherm gaat vind je onder weergave het kopje widgets. Hier kun je nu widgets aan je sidebar toevoegen. De widgets worden alleen nog niet weergegeven. Dat is de laatste stap die we moeten doen.

Open sidebar.php en verwijder alles wat daar in staat. In plaats daarvan komt er een stukje PHP waardoor wordpress alle widgets daar zelf in zet. Dat dtukje code ziet er zo uit:

Maak je eigen wordpress thema - dynamic sidebar

Zoals je ziet gebruik je nu het id wat je zojuist bij het registreren aan de sidebar hebt gegeven. Meer informatie over dynamic_sidebar vind je op https://codex.wordpress.org/Function_Reference/dynamic_sidebar

Conclusie

Dit is het einde van deze les en helaas ook de serie. In 3 lessen heb je een volledig werkend wordpress thema gebouwd. Je eerste eigen thema. Natuurlijk biedt WordPress nog veel meer functionaliteit en mogelijkheden die we nu niet gebruikt hebben. Helaas gaat dit te ver voor deze serie, maar er zijn genoeg mogelijkheden om daar wel achter te komen als je het interessant vindt. Als er nog vragen zijn over wat we in de lessen hebben besproken kun je die kwijt in de reacties. Veel succes met verder ontwikkelen van je thema!

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.
Reactie plaatsen