Visuele editor in WordPress verkennen

WordPress was oorspronkelijk gebouwd als blog systeem dat het publiceren van online content eenvoudig zou moeten maken.

In de tussentijd is WordPress niet alleen een blog systeem, maar is het een volwaardig Content Management Systeem (CMS) geworden.

Je hebt de volledige controle over het ontwerp en functionaliteiten van je WordPress website.

Zonder content is een website echter niets en daarom heeft WordPress ook genoeg aandacht gegeven aan het zo eenvoudig mogelijk maken om content te creëren. De visuele editor in WordPress is hier het resultaat van.

De visuele editor in WordPress heeft diverse mogelijkheden waar je gebruik van kunt maken zonder HTML of andere programmeertalen te kennen. In dit artikel geef ik uitleg over wat je allemaal kunt in de visuele editor.

De editor in WordPress

In WordPress kun je content creëren en beheren zonder ook maar een code te hoeven gebruiken. Je kunt dit doen met de visuele editor, ook wel bekend als de WYSIWYG editor, dat staat voor What You See Is What You Get.

Naast de visuele editor heb je ook nog de tekst editor, die ook bekend staat als de HTML editor. In deze versie van de editor kun je van HTML-codes gebruikmaken om diverse dingen te bereiken. Verder heb je natuurlijk ook nog de Media uploader, de plek waar je afbeeldingen kunt uploaden.

Wanneer je voor de eerste keer een bericht of pagina wilt aanmaken in WordPress zal direct de visuele editor actief zijn.

Editor in WordPress

Is dit niet het geval? Je kunt de visuele editor eenvoudig bereiken door rechtsboven op “Visueel” te klikken.

Visuele editor WordPress

De tekst editor is uiteraard te bereiken door op “tekst” te klikken en afbeeldingen kun je toevoegen door op “Media toevoegen” te klikken.

Tekst opmaken in WordPress met de visuele editor

Wanneer je voor het eerst een artikel maakt in WordPress zal je onderstaande toolbar te zien krijgen met verschillende knoppen om de tekst op te maken.

Toolbar van de visuele editor in WordPress

Het is echter op een eenvoudige manier mogelijk om nog meer knoppen in deze toolbar te krijgen. Wanneer je op het icoontje “Werkbalken weergeven/verbergen” klikt (zie afbeelding hieronder), verschijnt er een tweede rij met knoppen om de tekst op te maken.

Volledige toolbar van de visuele editor in WordPress

In de meeste gevallen zullen al deze opties voldoende mogelijkheden geven als het gaat om het opmaken van de tekst. Daarnaast zal je de iconen die in WordPress gebruikt worden waarschijnlijk ook wel herkennen van een tekstverwerkprogramma als Microsoft Word.

De iconen werken ook precies hetzelfde als in Microsoft Word en andere tekstverwerkprogramma’s en daarom zal ik deze niet allemaal behandelen. De meest gebruikte zal ik nog wel even voor je op een rijtje zetten:

  • B – zorgt ervoor dat je woorden dik kunt drukken;
  • I – zorgt ervoor dat je woorden schuin kunt drukken;
  • abc – zorgt ervoor dat je woorden kunt doorstrepen;
  • U – zorgt ervoor dat je woorden kunt onderstrepen.

Laten we nu overgaan op de onbekendere iconen en wat deze knoppen voor je kunnen betekenen.

Blockquote

Wil je een quote plaatsen in je artikel, dan kun je eventueel gebruik maken van de blockquote knop.

Blockquote opmaak knop

Wat deze knop; precies doet? Afhankelijk van het thema dat je gebruikt zal de quote in het artikel net iets anders worden vormgegeven dan de rest van de tekst, waardoor het duidelijk wordt gemaakt dat het om een quote gaat.

Links toevoegen of verwijderen

Het komt regelmatig voor dat je een link wilt toevoegen of verwijderen in een artikel. Je kunt met de volgende iconen een link toevoegen of verwijderen.

Links toevoegen of verwijderen

Het icoontje links zorgt ervoor dat je een link kunt toevoegen en het icoontje rechts zorgt dat je een link weer kunt verwijderen.

Standaard zijn deze twee knoppen inactief. Zodra je woord(en) selecteert in het artikel worden de knoppen actief en kun je een link toevoegen of verwijderen.

Lees-meer-tag

Lees-meer-tag

De lees-meer-tag knop wordt vaak in eerste instantie over het hoofd gezien in de visuele editor van WordPress, totdat mensen erachter komen wat de functie is.

Met de lees-meer-tag kun je het punt bepalen waar “Lees meer” komt te staan in je bericht op de homepage en categorie- en tagpagina’s.

