Lokaal je WordPress-site bouwen: deel 3

In deel 1 van deze serie ben ik ingegaan op het opzetten van een lokale ontwikkelomgeving op je Windows PC of Mac. In deel 2 ging ik in op het daadwerkelijk installeren van WordPress op deze testomgeving. In dit deel zal ik ingaan op het maken van een eigen thema. Hoe zit een thema in elkaar en wat doet elk onderdeel van je thema.

Thema’s genoeg

Mocht je niet heel handig zijn en weinig verstand hebben van HTML, PHP en CSS, dan zijn er genoeg mooie thema’s te vinden voor WordPress. Deze thema’s zijn vaak ook nog aan te passen qua kleur en/of indeling.

Ik wil ingaan op de basisstructuur van een WordPress thema en wat elk onderdeel van het thema doet.

Maak je eigen thema

De thema’s van WordPress zijn te vinden in wp-content/themes. Hierin staat standaard een aantal thema’s. Hieronder volgen een aantal stappen om simpel je eigen thema te maken:

• Kopieer een map uit de map wp-content/themes en geef deze de naam die je je thema wilt geven. TwentyTwelve is het standaard responsive thema van WordPress, TwentyEleven het standaard niet-responsive template. Let op: wanneer je een responsive website wilt ontwikkelen is hier meer kennis voor nodig van HTML5 en CSS3 dan waneer je een niet-responsive website wilt ontwikkelen.
• Ga in je themamap naar styles.css en open dit bestand met je favoriete editor
• Bovenin dit .css-bestand staat de naam van het oude thema. Verander dit in de naam van je eigen thema. De andere zaken zijn optioneel en hoef je dus niet in te vullen.

Activeer je thema

Om je thema te activeren ga je naar je WordPress website op je lokale ontwikkelomgeving en log je in op het administratorgedeelte. Wanneer je ingelogd bent ga je in het menu aan de linkerkant naar Weergave > Thema’s. Activeer vervolgens je eigen gemaakte thema.

De structuur van je thema

Een thema wordt uit een aantal bestanden opgebouwd, namelijk:

• header.php: de header van je website. Hierin zet je het begin van iedere pagina, waarin je verwijst naar stylesheets, javascript en waar je de header en navigatie van je website plaatst.
• sidebar.php: de eventuele zijbalk van je website. Hierin kun je bijvoorbeeld je laatst geplaatste berichten tonen of een Twitterfeed.
• footer.php: de footer van je website: Hierin kun je bijvoorbeeld contactgegevens zetten en het copyright van je website.
• index.php: de hoofdpagina van je website. Hier zet je bijvoorbeeld een overzicht van je geplaatste berichten of je maakt er een statische pagina van met een introductietekst.
• page.php: een pagina.
• single.php: een nieuwsbericht/blogbericht. Hierin staat het gehele bericht en wordt de comments template aangeroepen.
• archive.php: het berichtenarchief gesorteerd op maand.
• comments.php: de comments. Hierin wordt de opbouw van de reacties op je bericht bepaald.
• style.css: de opmaak van je website.

Hoe nu verder?

Ik ben uitgegaan van een bestaand thema om je eigen thema te ontwikkelen. Het voordeel hiervan is dat je al een werkend thema hebt en dat je op deze manier wegwijs kan worden in de opbouw van een WordPress thema. Een nadeel hiervan is dat je een thema gebruikt dat niet goed opgebouwd is qua code. Dit geldt natuurlijk niet voor de standaard meegeleverde WordPress thema’s, maar voor de thema’s die je zelf download vanaf verschillende websites. Dit betekent dat je eigen website dit ook niet is, waardoor je misschien zelf veel meer tijd kwijt bent aan het oplossen van problemen en het opschonen van de broncode.

Een andere aanpak is natuurlijk het thema opbouwen vanaf het begin. Dit kost ten eerste meer tijd, vereist meer kennis, maar het resultaat is wel een perfect thema op maat voor het ontwerp dat je gemaakt hebt.

Een andere makkelijke oplossing is om een bestaand thema aan te passen door middel van de theme customizer functie van WordPress. Hiermee kan je aanpassingen maken in het kleurenschema van de website, het lettertype, maar ook in de layout. Hier staat een interessant filmpje over de WordPress theme customizer.

Je hebt nu een beetje inzicht gekregen in de verschillende mogelijkheden om een WordPress thema te maken, Mocht je het echt niet meer weten, dan kun je de WordPress Codex raadplegen. Hier is alles te vinden over het ontwikkelen van een thema, maar ook bijvoorbeeld over het schrijven van je eigen plugins. In het volgende deel gaan we de lokaal ontwikkelde website online zetten.

Wat zijn jullie ervaringen met het ontwikkelen van een WordPress thema? Gaan je uit van een standaard meegeleverd thema of begin je liever vanaf nul en bouw je zelf je thema op?