WordPress - Wetenswaardigheden

WordPress Thema Aanpassen

Een thema aanpassen is niet echt super lastig, als je de weg weet in de bestanden die het thema gebruikt. Dankzij tools als bijvoorbeeld in Google Chrome, “Inspecteren” (rechtermuis-knop op een web-pagina), is de opmaakcode eenvoudig te achterhalen en zou je die in het originele CSS bestand van het thema kunnen aanpassen, naar je eigen stijl.

Veel aanbieders van commerciële thema’s leveren vaak een Child Theme mee of hebben in de documentatie opgenomen hoe je zo’n Child Theme moet aanmaken, maar dat is ook weer niet altijd het geval; met name de gratis thema’s doen dat meestal weer niet.

In dat zgn. Child Theme kun je aanpassingen verrichten aan het thema (je website dus…) en bij een eventuele update van het thema zullen die aanpassingen bewaard en dus intact blijven. Doe je aanpassingen in de hoofdbestanden van het thema zullen bij een update die aanpassingen verloren gaan. Er zijn namelijk maar een paar bestanden die de look-&-feel en bepaalde functionaliteit van je website bepalen.

Child Themes

Een Child Theme heeft als basis de layout en functionaliteit van het hoofdthema (Parent Thema) en zal die layout en functionaliteit ook volgen tenzij er in de bestanden van het Child Theme aanpassingen gedaan zijn.

Het Child Theme is aangemaakt in een aparte map en verwijst naar de map waar het hoofdthema staat. Bij een update van het thema zullen alle bestanden in de map van het hoofdthema overschreven worden en de bestanden van het Child Theme niet; die staan namelijk in een andere map.

Op zich is het niet zo erg als je een paar kleine aanpassingen gedaan hebt, in bijvoorbeeld het css-bestand van het thema, om een titel tekst een ander kleurtje te geven of een ander lettertype. Zolang je maar weet waar en hoe je dat gedaan hebt, is het bij een update van het thema redelijk eenvoudig om de aanpassing weer terug te zetten….. Het grootste probleem is dat je waarschijnlijk na bepaalde tijd niet meer weet wat je aangepast hebt en waar…  (aantekeningen maken is een vak apart).

Child Themes Maken

Wordt er geen Child Theme meegeleverd met het door jou gebruikte thema en je wilt aanpassingen aan het thema gaan doen, is het dus raadzaam om een Child Thema aan te maken. Dit kan op twee manieren: handmatig (zelf dus) of automatisch door gebruik te maken van een plugin die dat dan voor jou doet.

Zelf Maken

Een Child Theme zelf maken is niet echt ingewikkeld, zolang je maar bepaalde regels volgt. We hanteren even het “Twenty Seventeen” thema als voorbeeld. De volgende stappen zijn voor ieder thema hetzelfde, zolang je maar goed op de benaming let.

Stap 1

Als eerste moet je inloggen via FTP op je mappen waar je website staat bij je hostingprovider. Wij gebruiken hiervoor het FTP-programma “FileZilla” (bekijk evt.: FileZilla installeren en gebruiken).

De thema-bestanden staan in de map “wp-content\themes”. In die map moet je een map aanmaken die je de naam geeft van je Child Theme. Doorgaans worden namen gebruikt die beginnen met de naam van het hoofdthema en eindigen op “-child”. Dus dat zou in dit voorbeeld dan “twentyseventeen-child” worden.

Een map aanmaken doe je eenvoudig door in het rechter-venster in FileZilla waar je thema-mappen staan op de rechtermuis-knop te drukken en te kiezen voor “map aanmaken”:

WordPress Filezilla Map Aanmaken

Map aanmaken via FTP

Die map mag dus iedere willekeurige naam krijgen. Ons advies is dat die naam voor jou herkenbaar moet zijn.

Stap 2

Nu moeten we aan die map een bestand style.css toevoegen. Dat bestand is een tekstbestand en moeten we zelf aanmaken. De inhoud dient er zo uit te zien:

WordPress Child Theme CSS bestand

Child Theme CSS Bestand

Dat bestand kun je eenvoudig aanmaken via bijvoorbeeld het Windows “Kladblok” en dan opslaan met de extensie “.css”. Dat bestand kopieer je dan met FileZilla naar de zojuist aangemaakte map van het Child Theme.