Wanneer je geen gebruik maakt van deze functie zal heel je artikel zichtbaar zijn op deze pagina’s, tenzij je thema gebruikt maakt van “the_excerpt”, dan worden er standaard een x aantal woorden getoond per bericht.

Het is in de meeste gevallen dus zeker nodig om de Lees-meer-tag knop te gebruiken. Ik gebruik het voor al mijn artikelen op deze website.

Wist je dat je ook zelf per artikel kunt bepalen wat er in plaats van “lees meer” komt te staan? Je kunt hier meer over lezen in het artikel “Slurp bezoekers binnen met de More-tag”.

Afleidingsvrije-modus

Wanneer je in WordPress artikelen wilt schrijven met zo min mogelijk afleidingen, dan kun je het best gebruik maken van de afleidingsvrije-modus. Je kunt in deze modus komen door op het icoontje te klikken dat helemaal rechts staat op de eerste rij.

Afleidingsvrije modus

Sinds WordPress 4.1 is de afleidingsvrije-modus helemaal vernieuwd. Wanneer je op de knop klikt zullen de meta boxen onder en naast de editor wegschuiven en verdwijnen. Hetzelfde geldt voor de linker sidebar met alle menu-items en het ziet er als volgt uit:

Afleidingsvrij schrijven in WordPress

Kom je met de muis buiten de visuele editor, dan schuiven alle elementen weer terug op hun plek. Je kunt alle elementen tevens terugkrijgen door op escape te drukken. Wil je volledig uit deze modus komen, dan moet je nog een keer op hetzelfde icoontje klikken waarmee je het geactiveerd hebt.

Tekstformaat wijzigen

Paragraaf is altijd de standaard tekstformaat. Wanneer je een artikel schrijft wil je natuurlijk naast de standaard tekstformaat ook koppen toevoegen aan je artikel.

Je kunt de tekstformaat van een zin wijzigen door een zin te selecteren en op paragraaf te klikken.

Paragraaf opmaak knop

Je kunt vervolgens uit een dropdown-menu kiezen uit koptekst 2, 3, 4, 5 of 6. Waarom je niet voor koptekst 1 moet kiezen? De kopteksten maken heading tags aan die effect hebben op de zoekmachine optimalisatie van je WordPress website. Koptekst 1 wordt als het goed is al gebruikt voor de titel van je bericht en Google ziet koptekst 1 liever maar een keer per pagina.

Ik gebruik de kopteksten altijd als volgt:

  • Koptekst 1: Titel van artikel;
  • Koptekst 2: koppen;
  • Koptekst 3: Sub-koppen.

Hoe de kopteksten precies vorm worden gegeven op je website is afhankelijk van het thema dat je gebruikt en hetzelfde geldt of Koptekst 1 voor de titel gebruikt wordt. Wil je precies zien hoe je kopteksten moet maken, bekijk dan ook nog het artikel “Hoe maak je tussenkoppen in WordPress?“.

Tip: Wil je van een zin een duidelijke kop maken, dan moet je ervoor zorgen dat de zin op een losse regel staat. Doe je dit niet, dan worden de zinnen eromheen ook groot gemaakt.

Plakken als tekst

Wanneer je jouw artikelen maakt in een programma als Microsoft Word en de opmaak niet wilt behouden, dan kun je in WordPress op het icoontje “Plakken als tekst” klikken.

Plakken als tekst

Wil je de opmaak wel behouden, dan hoef je deze functie uiteraard niet aan te zetten.

Opmaak verwijderen

Wanneer je experimenteert met hoe je je artikel op wilt maken kan het nogal een gedoe zijn om alles weer normaal te krijgen zonder opmaak. Het kan ook zijn dat je een tekst met opmaak hebt geplakt in WordPress en dat je van de opmaak af wilt. WordPress heeft hiervoor de knop “opmaak verwijderen”.

Opmaak verwijderen knop

Zorg ervoor dat je alle tekst waarvan je de opmaak wilt verwijderen selecteert en klik op de knop om de opmaak te verwijderen. De tekst zal nu weer gebruikmaken van het standaard tekstformaat.

Deze knop werkt overigens niet voor kopteksten en blockquotes, dit moet je zelf weer terug corrigeren.

Speciaal karakter

Speciaal karakter knop

Wil je een speciaal karakter gebruiken in WordPress en heb je geen idee hoe je dit in de editor krijgt? Wanneer je op de knop “Speciaal karakter” klikt heb je de keuze uit diverse speciale karakters.

Het enige wat je hoeft te doen is op de karakter te klikken die je wilt gebruiken en de karakter zal in de editor tevoorschijn komen.

Ongedaan maken en Opnieuw uitvoeren

Heb je iets gedaan wat je graag weer ongedaan wilt maken of heb je juist iets ongedaan gemaakt wat je weer opnieuw wilt uitvoeren? Je kunt dan gebruikmaken van onderstaande knoppen:

