De visuele editor van WordPress

Voor het maken van berichten en pagina’s heb je een tekstverwerker, een editor, nodig. WordPress heeft er zelfs twee; een visuele editor en een tekst editor.

Beide WordPress editors zijn beschikbaar voor berichten, pagina’s en custom post types (speciale berichten) zoals portfolio berichten en WooCommerce producten.

Met de tekst editor kun je in HTML werken. HTML, de Hyper Text Markup Language, is de opmaaktaal die webpagina’s hun structuur geeft. Belangrijk, maar niet bijzonder gebruiksvriendelijk.

De visuele editor

In dit bericht concentreren we ons op de visuele editor. Deze tekstbewerker lijkt meer op een eenvoudige versie van Microsoft Word of LibreOffice Writer.

Bij een visuele editor type je gewoon je tekst. Wil je aan enkele woorden of aan een paragraaf een bepaalde opmaak toevoegen, dan selecteer je eerst de betreffende tekst en met een druk op een knop pas je de gekozen opmaak toe.

Vervolgens zie je direct het resultaat. Bovendien zal wat je in de editor ziet, een goede indruk geven van wat op de website ziet.

Daarom worden dit ook wel WYSIWYG editors genoemd – What You See Is What You Get, of in het Nederlands; Wat Je Ziet Is Wat Je Krijgt.

Het verschil in presentatie tussen wat je in de visuele editor ziet en wat je op de website ziet, wordt bepaald door het geactiveerde thema.

Als je bekend bent met een tekstverwerker zoals Word of Write, dan zul je snel overweg kunnen met de visuele editor van WordPress.

In de afbeelding hier boven is de visuele editor omgeven door een rood kader. Aan de rechterkant zien we twee tabjes:

• WYSIWYG – activeert de visuele editor
• Tekst – activeert de HTML editor

Het tabje van de actieve editor heeft wat meer contrast, dan de tab van de inactieve editor.

De visuele editor toont twee rijen met pictogrammen. Laten we de functies van beide rijen één voor één bekijken.

Als je met de muisaanwijzer over de knoppen gaat dan wordt de functie van de knop getoond. En indien beschikbaar, ook een snelkeuzetoets.

Met het pictogram onder het Tekst tabje activeer je de afleidingsvrije modus; het admin menu links en de metaboxes rechts en onder de editor verdwijnen uit beeld zodat je minder wordt afgeleid.

De eerste werkbalk van de visuele editor

De bovenste werkbalk van de visuele editor telt 12 functies; één uitrolmenu en 11 knoppen. Hieronder worden de functies toegelicht.

Stijlen

Met behulp van het uitrolmenu Stijlen bepaal je de opmaak van paragrafen. Het effect hiervan is direct zichtbaar, zowel in de editor als op de website.

Niet direct zichtbaar, maar zeker zo belangrijk, is dat je met deze stijlen de structuur van je tekst bepaalt.

Deze structuur is van belang voor:

• de opbouw van een webpagina
• zoekmachinemarketing (SEO)
• toegankelijkheid van webpagina’s bij het gebruik van schermlezers

Alinea

De standaardopmaak voor teksten; zonder opmaak.

De bijbehorende HTML tags is <p> en </p>. De eerste tag, de openingstag, staat aan het begin van de paragraaf, de tweede sluit de paragraaf af.

Koptekst 1

Met Koptekst 1 plaats je een titel tussen de <h1> en </h1> tags.

In de regel is Koptekst 1 gereserveerd voor de paginatitel. In jouw teksten gebruik je deze dus in principe niet.

Koptekst 2

Deze stijl gebruik je voor de belangrijkste kop of koppen in jouw bericht of pagina. Hiermee plaats je een kop tussen <h2> en </h2> tags.

Koptekst 3

Deze stijl plaatst minder belangrijke koppen tussen <h3> en </h3> tags. Een H3 kop heeft altijd een H2 kop als ‘ouder’.

Koptekst 4

Wil je de paragrafen onder een H3 kop verder groeperen, dan kun je daarvoor een H4 kop gebruiken. Deze worden dan tussen <h4> en </h4> tags geplaatst.

Kopteksten 5 en 6

In de praktijk worden H5 en H6 koppen eigenlijk niet of nauwelijks gebruikt.

Een H5 kop is ongeveer even groot als een gewone paragraaf zonder opmaak. De H6 is weer iets kleiner.

Vooraf opgemaakt

Elke webpagina is opgebouwd uit HTML. Ook als je teksten schrijft met de visuele editor, wordt dit voor de browser omgezet naar HTML.

Koppen en paragrafen worden altijd beëindigd met een harde return. In de regel negeert HTML witruimte; meer dan één spatie en zachte returns.

Voor het weergeven van code of een gedicht wil waarschijnlijk voorkomen. Dat is mogelijk met vooraf opgemaakte tekst.

