Aangepaste CSS toevoegen Thema Aanpassen (Customizer)

In deze handleiding laat ik zien hoe u eenvoudig custom CSS kunt toevoegen aan uw WordPress site zonder enige theme bestanden te bewerken. Sinds WordPress 4.7, kunnen gebruikers nu aangepaste CSS direct vanuit het WordPress admin gedeelte toevoegen. Dit is eenvoudig, en u zou in staat zijn om uw wijzigingen te zien met een live preview direct.

CSS aanpassen in WordPress

Je moet eerst wat basisprincipes weten van CSS.

• Wat is de CSS code die ik nodig heb?
• Hoe achterhaal ik de CSS code?
• Kan ik zelf CSS code maken?
• Waar zit ik deze code neer?

De basis van CSS aanpassen in WordPress leer je hier:
CSS aanpassen en toevoegen voor beginners of volg onze CSS cursus op maat.

CSS aanpassen in customizer

Eerst moet u naar de Thema’s ” Aanpassen pagina gaan. De customizer opent dan.
Dit zal de WordPress thema-aanpassingsinterface starten. Lees de handleiding customizer thema aanpassen en wijzigen:

CSS toevoegen

U ziet de live preview van uw site met een heleboel opties in het linkerdeelvenster. Klik op het tabblad Extra CSS in het linkerdeelvenster. Het tabblad zal verschuiven om u een eenvoudige box waar u uw aangepaste CSS toe te voegen. Zodra u een geldige CSS regel toevoegt, zult u in staat zijn om het toegepast te zien op het live voorbeeldvenster van uw website. U kunt doorgaan met het toevoegen van aangepaste CSS code, totdat u tevreden bent met hoe het eruit ziet op uw site. Vergeet niet om op de ‘Opslaan & Publiceren’ knop bovenaan te klikken wanneer u klaar bent.

Opmerking: Alle aangepaste CSS die u toevoegt met behulp van theme customizer is alleen beschikbaar met dat specifieke thema. Als u het wilt gebruiken met andere thema’s, dan zult u het moeten kopiëren en plakken in uw nieuwe thema met dezelfde methode.

Aangepaste CSS toevoegen met behulp van een plugin

De eerste methode staat u alleen toe om aangepaste CSS op te slaan voor het huidige actieve thema. Als u van thema verandert, dan moet u wellicht uw aangepaste CSS kopiëren en plakken naar het nieuwe thema. Als u wilt dat uw aangepaste CSS wordt toegepast ongeacht welk WordPress thema u gebruikt, dan is deze methode handig.

Het eerste wat u moet doen is de Simple Custom CSS plugin van SilkyPress installeren en activeren. Na activering gaat u simpelweg naar “Appearance > Aangepaste CSS” en schrijf of plak uw aangepaste CSS.
Vergeet niet om op de ‘Update Custom CSS’ knop te drukken om uw wijzigingen op te slaan. U kunt nu uw WordPress website bekijken om de aangepaste CSS in actie te zien.

Beste Custom CSS WordPress plugins

Gebruik van een Custom CSS in een Child Thema

Beide hierboven beschreven methodes zijn aanbevolen voor beginners. Gevorderde gebruikers kunnen ook aangepaste CSS direct aan hun thema’s toevoegen. Echter, het toevoegen van aangepaste CSS snippets in uw bovenliggende thema is niet aan te raden. Uw CSS veranderingen zullen verloren gaan als u per ongeluk het thema update zonder uw aangepaste wijzigingen op te slaan.

De beste aanpak is om in plaats daarvan een child thema te gebruiken. Echter, veel beginners willen geen child thema maken. Afgezien van het toevoegen van aangepaste CSS, weten beginners vaak echt niet hoe ze dat child theme zullen gebruiken. Lees hieronder uitgebreid over het child theme:

Samengevat

Het gebruik van een custom CSS plugin stelt u in staat om uw custom CSS onafhankelijk van uw thema op te slaan. Op deze manier kunt u gemakkelijk van thema wisselen en uw aangepaste CSS zal er nog steeds zijn.

Een andere geweldige manier om aangepaste CSS toe te voegen aan uw WordPress site is door gebruik te maken van de CSS Hero plugin. Deze prachtige plugin stelt u in staat om bijna elke CSS stijl op uw WordPress site te bewerken zonder een enkele regel code te schrijven.