Elke WordPress site heeft minimaal een paar kleine CSS tweaks nodig om alles te krijgen zoals je het hebben wilt. Maar custom CSS aan WordPress toevoegen kan een beetje tricky zijn; het is namelijk geen goed idee om simpelweg het stylesheet van je parent thema te bewerken. In dit artikel bespreken we 4 manieren waarop je wél custom CSS kunt toevoegen.
Custom CSS toevoegen met de WordPress Customizer is de meest toegankelijke methode.
De voordelen:
De nadelen:
Zo pak je het aan:
Ga in je WordPress Dashboard naar Appearance > Customize.
Klik onderaan in de WordPress Customizer sidebar op ‘Additional CSS.’
Voeg je custom CSS code toe. Als je syntax niet correct is, zal de editor je hiervan op de hoogte stellen.
Klik op ‘Publish’ om je wijzigingen door te voeren.
Simple CSS is een gratis plugin. Hiermee kun je alles doen wat methode #1 ook kan, plus een heleboel meer.
De voordelen:
De nadelen:
· Er is (nog) geen code validatie zoals bij de WordPress Customizer.
Zo pak je het aan:
Zodra je de plugin hebt geïnstalleerd en geactiveerd, kun je op 3 verschillende manieren custom CSS toevoegen aan WordPress:
– #1: Ga naar Appearance > Customize en gebruik de Simple CSS optie; hiermee krijg je ook een live voorvertoning van je wijzingen.
– #2: Ga naar Appearance > Simple CSS om de volledige editor te gebruiken.
– #3: Voeg custom CSS aan een individuele blogpost of pagina toe via de nieuwe Simple CSS meta box onder de WordPress editor.
Als je veel custom CSS moet toevoegen in plaats van alleen een paar tweaks hier en daar, kun je vaak beter het stylesheet van je thema gebruiken. Maar je kunt je custom CSS niet in het stylesheet van je parent thema plaatsen, omdat het dan elke keer dat je je thema update, overschreven wordt. Daarom kun je beter een child thema gebruiken. Je custom CSS blijft dan intact, ook als je het parent thema update.
Lees ook: Wat is een child thema en waarom zou je er één gebruiken?
De voordelen:
· Zeer geschikte methode om een grote hoeveelheid custom CSS toe te voegen.
De nadelen:
Zo pak je het aan:
Als het thema dat je gebruikt nog geen child thema bevat, moet je zelf een child thema aanmaken.
Ga naar Appearance > Editor om je custom CSS toe te voegen.
De meeste WordPress gebruikers zullen deze methode niet gebruiken, maar we zetten hem er toch bij omdat sommige mensen proberen hun eigen stylesheet toe te voegen door het direct in de <head> te zetten, zoals:
<link rel="stylesheet" type="text/css" href="mystyle.css">
Dit werkt voor gewone HTML websites, maar dit is niet hoe je het in WordPress moet doen.
Je moet namelijk wp_enqueue_style aan je stylesheets toevoegen. Wil je bijvoorbeeld een stylesheet met de naam customstyle.css toevoegen, dan moet je deze snippet aan je functions.php bestand toevoegen:
wp_enqueue_style( 'customstyles', get_stylesheet_directory_uri() . '/customstyles.css' );
En natuurlijk het customsyle.css bestand naar de juiste map uploaden.
Gratis handleiding
Download de handleiding vandaag nog en haal het maximale uit jouw WordPress-site!
