InfoNu.nl > Pc en Internet > Tips en tricks > WordPress theme aanpassen voor beginners

WordPress theme aanpassen voor beginners

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.
© 2014 - 2019 Paulienschrijft, het auteursrecht (tenzij anders vermeld) van dit artikel ligt bij de infoteur. Zonder toestemming van de infoteur is vermenigvuldiging verboden.
Gerelateerde artikelen
Webshop starten met WordpressHet starten van een webhop is gemakkelijk te realiseren door middel van Wordpress. Dit artikel gaat nader in op de funct…
Hoe installeer ik een Wordpress BlogHoe installeer ik een Wordpress BlogMet Wordpress software kun je prachtige websites en blogs maken. Dit is een erg nuttige en gebruiksvriendelijke applicat…
Bloggen met WordPress, Blogger en TumblrJe eigen blog schrijven kan leuk zijn en is zeker de moeite waard. Maar als je nieuw bent in het blogmilieu is het belan…
Theme Hospital (PC, 1997)Theme Hospital is een in 1997 uitgebrachte game door de Britse gameontwikkelaar Bullfrog. In deze isometrische game is h…
Bewaar al je online recepten op één plekBewaar al je online recepten op één plekTegenwoordig kun je op vele sites lekkere recepten vinden, maar helaas staan deze allemaal op verschillende plekken. Alb…
Bronnen en referenties
  • http://www.wplounge.nl/wordpress-child-theme-maken/

Reageer op het artikel "WordPress theme aanpassen voor beginners"

Plaats een reactie, vraag of opmerking bij dit artikel. Reacties moeten voldoen aan de huisregels van InfoNu.
Meld mij aan voor de tweewekelijkse InfoNu nieuwsbrief
Ik ga akkoord met de privacyverklaring en ben bekend met de inhoud hiervan
Reactie

Ince (infoteur), 11-01-2015 17:26 #1
Hoe vind ik de style.css? Reactie infoteur, 12-01-2015
Als je inlogt in het dashboard van Wordpress, ga je in het menu aan de linkerkant naar Weergave en dan naar Editor. Dan zie je aan de rechterkant een lijst van bestanden die je aan kunt passen. Standaard opent dan al meteen de style.css.

Wil je de style.css rechtstreeks op de webserver zien, dan moet je kijken in de map waar wordpress staat, daar vind je een map wp-content, en daaronder de map themes. In de map themes ga je naar het thema dat jij gebruikt, in die map vind je de style.css.

Infoteur: Paulienschrijft
Laatste update: 18-11-2016
Rubriek: Pc en Internet
Subrubriek: Tips en tricks
Bronnen en referenties: 1
Reacties: 1
Schrijf mee!