Aangepaste CSS toevoegen

Hoewel de meeste wijzigingen kunnen worden aangebracht met de instellingen in de WordPress-editor, kan je ervoor kiezen om CSS te gebruiken om je site aan te passen als je ervaring hebt met het schrijven van CSS-code. In deze handleiding zie je hoe je je website kan bewerken met behulp van CSS.

Deze functie is van toepassing op sites die onze WordPress.com Personal-, Premium-, Business- of Commerce-abonnementen en het verouderde Pro-abonnement gebruiken. Voor sites met een Free- of Personal-abonnement moet je je abonnement upgraden om toegang te krijgen tot deze functie.

CSS is de afkorting van Cascading Style Sheets. Het is een opmaaktaal die de weergave van HTML-elementen op een internetpagina bepaalt. WordPress bevat een CSS-editor om je eigen CSS-stijlen toe te voegen die de standaard stijlen van je thema overschrijven.

De mogelijkheden om het ontwerp van een website aan te passen met CSS zijn bijna eindeloos. Je moet hiervoor wel verstand hebben van de manier waarop CSS en HTML werken (of in ieder geval bereid zijn dit te leren). De CSS-handleiding van MDN-webdocumenten is een geweldige plek om CSS te leren.

Als je geen interesse hebt om CSS te leren, kies dan een blokthema voor je site. Deze thema’s bieden de meest flexibele opties om elk aspect van het ontwerp van je website aan te passen zonder dat je computercode hoeft te kennen.

Er zijn twee methoden om de CSS-editor van je site te openen, afhankelijk van je thema. Elke methode wordt hieronder uitgelegd.

Als je site een thema gebruikt dat de site-editor ondersteunt, kan je de site met behulp van deze methode aanpassen met CSS. Een snelle manier om te bepalen of je site de site-editor gebruikt, is door onder Weergave op je dashboard te kijken. Als je hier Editor ziet staan, kan je de CSS-editor openen door deze stappen te volgen:

1. Ga naar het dashboard van je site.
2. Ga naar Weergave → Editor.
3. Klik op Stijlen in het menu Ontwerp aan de linkerkant.
   • Als je thema Stijlvariaties bevat, moet je vervolgens op het potloodpictogram klikken om de opties van Stijlen te openen:

4. Klik op de drie puntjes aan de rechterkant van de koptekst ‘Stijlen‘ en kies ‘Aanvullende CSS‘:

5. Typ of plak je CSS-code in het tekstvak dat wordt weergegeven.
6. Klik op de knop ‘ Opslaan‘ rechtsboven in het scherm om de CSS op te slaan op je site.

Je kan een voorbeeld bekijken van de invloed van je CSS-wijzigingen op elk bloktype door het Stijlboek te laden. Klik op het oogpictogram om het stijlboek te openen.

In de thema’s van de Site-editor kan je CSS-code op specifieke blokken op de hele site toepassen door de stappen hieronder te volgen.

1. Ga naar het dashboard van je site.
2. Ga naar Weergave → Editor.
3. Klik op Stijlen in het menu Ontwerp aan de linkerkant.
   • Als je thema Stijlvariaties bevat, moet je vervolgens op het potloodpictogram klikken om de opties van Stijlen te openen.
4. Selecteer in dit geval het gedeelte ‘Blokken‘ om toegang te krijgen tot de instellingen om de weergave van specifieke blokken voor de hele site aan te passen.
5. Klik op de naam van het blok waaraan je CSS wil toevoegen. Je kan ook het zoekvak gebruiken om het gewenste bloktype te vinden.
6. Scrol naar beneden en klik op ‘Geavanceerd‘.
7. Typ in het vak ‘Aanvullende CSS‘ de CSS-code die moet worden toegepast op alle blokken van dat bloktype. Wanneer je CSS per blok toevoegt, hoef je geen CSS-selectie op te nemen. Je hoeft dan alleen de eigenschap en waarde toe te voegen. In de video hierboven vind je een voorbeeld hiervan.
8. Klik op de knop ‘ Opslaan‘ rechtsboven in het scherm om de CSS op te slaan op je site.

Voor thema’s die niet gebruikmaken van de Site-editor, waaronder klassieke thema’s en veel thema’s van derden, kun je op de volgende manier CSS-code toevoegen:

1. Ga naar het dashboard van je site.
2. Ga naar Weergave → Aanpassen → Aanvullende CSS.
3. Typ of plak je CSS-code in het tekstvak dat wordt weergegeven. In het voorbeeldvenster aan de rechterkant worden je wijzigingen weergegeven.
4. Klik op de knop ‘Wijzigingen opslaan‘ om de CSS op je site op te slaan.