Ongedaan maken of opnieuw uitvoeren knoppen

Met de linkerknop kun je dingen ongedaan maken en met de rechterknop kun je alles weer opnieuw laten uitvoeren.

Naast de knoppen die je hiervoor kunt gebruiken zou je eventueel ook de toetscombinaties CTRL + Z (ongedaan maken) of CTRL + Y (opnieuw uitvoeren) kunnen gebruiken.

Sneltoetsen die je in WordPress kunt gebruiken

Je hebt in de visuele editor dan wel allemaal verschillende knoppen in een toolbar waar je gebruik van kunt maken, maar wist je dat er voor de meeste knoppen ook sneltoetsen zijn? Het worden ook wel toetscombinaties genoemd en je kunt er hetzelfde mee bereiken als met de knoppen in de toolbar.

Benieuwd van welke sneltoetsen je in WordPress gebruik kunt maken? Je kunt hierachter komen door op de volgende knop te klikken in de visuele editor:

Toetscombinaties knop

Voor het gemak staat hieronder ook de complete lijst met sneltoetsen die je in WordPress kunt gebruiken.

Alle toetscombinaties in WordPress

Conclusie

Wanneer je al een ervaren WordPress gebruiker bent zal je met de meeste dingen wel bekend zijn die ik hierboven heb beschreven.

Ben je een nieuwe WordPress gebruiker, dan hoop ik dat dit een handige startersgids voor de visuele editor in WordPress is en dat de mogelijkheden en beperkingen duidelijk voor je zijn.

Heb jij nog meer tips die je met ons wilt delen dat het werken in de visuele editor gemakkelijker maakt?

8 reacties Voeg ook een reactie toe

    • Eerlijk gezegd ben ik het daar niet mee eens. Wanneer dat in de editor komt zal je zien dat mensen opeens allerlei verschillende lettertypes gaan gebruiken op verschillende pagina’s van de website.

  1. Hoi hier een vraagje van een leek.
    Vorig jaar is mijn website overgegaan naar WP. Daar heb ik bij pagina’s de gegevens gevuld onder het visuele kopje.
    Nu heb ik ineens het volgende: de keuze tussen visueel of tekst is ineens veranderd naar wysiwys of tekst en beide geven wat ik noem computertaal ipv hoe je het op de site zie waardoor ik geen (in mijn geval simpele) aanpassingen van prijzen of tekst meer kan/durf te doen. Iemand een idee hoe ik de instelling weer zo krijg dat ik de echte tekst zoals op de site zie?
    Heb totaal geen verstand verder van computers en was blij dat ik dit kon, alleen nu zit ik met dit geval en kan ik geen aanpassingen doorvoeren. Degene die mij in eerste instantie heeft geholpen zegt nu dat ik maar op google moet kijken. Daar is alles te vinden?! Dus, lichte paniek aan deze kant.

    • Vroeger heeft de visuele editor ook wel “wysiwyg” geheten, maar dat is ondertussen alweer een tijdje geleden. In principe zou je hier gewoon hetzelfde moeten kunnen doen als in de visuele editor, maar zoals je al aangeeft is dit bij jou niet mogelijk.

      Mijn vermoeden is daarom dat een plugin voor een conflict zorgt. Je zou dit kunnen testen door alle plugin uit te schakelen en vervolgens te kijken of het probleem dan is opgelost. Wanneer het probleem is opgelost kun je de plugin weer 1 voor 1 aanzetten om te achterhalen welke plugin de boosdoener is.

  2. Hoi Maikel,

    Fijne uitleg weer!

    Ik gebruik de Visual Composer plugin voor WordPress.
    Deze gebruikt voor afbeeldingen de ‘id’ uit de mediabibliotheek bv “vc_single_image image=”3114″ ”

    In de ‘classic mode’ kan ik makkelijker de naam en ‘alt’ gebruiken: “src=”http://neo-eko-meubelwerktekening.nl/wp-content/uploads/2014/02/preview-tekening-eenpersoonsbed-sol.jpg” alt=”Voorbeeld werktekening eenpersoons bed Sol”

    Is deze laatste manier niet beter voor de SEO voor afbeeldingen? (Google Afbeeldingen)

    groet, Rob

    • Ik heb op een andere website ook de plugin Visual Composer, maar is het niet zo dat de alt tag ook gebruikt wordt wanneer je deze al hebt ingevuld voordat je de afbeelding selecteer in Visual Composer? Ik weet niet in welk element je de afbeelding toevoegt?

      ID kun je trouwens gebruiken in CSS en heeft niets te maken met SEO. Het hebben van een alt-tag is inderdaad wel beter voor SEO.

Geef een reactie