WordPress theme aanpassen voor beginners

WordPress is een veel gebruikt pakket om websites mee te bouwen. Toch zien niet alle websites die gemaakt zijn met WordPress er hetzelfde uit. Dat komt doordat er veel verschillende themes zijn. Een theme geeft de website zijn specifieke uiterlijk en functionaliteiten. Als je een website maakt, hoef je niet zelf een theme te maken. Je kunt op internet veel kant-en-klare themes vinden. Vaak zal het echter voorkomen dat het net niet is wat jij zoekt en zal je het theme willen aanpassen. Gelukkig is een WordPress theme aanpassen ook voor beginners niet moeilijk.

Een WordPress theme gebruiken voor je website

Een eigen website maken is tegenwoordig niet moeilijk meer. Met een pakket als WordPress heb je zo een mooie, gemakkelijk te onderhouden website. Om de website het gewenste uiterlijk te geven, gebruik je een theme. Je kunt kiezen uit een groot aantal gratis of betaalde themes of je kunt er zelf een maken. Als je voor het eerst met WordPress werkt, kun je het beste beginnen met een gratis theme. Je kunt daarmee experimenteren zonder dat je meteen een flinke investering moet doen.

Om het theme helemaal naar je zin te maken, kun je veel dingen aanpassen. De grootte en kleur van de letters bijvoorbeeld, of het gebruikte lettertype. Ook kun je de kleuren van knoppen en links aanpassen of zelfs een hele nieuwe pagina toevoegen. Voor de beginner zal het even zoeken zijn wat je allemaal kunt doen en waar je alles vindt. Hier wordt het een en ander uitgelegd, zodat jij je website kunt aanpassen aan je eigen smaak!

Een child theme maken voor beginners

Wat is een child theme?

Wat je altijd moet doen als je het theme wilt gaan aanpassen, is een zogenaamd child theme maken. Hiervoor maak je een kopie van alle bestanden die je wilt gaan aanpassen. Je maakt als het ware een nieuw theme, maar deze bestaat alleen uit de gewijzigde bestanden. De overige bestanden ‘leen’ je van het hoofdtheme. Dit is belangrijk, omdat het kan voorkomen dat het originele theme een update krijgt. De bestanden van dat theme worden dan overschreven. Als je het theme direct aangepast hebt, verdwijnen jouw aanpassingen als je de update installeert.

Hoe maak je een child theme?

Stel dat je gebruik maakt van een van de standaardthemes van WordPress, twentyfourteen. Om een child theme te maken, maak je een nieuwe map met bijvoorbeeld de naam ‘twentyfourteen-child’. Deze map moet op je webserver op hetzelfde niveau staan als de map die twentyfourteen heet. Er geldt slechts één eis om nu je child theme aan te kunnen maken. Dat is dat in je nieuwe map een bestand met de naam ‘style.css’ komt te staan.

Style.css is het bestand waarin de opmaak van je website wordt vastgelegd. Dit bestand moet de volgende inhoud hebben:

/*

Theme Name: Twentyfourteen Child

Theme URI: http://wordpress.org/themes/twentyfourteen

Description: Child theme for the Twentyfourteen theme

Author: jouw naam

Author URI: http://jouwwebsite.nl/

Template: twentyfourteen

Version: 0.1.0

*/

@import url(“../twentyfourteen/style.css”);

De regels hebben de volgende betekenis:

  • Theme Name: hier geef je je theme een naam. Deze naam zal je later in WordPress terugzien op het scherm waar je themes kunt selecteren voor je website.
  • Theme URI: de locatie waar het theme vandaan komt. Dit is slechts ter info, deze informatie wordt verder niet gebruikt.
  • Description: dit is ook alleen ter info voor jezelf.
  • Author: hier kun je je naam invullen, maar het hoeft niet.
  • Author URI: ook hier hoef je niets in te vullen.
  • Template: deze is wel belangrijk. Vul hier de naam in van de map waarin het theme staat waarvan je child is afgeleid. In dit geval is dat ‘twentyfourteen’. Let op: dit is hoofdlettergevoelig. Als je hier ‘Twentyfourteen’ neerzet, zal het niet werken.
  • Version: hiermee kun je aan versiebeheer doen.
  • @import url(“../twentyfourteen/style.css”); Vervang hier ‘twentyfourteen’ door de naam van het theme waarvan je een child aan het maken bent. Dit komt dus overeen met wat je achter ‘Template’ hebt ingevuld.

Met de laatste regel zeg je dat eerst de style.css van het hoofdtheme geladen moet worden. Jouw wijzigingen aan de opmaak volgen dan na deze regel in de nieuwe style.css.

Als je nu zorgt dat je nieuwe map met deze style.css op de juiste plek op de webserver staat, dan zie je in WordPress automatisch je child theme bij de geïnstalleerde themes staan. Als je deze selecteert als actief theme, zul je zien dat je child er precies zo uitziet als het theme waar je het van afgeleid hebt. Je bent nu klaar om je wijzigingen te gaan uitvoeren!

De opmaak aanpassen in de style.css

Wat is style.css

Op veel verschillende plaatsen op een website komt opmaak terug, bijvoorbeeld het lettertype of de achtergrondkleur. Je kunt dit natuurlijk voor elke pagina opnieuw definiëren. Als je dit wilt wijzigen, ben je dan wel even bezig. Daarom wordt de opmaak overzichtelijk bij elkaar gezet in het bestand style.css. Van dit bestand heb je bij het maken van een child theme al een nieuwe versie gemaakt. In die versie kun je je wijzigingen toevoegen.

Bij het laden van je website wordt eerst gekeken naar de originele style.css en daarna naar de aangepaste versie van het child theme. Alle opmaak die in de aangepaste versie staat, overschrijft daardoor de opmaak uit de originele versie. Je hoeft de originele versie dus niet te wijzigen of er regels uit te verwijderen.

Een voorbeeld

In de style.css van het theme Twentyfourteen vind je onder andere deze code:

body {

background: #f5f5f5;

}

Dit geeft de achtergrond van je website een kleur die net iets afwijkt van wit. Wil je je achtergrond echter echt wit hebben, dan kun je dit stukje tekst overnemen in je nieuwe style.css en hier de kleur aanpassen naar #ffffff. Een tweede voorbeeld:

h2 {

font-size: 24px;

line-height: 1;

}

Hier wordt voor het subkopje dat in HTML wordt aangeduid als h2 bepaald dat de lettergrootte 24 pixels is en de regelhoogte gelijk aan 1. Wil je de kopjes groter of kleiner maken, dan kun je dat doen door deze tekst over te nemen in de style.css van je child theme en daar de font-size aan te passen. Zo kun je alle kleuren en lettergroottes gemakkelijk wijzigen. Alles wat in style.css staat, kun je in principe zelf aanpassen.

WordPress theme aanpassen voor gevorderden

Heb je wat meer ervaring met programmeren en WordPress, dan kun je nog veel meer aanpassen. Zo kent een WordPress theme bijvoorbeeld het bestand functions.php. Dit bestand bevat een aantal functies die de website nodig heeft om goed te functioneren. Hier kun je zelf functies aan toevoegen door deze in een nieuwe functions.php te zetten in je child theme. Een andere mogelijkheid is om nieuwe pagina’s toe te voegen met specifieke functionaliteiten. Denk hierbij bijvoorbeeld aan een contactpagina of een pagina met een index van alle onderwerpen op je website.


Alle artikelen in deze categorie:


Bron:
https://www.wplounge.nl/wordpress-child-theme-maken/