Zelf simpel HTML en CSS maken en leren in WordPress

HTML is van oudsher de manier om websites te bouwen. Met programma’s als Dreamweaver of Frontpage werden hele websites gemaakt. Ook WordPress gebruikt HTML, alleen is het voor de gebruiker gemakkelijker gemaakt. Lees hoe HTML werkt in WordPress.

Visuele en tekst editor

Er zijn twee manieren om berichten en pagina’s van je WordPress website te bewerken of toe te voegen. Dit zijn de de Visuele editor en de Tekst editor. Beiden gebruiken dezelfde internettaal, namelijk HTML, kort voor: Hyper Tekst Markup Language. Alleen zijn er in WordPress twee verschillende manieren om de HTML weer te geven. Een handige tip en truc vind je onderaan deze pagina.

Tekst maken met de WordPress Visuele editor

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

Tekst maken met de WordPress Tekst editor

De Visuele editor van WordPress is niet helemaal perfect. 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. Ook kun je hier shortcodes van plugins aan toevoegen bijvoorbeeld van een contactformulier.


Voorbeelden van HTML in WordPress

Hieronder vind je enkele voorbeelden van HTML


Voorbeeld: Vette tekst

In de Visuele editor ziet vette tekst er zo uit:
Vetgedrukte tekst
In de Tekst editor ziet vette tekst (bold) er zo uit:
<strong>Vetgedrukte tekst</strong>


Voorbeeld: Tekstlink maken

In de Visuele editor ziet een hyperlink ziet er zo uit:
Link naar basiscursus WordPress
In de Tekst editor ziet de link er zo uit:
<a href="https://www.cursuswp.com/groepscursus-wp-beginners-basis-training-workshop/">Link naar basiscursus WordPress</a>


Voorbeeld: Kop maken

In de Visuele editor ziet een kop ziet er zo uit:

Dit is een kop

In de Tekst editor ziet de link er zo uit:
<h3>Dit is een kop</h3>

Zelf html maken, leren of aanpassen voor WordPress

Enige HTML en CSS kennis kan je wel 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. Dit is niet iets dat je in 1 keer leert. Je kan dit beter stapsgewijs over een langere periode doen. De meest overzichtelijke website om zelf stapsgewijs html te leren vind ik www.w3schools.com.


Truc om zelf html te maken (voor leken)

Het mooie van WordPress is dat je niet per se HTML hoeft te kunnen. De Visuele editor schrijft de HTML voor je. Stel je hebt een link in html nodig ergens op je website naar bijvoorbeeld je contactpagina. Bijvoorbeeld in een widget of in een tabel in WordPress. Een handige truc om dit zelf in html te maken is dit:

  1. Ga naar je Visuele editor
  2. Type het woord dat gelinkt dient te worden, bijvoorbeeld ‘neem contact op’.
  3. Maak nu de link in de visuele editor met het kettingtekentje.
  4. Je hebt nu een werkende link. Wat nu. Het is simpel:
  5. Switch nu naar de teksteditor en voila, je hebt de html code die je nodig hebt. Kopieer deze tekst op de plek waar je html nodig hebt.

Ook interessant