Het begin van je WordPress thema
Door Jasper Denkers van Developtheweb.nl
In het tweede deel van de minicursus waarin je WordPress thema’s leert maken, gaan we daadwerkelijk beginnen met het maken van een thema. We gaan hiervoor de html opsplitsen. Maar voordat we dat gaan doen, gaan we eerst een map aanmaken waarin we het thema gaan plaatsen.
Een map voor het thema
Bij het maken van een WordPress thema heb je een WordPress website nodig waarop je het thema kunt testen. Om een thema aan te maken maak je eerst een nieuwe map aan in de themes map van WordPress. Geef deze map de naam die je het thema wilt geven.
In bovenstaande afbeelding is dit gedaan in Filezilla. De map heeft de naam van het thema gekregen: voorbeeldthema.
Open nu de map en voeg er twee bestanden toe: style.css en index.php. Dit zijn de twee bestanden die minimaal nodig zijn om een thema te maken.
Style.css
Open nu het stijlblad, style.css. De eerst regels van het stijlblad moeten informatie over het thema bevatten. Dit doe je op de volgende manier:
/* Theme Name: Voorbeeld Thema Theme URI: http://www.websitevanthema.nl Description: Beschrijving van het thema. Author: Maker van het thema Author URI: http://www.websitevanmaker.nl Version: 1.0 Tags: tags, waarmee, het, thema, gevonden, kan, worden License: Soort licentie License URI: URL waar informatie over de licentie gevonden kan worden Eventuele andere opmerkingen die niet worden weergegeven. */
De gegevens die je hier invult zul je terugzien in het thema overzicht in WordPress onder het menu-item Appearance. Deze informatie wordt ook weergegeven in de zoekresultaten van WordPress als je het thema instuurt.
Voeg naast de bovenstaande gegevens ook de CSS van de voorbeeldpagina toe. We laten de HTML nu nog even voor wat het is en gaan meteen het resultaat bekijken.
WordPress thema testen
Open nu in het WordPress menu het item Appearance. Zoals je ziet vind je hier nu je thema terug, met de informatie die je hebt opgegeven in style.css.
Activeer het thema. Als dit goed gaat, zul je zien dat wanneer je een onderdeel van je website opent een witte pagina wordt weergegeven. Dit is logisch, index.php wordt gebruikt voor de weergave en hier staat nog niks in. Daar gaan we nu verandering in brengen.
De Index.php
Zoals eerder al besproken, is index.php het meest algemene bestand om pagina’s weer te geven in WordPress. We gaan nu de volledige HTML code van de voorbeeldpagina naar index.php kopiëren. Sla index.php op en bekijk het resultaat. Je zult zien dat er nu wél iets wordt weergegeven, alleen nog zonder de inhoud van je website en zónder opmaak.
De link naar het stijlblad
Het stijlblad bevindt zich in de map van het thema. WordPress heeft een speciale PHP functie waarmee je hier naar kunt verwijzen. Vervang de regel waarin je het stijlblad toevoegt:
Naar de volgende regel:
Er wordt gebruik gemaakt van de ‘bloginfo()’ functie van WordPress. Met deze functie kun je verschillende informatie over je thema opvragen. Hier wordt hij gebruikt om de locatie van het stylesheet op te vragen.
Sla index.php opnieuw op en bekijk het resultaat. Zoals je ziet wordt het stijlblad nu wel gevonden en wordt de pagina inclusief de CSS opmaak weergegeven.
Omdat je later meerder themabestanden hebt waar sommige delen code, bijvoorbeeld van een header, terugkomen, gaan we de code in aparte bestanden opsplitsen en opslaan.
Header.php, footer.php en sidebar.php
In WordPress is het gebruikelijk om de bestanden header.php, footer.php en sidebar.php te gebruiken. Deze worden respectievelijk voor de header, het deel van de pagina voor de inhoud, voor de footer, het deel na de inhoud van een pagina en voor de sidebar gebruikt.
Maak nu in de map van het thema de drie bestanden header.php, footer.php en sidebar.php aan.
De volgende stap is het knippen van de stukken code naar de drie bestanden. Het deel wat in header.php moet komen is alles vanaf het begin van de HTML code tot aan waar de inhoud van een pagina begint.
Voor de voorbeeld pagina die we gebruiken is dat dus het volgende stuk code:
WordPress Voorbeeldthema WordPress Voorbeeldthema
Een voorbeeld WordPress thema
Entry in WordPress
In WordPress is het gebruikelijk de inhoud van een pagina, die per pagina verschillend is, de naam ‘entry’ te geven. Zo noemen we bijvoorbeeld een pagina of artikel. De div met id ‘entry’ plaatsen we dus niet in de header, omdat deze bij de inhoud hoort.
Knip het bovenstaande stuk code uit index.php en plaats het in header.php.
Hetzelfde doen we voor sidebar.php en footer.php.
Sidebar.php krijgt de volgende code:
En footer.php de rest van de code, na de afsluitende tag van de div met id ‘entry’:
Er is nu weinig overgebleven van index.php, als het goed is heb je alleen nog het onderstaande stukje in index.php staan:
Testpagina
...
Hier moeten we nu nog de andere delen toevoegen. WordPress heeft hier speciale functies voor: get_header(), get_sidebar() en get_footer().
We voegen deze toe in index.php en krijgen dan de volgende code:
Testpagina
...
Sla de wijzigingen op en bekijk het resultaat. Zoals je ziet wordt nu met een klein stukje code de hele pagina weergegeven! De inhoud van de pagina wordt nu nog niet weergegeven, hier gaan we naar kijken in het volgende deel van deze serie.
Als je het thema wilt testen kun je deze hier downloaden: voorbeeldthema-1.zip.
Je kunt het bestand uploaden in WordPress wanneer je een thema toevoegt of je kunt het bestand uitpakken om de codes te bekijken.
Gelukt. Benieuwd naar de volgende sessie.
Handig artikel voor beginners!
Jammer dat er bij elke stukje HTML niet direct de CSS uitgelegd wordt. Voor beginner zou dat wel een stuk makkelijker zijn.