Hoe de kleuren van een WordPress-thema aan te passen
Posted in Marketing, WordPress by WP Engine
Laatst bijgewerkt op 23 december, 2020
Eén van de beste kanten van het gebruik van WordPress is dat je toegang hebt tot duizenden thema’s die je kunt gebruiken om de stijl van je site aan te passen. Soms vindt u echter het perfecte thema, om u vervolgens te realiseren dat het geen kleurenschema heeft dat u bevalt.
Dit kan frustrerend zijn, maar het hoeft uw plannen niet te laten ontsporen. Met een beetje werk, kunt u de kleuropties van uw thema wijzigen, en uw website eruit laten zien zoals u dat wilt.
In dit artikel gaan we twee manieren verkennen waarop u de kleuren van een WordPress-thema kunt aanpassen, waaronder een handmatige aanpak en een plugin-methode. Laten we aan de slag gaan!
Hoe WordPress Thema Kleuren Aanpassen
In dit gedeelte gaan we u laten zien hoe u uw WordPress thema kleuren op de handmatige manier kunt veranderen. Om dit te doen, wilt u een ‘child theme’ gebruiken, zodat u niets verliest van de wijzigingen die u aanbrengt wanneer het ‘ouder’ thema wordt bijgewerkt.
Wat meer is, het opzetten van een child theme is bijna altijd een slim idee als u van plan bent op maat gemaakte wijzigingen aan te brengen in het raamwerk van uw site. Laten we eens praten over hoe de klus te klaren.
Stap 1: maak een kinderthema
Een kinderthema is een kopie van een ouderthema, dat dezelfde stijlen erft. U kunt wijzigingen aanbrengen in de code zonder de ouder te beïnvloeden, en ze worden niet overschreven wanneer u het thema moet bijwerken. Deze aanpak stelt u in staat om de stijl van uw site veilig te bewerken, zodat als u fouten maakt, u kunt terugkeren naar de ouder en opnieuw beginnen.
Wanneer het gaat om het maken van een kind thema, zijn er twee manieren waarop je kunt gaan over het. Ten eerste kunt u de handmatige aanpak, die we behandelen in dit artikel en kan samenvatten in vier stappen:
- Maak verbinding met uw website via File Transfer Protocol (FTP), met behulp van een client zoals FileZilla.
- Navigeer naar uw WordPress Thema’s map.
- Maak een nieuwe map voor uw kind thema.
- Stel een style.css bestand voor uw kind thema.
Hoewel, kunt u in plaats daarvan kiezen voor het gebruik van een plugin als je niet comfortabel bent handmatig bewerken WordPress bestanden. Voor dit scenario, raden wij Child Theme Configurator. Met deze plugin kunt u een kinderthema genereren en de instellingen configureren met behulp van een eenvoudig menu.
Het staat u vrij om de methode te gebruiken die u verkiest, natuurlijk. Wanneer uw kind thema is ingesteld, kunt u het activeren en verder gaan met de volgende stap.
Stap 2: Log in op WordPress en open de Customizer
Voordat u uw WordPress thema kleuren kunt wijzigen, moet u inloggen op uw dashboard. Navigeer daar naar het tabblad Uiterlijk >Editor:
Daar vindt u een eenvoudige teksteditor waarmee u de bestanden van uw kindthema kunt wijzigen. Houd er rekening mee dat u dit ook kunt doen met behulp van FTP en uw favoriete tekstverwerker, maar het resultaat zal in beide gevallen hetzelfde zijn.
Als u liever een voorbeeld wilt zien van de wijzigingen die u live aanbrengt, kunt u ook de kleuren van uw thema bewerken met de WordPress Customizer. Navigeer daarvoor naar het tabblad Uiterlijk >Aanpassen en open vervolgens de sectie Extra CSS:
In beide gevallen zult u Cascading Style Sheets (CSS) moeten gebruiken om de kleuren van uw thema te wijzigen. Dat is waar onze laatste stap om de hoek komt kijken.
Stap 3: Wijzig de kleuren van uw WordPress-thema
Deze stap is vrij eenvoudig als u al bekend bent met CSS. Elk element binnen uw thema heeft zijn eigen naam of ‘klasse’, die u kunt richten met CSS code. U moet weten wat de relevante klasse is, en dan gebruik maken van HEX kleurcodes om het te veranderen.
Bijvoorbeeld, als u de achtergrondkleur van uw thema wilt veranderen, kunt u een CSS fragment als dit toevoegen aan uw kind-thema (met behulp van een van de methoden in de laatste sectie):
background-color: #XXXXXX;
Het eerste deel van die code richt zich op de juiste klasse voor het element dat u wilt wijzigen. Daarna hoef je alleen nog maar de HEX kleur op te geven die je wilt gebruiken. Als je klaar bent, vergeet dan niet om de wijzigingen op te slaan in het stylesheet van je thema.
Gelukkig kun je, omdat je een kind-thema gebruikt, vrijuit experimenteren zonder je zorgen te maken dat je iets op je site kapot maakt. Als CSS nieuw voor je is, bekijk dan deze gids over hoe je elementen op je site kunt identificeren. Dan kunt u spelen met HEX kleurcodes totdat u een combinatie vindt die u bevalt.
Plugins die WordPress Thema Kleuren veranderen
Als u liever plugins gebruikt in plaats van CSS, zult u blij zijn te weten dat er verschillende opties zijn die u kunt gebruiken om WordPress thema kleuren aan te passen. Laten we eens kijken naar twee van onze favoriete tools.
Plugin 1: Child Theme Configurator
Child Theme Configurator is onze top keuze, omdat het u in staat stelt om zowel een kind thema te maken als het kleurenschema aan te passen. Dat betekent dat je veel van de stappen die we eerder hebben behandeld kunt overslaan en veel sneller kunt gaan experimenteren met kleurenpaletten. Met deze plugin kunt u lettertypekleuren, achtergrondkleuren en nog veel meer wijzigen.
Plugin 2: Central Color Pallete
Zoals de naam al aangeeft, kunt u met Central Color Pallete het kleurenpalet van uw thema wijzigen. Deze plugin integreert goed met veel populaire thema’s en plugins, en laat je het proces overslaan van het gebruik van de WordPress editor om kleuren te kiezen en te wisselen. Twee van de plugins waar Central Color Palette probleemloos mee werkt zijn Beaver Builder en Elementor.
Update Your WordPress Digital Experience with WP Engine
Of welk thema u ook kiest, u heeft een webhost nodig die u de stabiliteit en prestaties biedt die u nodig heeft om uw site te runnen en aan te passen. Met WP Engine, krijg je beide functies, en toegang tot een stellaire support team.
Als je meer een Doe-Het-Zelf (DIY) soort persoon bent, publiceren we ook een heleboel tutorials die je kunt gebruiken om problemen op te lossen of wijzigingen aan te brengen op je website. Bekijk onze plannen en probeer het eens uit!