De betreffende tekst, zoals hieronder een gedicht van Conrad van Weetering wordt dan ingesloten in <pre> en </pre> tags.

Een danseres

Zij danst, hoe moet ik dat beschrijven?
Zij danst, bedacht ik later
als stromend water
Wat prachtig om zo
het dansen te bedrijven.
Haar bewegingen golven
en stromen rustig voort,
en zelfs bij rare gebaren
is het of het zo hoort.

Vooraf opgemaakte tekst wordt in principe weergegeven in een font met een vaste tekenbreedte. Maar, zoals je ziet, ook dat kan eventueel worden aangepast.

Vetgedrukt

– maakt geselecteerde tekst vet. Hiervoor worden <strong> en </strong> tags geplaatst.

Cursief

– zet geselecteerde tekst cursief. Hiermee plaats je <em> en </em> tags.

Je kunt beter geen vet of cursief aan kopteksten toevoegen. Daarmee kun je namelijk de consistente opmaak van het thema ontregelen. Wil je de opmaak van alle koppen (of een bepaald type kop) consequent anders presenteren, laat dan je webdesigner het stijlblad van het thema aanpassen.

Ongeordende lijst

– ongeordende lijsten worden gebruikt als de volgorde niet relevant is:

• Onderwerp A
• Onderwerp B

Geordende lijst

– geordende lijsten worden gebruikt als de volgorde er wel toe doet:

1. Onderwerp A
2. Onderwerp B

Blockquote

– de blockqoute wordt gebruikt voor het weergeven van citaten. Elk thema zal dat op zijn eigen wijze doen.

Ervaring is de naam die we aan de som van onze fouten geven
— Oscar Wilde

Links uitlijnen

– Ervaring is de naam die we aan de som van onze fouten geven.

Centreren

– Ervaring is de naam die we aan de som van onze fouten geven.

Rechts uitlijnen

– Ervaring is de naam die we aan de som van onze fouten geven.

Hyperlinks

– Toont een invoerveld voor het toevoegen van een hyperlink.

– Verwijdert de hyperlink van de geselecteerde tekst.

Meer lezen tag invoegen

– Als je de tekst van een bericht of een pagina niet in zijn geheel wilt aangeven op index en archief pagina’s, dan kun je een “Meer lezen tag” invoeren.

De index of archiefpagina toont dan de tekst tot de “Meer lezen tag”. Wil de bezoeker de resterende tekst ook wil lezen dan kan hij op een “Verder lezen” link drukken.

Gebruik je een thema dat je laat instellen of je van berichten de samenvatting, de content of een deel van de content wilt tonen, dan kun je deze More tag. negeren.

Toon/verberg de gootsteen

– Met deze knop, de gootsteen genaamd, toon of verberg je de tweede rij met pictogrammen.

De tweede werkbalk van de visuele editor

Doorhalen

– zet op halve hoogte een horizontale streep door de geselecteerde tekst.

Horizontale lijn

– met deze knop plaats je, content breed, een horizontale lijn.

Tekstkleur selecteren

– deze knop toont een kleurenkiezer waarmee je kleur kunt geven aan tekst.

Staat de door jou gewenste kleur er niet bij, klik dan op Aangepast… Je kunt dan de RGB- of hexcode van jouw (huisstijl)kleur toevoegen.

Houd er rekening mee dat je met tekstkleuren een zogenaamde inline style toevoegt. Deze stijlregels hebben hebben prioriteit boven de opmaakregels van het thema zoals vastgelegd in de CSS stijlbladen. Let er dus op dat je niet de vormgeving van je thema verstoord met inline styles.

Plakken als platte tekst

– klik je voor het plakken van gekopieerde tekst eerst op deze knop, dan plak je als platte tekst en voorkom je dat ook allerlei overbodige opmaak wordt gekopieerd.

Formattering verwijderen

– met deze knop kun je de opmaak van de geselecteerde tekst verwijderen; vet, cursief, kleur, enz.

Speciaal teken invoegen

– wil je een speciaal teken of symbool invoegen, dan biedt deze knop mogelijk uitkomst.

Er verschijnt een matrix met symbolen. Heb je gevonden wat je zocht? Klik dan op het betreffende teken. Het teken worden dan ingevoegd op de plaats van de cursor.

Inspringing verkleinen

– verplaats de geselecteerde tekst iets naar links.

Inspringing vergroten

– verplaats de geselecteerde tekst verder naar rechts.

Ongedaan maken

– draai de laatste actie terug.

Opnieuw

– herhaal de laatste actie, oftewel draai de laatste correctie terug.

Help

– toont een scherm met toetscombinaties, een spiekbriefje.

Dat is het.

TinyMCE en de HTML Editor

De visuele editor van WordPress is gebaseerd op TinyMCE.

De HTML editor heeft aanmerkelijk minder functies dan de visuele editor, maar kan ook bijzonder handig zijn. Mits je enige HTML-kennis hebt.