De laatste 25 versies van je CSS-wijzigingen worden opgeslagen en kunnen worden ingezien door op ‘Volledige geschiedenis bekijken‘ te klikken onderin het CSS-menu. Hier kun je eerdere versies van je CSS herstellen.

Als deze optie niet wordt weergegeven, is er geen CSS-geschiedenis om te herstellen.

De optie ‘Breedte media‘ moet worden gebruikt als je de breedte van de primaire contentruimte hebt aangepast met aangepaste CSS. De instelling ‘Breedte media’ is de standaard afmeting voor afbeeldingen op volledige grootte wanneer die aan je site worden toegevoegd.

Let erop dat dit geen effect heeft op bepaalde afbeeldingen die je al had toegevoegd voordat je de instelling wijzigde, afhankelijk van hoe ze zijn geplaatst. Het kan voorkomen dat je sommige afbeeldingen daarom na het wijzigen van de instelling opnieuw moet plaatsen.

De aangepaste CSS die je toevoegt aan de CSS-editor zal standaard geladen worden na de originele CSS van het thema. Dit betekent dat je regels voorrang kunnen krijgen en de stijlen van het thema kunnen overschrijven.

Je kunt de originele CSS van het thema volledig uitschakelen door het selectievakje ‘De originele CSS van het thema niet gebruiken’ aan te vinken. Op die manier kan je elk WordPress.com-thema gebruiken als een leeg canvas voor ontwerpen met CSS.Dit is een geavanceerde optie en moet je alleen gebruiken als je opnieuw wilt beginnen en de CSS voor je thema vanaf het begin wilt opbouwen.

Als je bovenop de bestaande CSS-regels wil bouwen, wat de meest voorkomende en aanbevolen aanpak is, dan kan je deze optie uit laten staan.

WordPress.com ondersteunt de CSS-voorbewerkers LESS en Sass (SCSS Syntax). Dit is een geavanceerde optie voor gebruikers die gebruik willen maken van CSS-extensies, zoals variabelen en mixins. Bekijk voor meer informatie de websites van LESS en Sass.

De inhoud van de voettekst mag niet worden aangepast met CSS. Je kan de inhoud van de voettekst verwijderen of aanpassen met instellingen, afhankelijk van het type thema dat op de site wordt gebruikt:

• Als je site gebruikmaakt van een blokthema kan je de inhoud van de voettekst bewerken of verwijderen met behulp van de Site-editor. Hiervoor is geen CSS nodig.
• Als je site gebruikmaakt van een klassiek thema kan je de inhoud van de voettekst wijzigen in een minimalistisch WordPress-logo. Je kan de inhoud van de voettekst verbergen als je een Business- of Commerce-abonnement gebruikt op je site.

Ja, maar alleen op sites met plugins.

Je kan de lettertypes van je website kiezen met de opties voor je thema. Wanneer je CSS gebruikt, ben je beperkt tot de twee lettertypes voor websites in de frontend. Je kan echter extra lettertypes toevoegen met lettertype-plugins van derden.

Ja. Je kan een afbeelding uploaden naar je Mediabibliotheek en dan naar de rechtstreekse URL doorverwijzen vanuit je CSS-stylesheet. Hier zie je een voorbeeld van hoe je een achtergrondafbeelding gebruikt in je stylesheet:

div#content {
background-image: url('http://example.files.wordpress.com/1999/09/example.jpg');
}

We raden je aan CSS-wijzigingen aan te brengen met behulp van de CSS-editor, zoals hierboven uitgelegd in deze handleiding. Wanneer je CSS toevoegt door gebruik te maken van deze methode, worden CSS-regels uit het stylesheet van je thema overschreven. Dit is een veilige methode die het eenvoudiger maakt om CSS-conflicten te debuggen en eerdere versies van CSS die je hebt toegevoegd te herstellen.

Als je weet hoe je themabestanden rechtstreeks bewerkt, kan je dit doen via SFTP of door een onderliggend thema aan te maken. We raden aan om wijzigingen te testen op een testsite voordat je ze toepast op je actieve site.

Alle upgrades op WordPress.com worden ieder jaar verlengd. Als je je abonnement annuleert, wordt je aangepaste CSS nog steeds opgeslagen, maar wordt die niet meer toegepast op je site en is deze dus niet meer zichtbaar voor anderen. Als je deze weer op je site wil toepassen, kan je je abonnement opnieuw aanschaffen. De stijlen worden dan automatisch weer toegepast, mits je niet van thema bent veranderd. Als je van thema bent veranderd, dan vind je je eerdere CSS in de CSS-revisies.