WordPress site aanpassen met HTML en CSS

WordPress site aanpassen met HTML en CSS

Dit artikel is een korte introductie tot de verschillende tools en technieken die je kunt gebruiken om je WordPress website aan te passen. En het biedt een voorproefje van onze WordPress Handleiding! Er zijn twee manieren om de blog posts en pagina’s van je WordPress site te bewerken, namelijk met de Visuele editor en de Tekst editor. Beide editors maken gebruik van dezelfde internettaal, namelijk HTML (Hyper Tekst Markup Language). Ze bieden slechts twee verschillende manieren om de HTML te schrijven en te bewerken.

Het mooie van WordPress is dat je geen HTML hoeft te leren; de Visuele editor schrijft de HTML voor je. Maar een beetje HTML en CSS leren kan je wel een hoop frustraties schelen wanneer je een beroep moet doen op de Tekst editor om iets te verhelpen dat niet goed is gegaan, of wanneer je wat extra styling wil toevoegen.

Tekst opmaken met de Visuele editor van WordPress

De Visuele editor is een WYSIWYG (What You See Is What You Get) editor met allemaal handige knopjes. Hierdoor is het heel makkelijk om bijvoorbeeld vetgedrukte of schuine tekst op te maken, om tekst uit te lijnen, en om linkjes en titels toe te voegen. De Visuele editor geeft de opgemaakte resultaten weer, niet de code.

Als je pas net begint met WordPress is het goed om eerst bekend te raken met de Visuele editor. Daarna kun je rustig aan beginnen met de WordPress Tekst editor en wat basis HTML.

Tekst opmaken met de Tekst editor van WordPress

De Visuele editor van WordPress is niet perfect. Vroeg of laat zal vrijwel elke WordPress gebruiker te maken krijgen met een onstabiele layout, die je met een klein beetje kennis van HTML en CSS wel kunt fixen. En dat doe je in de WordPress Tekst editor. Hier kun je namelijk opmaak toevoegen die in de Visuele editor niet beschikbaar is.

HTML: de basis

HTML (Hyper Tekst Markup Language) is een opmaaktaal. HTML tags geven aan hoe een webbrowser content weergeeft.

Als je in de Visuele editor van WordPress een stukje tekst selecteert en op het B icoontje klikt, dan zet de editor de geselecteerde tekst tussen bold tags, zodat hij dikgedrukt wordt weergegeven in de browser. In de Tekst editor ziet dat er zo uit:

 <strong>Dit is dikgedrukte tekst</strong>

Zoals je ziet is de ‘eindtag,’ dus de tag die het einde van de dikgedrukte tekst aangeeft, voorzien van een ‘/.’ Een hyperlink ziet er zo uit:

<a href=”http://linkadres.com/”>Hier staat de zichtbare klikbare tekst in een link</a>

Paragraaf tags zoals <p> en </p> zijn verborgen in de Tekst editor, tenzij hier waarden aan toegevoegd worden. Een voorbeeld:

<p style=”text-align: center;”>Deze tekst is gecentreerd.</p>

CSS

CSS is de afkorting voor Cascading Style Sheets. Met CSS kun je aangeven hoe HTML elementen in de browser worden weergegeven.

Het kan gebeuren dat een tekst vreemd wordt gestyled zonder dat dit je bedoeling is. Je kunt dan in de Tekst editor zoeken naar CSS styles die door de Visuele editor zijn toegevoegd, en de code ‘opschonen’ door bijvoorbeeld de span tags te verwijderen die om een stukje tekst heen staan.

<span style=”color: #333399; font-size: 10px”>Deze tekst heeft een andere kleur en lettertype formaat.</span>

Thema Style Sheets

In WordPress wordt de styling van je teksten bepaald door het thema dat je hebt gekozen. Elk WordPress thema heeft een eigen CSS stylesheet genaamd Style.css. Als je in dit bestand iets aanpast, dan wordt dit over je hele website doorgevoerd.

Wil je meer leren over hoe je je WordPress site kunt aanpassen met HTML en CSS? Schaf dan de WordPress Handleiding aan!

Wil jij meer leren over Wordpress?

In de kennisbank vertellen we je alles over de belangrijkste onderwerpen

  • Snel en gemakkelijk contact met een WordPress expert
  • Ontvang als eerste nieuwtjes & leuke acties
  • Overleg met andere WordPress fans

Je WordPress vraag of probleem razendsnel opgelost met de hulp van een echte WordPress developer!

Join de grootste WordPress community van Nederland & stel je vraag via ons WordPress ticketsysteem.

Medaille-buddy

Blijf op de hoogte van het laatste WordPress nieuws.

Schrijf je in voor onze wekelijkse nieuwsbrief.