WordPress site aanpassen met HTML en CSS

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!

3 reacties op “WordPress site aanpassen met HTML en CSS”

  1. Nienke schreef:

    We zijn bezig met een website in WordPress voor ons bedrijf. We maken gebruik van template Onetone en willen graag het contactformulier aanpassen met een aantal velden. Dit moet natuurlijk in HTML maar het is niet mogelijk deze te bereiken.
    Hoe kunnen we het contactformulier aanpassen?
    Alvast hartelijk dank.

  2. ludwig schreef:

    ik heb ook contact form 7 geinstalleerd op mijn site zodat ik hetzelfde formulier krijg als jij . Maar ik zit nu met probleem dat de email met de vraag wel word ontvangen maar het antwoord niet . Dus wat ik nu schrijf komt niet mee , enkel de vraag : schrijf hier uw reactie.

    Je naam ( graag ter info )
    [text* your-name]

    Je e-mail ( uw geldig adres )
    [email* your-email]

    welke vraag wil je graag beantwoord zien ?
    [textarea your-message]

    vertel eens hoe je hier bent gekomen en wat je had verwacht ?
    [textarea your-message]

    [submit “Verzenden”]

    HTML heb je wel nodig voor de opmaak of verbetering van de website . Ik ken niks van html dus hoe of waar kan ik dat aanleren?

    • Thijs Verhoeven schreef:

      Hi Ludwig,

      Dank je voor je vraag. Heb je ook alle velden ingevoerd bij de notificatie email template die wordt verzonden nadat iemand een formulier heeft ingevuld? Daar mist denk ik het [your-message] en misschien nog wel meer.

Geef een reactie