In het voorbeeld hiervoor is de volledige thema-beschrijving opgenomen (van “Theme Name” t/m “Text Domain”), dat is in principe niet verplicht. Verplicht zijn de “Theme Name” en “Template”; de overige regels kunnen dus weggelaten worden. Die regels hebben echter wel een functie. De functies zijn:

  • Theme name: De naam die je het Child Theme geeft. Deze naam mag alles zijn en wordt ook weergegeven in het Dashboard bij Weergave -> Thema’s;
  • Theme URI: Doorgaans de URL van waar het thema live te bezichtigen is, anders wordt deze weggelaten;
  • Description: Een korte beschrijving van het thema;
  • Author: De persoon die dit child theme heeft gemaakt;
  • Author URI: Eventueel het website-adres van de persoon die het Child Theme heeft gemaakt;
  • Template: Hier moet de naam van de map van het hoofdthema komen, exact zoals die map aangemaakt is. Komt deze naam niet overeen zal het Child Theme niet werken;
  • Version: Het versienummer van het Child Theme;
  • Tags: De tags waaronder het thema gevonden kan worden. Dit is alleen nodig als het thema op WordPress.org wordt geplaatst.
  • Text Domain: Dit is de naam van de map van het Child Theme en wordt gebruikt indien je het Child Theme vertaalbaar wilt maken.

Nu is er nog één regel belangrijk en dat is de “@import…” code die het originele css-bestand van het hoofdthema moet inlezen. Dat is de laatste regel in ons voorbeeld hiervoor: “@import(“../twentyseventeen/style.css”.

Let ook hier op dat je de naam van de map van je hoofdthema exact overneemt (dus vervang “twentyseventeen” met de mapnaam van jouw thema).

Dit zijn de twee stappen die je moet doorlopen om een Child Thema aan te maken. Via het Dashboard bij Weergave -> Thema’s kun je nu het Child Theme activeren.

Child Theme Plugin

Een andere manier om een Child Theme aan te maken is gebruik te maken van een plugin. Er zijn er diverse en de meeste populaire is “Child Theme Configurator“.

Installatie

WordPress Child Theme Plugin

Child Theme Plugin Installeren


(bekijk ons artikel: Plugins Installeren, voor de diverse manieren om een plugin te installeren)

Na installatie en activatie heb je in het Dashboard bij Extra de optie Child Themes er bij gekregen. Daar start je de plugin op om een Child Theme te laten maken van bestaande thema’s die je al hebt geinstalleerd.

Thema Kiezen

De eerste stap is hier om het thema te kiezen waarvan je een Child Theme wilt laten aanmaken. Die behoeft niet het actieve thema te zijn:

Child Theme aanmaken stap 1

Hier kiezen we ook weer voor het thema Twenty Seventeen en dan klik je op “Analyze”. De plugin zal nu het hoofdthema analyseren waarnaar er een aantal opties verschijnen, afhankelijk van het gekozen thema. Hier heb je dan de opties om wat we hiervoor handmatig hebben gedaan ook te doen.

Thema Instellen

Child theme aanmaken – stap 2

  • bij (4) geef je de map op waar het Child Theme geïnstalleerd dient te worden (dit is niet de naam van het Child Theme);
  • bij (5) geef je op waar de eventuele style aanpassingen bewaard moeten worden. Aan te bevelen is om te kiezen voor een “Separate Stylesheet”;
  • bij (6) heb je de keuze hoe het style.css bestand van het hoofdthema geladen moet worden.

De volgende opties zijn dan nog over:

Child theme aanmaken – stap 3

  • bij optie (7) heb je de mogelijkheid om de attributen aan te passen zoals hiervoor besproken bij het handmatig aanmaken van het style.css bestand;
  • optie (8) is alleen nodig als je al instellingen gedaan had bij het hoofdthema en je wilt die instellingen mee kopiëren;

Bij (9) klik je dan op “Create New Child Theme” en alles wordt aangemaakt zoals je ingesteld had en het Child Theme is klaar voor gebruik.

Child Theme Aanpassen

Nu kun je in het style.css bestand alle opmaak voor de diverse elementen welke door het thema gebruikt worden aanpassen. Dat bestand kun je eerst downloaden via FTP en dan een editor gebruiken en dan terug kopiëren of via het Dashboard -> Weergave -> Editor. Dan kom je in het stylesheet van het zojuist aangemaakte Child Theme:

Child Theme CSS Bewerken

In een volgend bericht in deze serie “Thema Aanpassen” gaan we dieper in op het gebruik van css en het stylesheet-bestand style.css. Wil je hiervan op de hoogte blijven volg ons dan op Facebook of schrijf je onderaan deze pagina in voor onze nieuwsbrief.

Themafuncties

Naast het thema-style-bestand is er nog het bestand functions.php. Door aan dit bestand extra code toe te voegen is het mogelijk om de extra functionaliteit aan het thema toe te voegen of bepaalde functies in te perken. Hoe je dat doet lees je in het artikel: “Code Snippets“.

Vragen & Info

Heb je vragen naar aanleiding van dit artikel, stuur ons dan een mail op: info@qwain.nl of geef een reactie via onderstaand reactie-formulier.

Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… volg ons dan op Facebook .

 

Overige Artikelen


Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *