De editor

De standaard Wordpress editor TinyMCE heeft enkele beperkingen zoals automatisch verwijderen van witruimtes. Installatie van plugin TinyMCE Advanced brengt hierin verbetering - in het volgende wordt deze editor besproken.

editor wordpress

De standaard weergave is beperkt tot 1 regel icoontjes voor de basisbewerkingen. Door klikken op het laatste icoontje komt een 2e rij tevoorschijn.

editor uitgebreid wordpress

Via het beheerscherm van de plugin TinyMCE Advanced is de layout en het aantal beschikbare bewerkingen in de editor verder te configureren.

Tekstopmaak

Een belangrijke grondregel voor plaatsing van tekst is: ofwel direct in het editorveld typen ofwel vanuit een ander bestand invoegen via de optie "plakken als tekst" wp plaintext. Daardoor wordt alle opmaak die meekomt vanuit de tekstbron verwijderd. Alleen dan gehoorzaamt de tekstopmaak aan de standaard stijlen die via de theme geformuleerd zijn, en is de eventueel zelf toegevoegde stijl onder controle.

De functies van de bewerkingsopties spreken voor zich; bij mouseover verschijnt nog een popup kadertje met beschrijving van de functie.
Evenals voor tekstverwerkingsprogramma's geldt ook voor deze webeditor het onderscheid tussen harde return (Enter) en zachte return (Shift/Enter). In opmaak betreft het het verschil tussen een nieuwe alinea, veelal met witruimte, en een nieuwe regel zonder extra witruimte.

Het gebruik van koppen is in webtekst aan regels gebonden. Zo dient de Koptekst 1 slechts 1x op de webpagina voor te komen, en is meestal al automatisch toegekend aan de pagina-titel. De koppen dienen verder een rangorde voor de indeling van de tekst uit te drukken. Afzonderlijke paragrafen kan je b.v. een opmaak Koptekst 3 geven.

Kolom-opmaak
Wanneer een pagina opgemaakt moet worden in kolommen is er een plugin beschikbaar die de opties van de editor uitbreidt met extra functionaliteit: "Column shortcodes". Shortcodes zijn korte stukjes code die door veel plugins gebruikt worden om binnen het kader van de editor extra functionaliteit te kunnen oproepen. De plugin voor genereren van kolommen voegt zelfs een extra button toe om deze shortcodes te genereren, naast de knop voor toevoegen van media:

wp columns icon

Begin een pagina met indeling in kolommen door klik op deze knop; er verschijnt een keuzelijst. De laatste kolom van een serie moet altijd de versie _last hebben, aangezien voor deze kolom meestal aangepaste marges moeten kunnen gelden.
Voor een 2-koloms indeling ziet de gegenereerde shortcode er dan als volgt uit:

[one_half][/one_half]

[one_half_last][/one_half_last]

De inhoud wordt vervolgens tussen deze tags geplaatst

[one_half]

Inhoud linker kolom...

[/one_half]

[one_half_last]

Inhoud rechter kolom...

[/one_half_last]

Via de shortcode plugin kunnen zelfs nog paddings toegevoegd worden (witruimtes tussen inhoud en kolomkader). Hiermee kom je echter al snel in problemen wanneer de paginaweergave responsive is. Voor optimale resultaten moet dan ook al stijlcode in het thema opgenomen zijn voor veel gebruikte indelingen.

Invoegen van media

zie ook de Wordpress Codex
Media invoegen is in de nieuwere versies van Wordpress steeds eenvoudiger geworden. Via de knop "Media toevoegen" links boven het tekstveld schakel je over naar mediabeheer voor uploaden van een nieuw bestand of selecteren van een al beschikbaar bestand.

media wordpress

Er is een aantal opties ingebakken, zoals een Galerij aanmaken, invoegen via URL enz. Weergave hangt af van eigenschappen van de theme. Via deze weg kan b.v. ook een link naar een pdf gemaakt worden.

Invoegen van een video gehost bij Youtube of Vimeo is inmiddels uiterst simpel: alleen de URL van de video is nodig, Wordpress zorgt verder voor weergave in een speler.

Ook een zelf gehoste video kan eenvoudig ingevoegd worden, op de zelfde manier als een afbeelding. Wel blijkt dat de video bepaalde eigenschappen moet hebben wil deze ook op een platform als iOS goed afspelen. In mijn ervaring werk dat alleen goed wanneer de video geconverteerd wordt naar een .mp4 bestand, framerate precies 30/sec, en HD resolutie 1920x1080 teruggebracht naar 1080x607.

Een afbeelding invoegen

Plaats de cursor op de invoegplek en klik de button "Media toevoegen". Selecteren van een afbeelding opent een instellingsvenster waar je nadere gegevens kunt invullen of aanpassen:

media weergave instellingen

Bijlagedetails

  • URL: pad naar afbeelding, wordt automatisch gegeneerd
  • Titel: naam van het bestand, eventueel te wijzigen; wordt als alt-tekst gebruikt wanneer de andere velden leeg blijven
  • Onderschrift: optioneel, wordt weergegeven onder afbeelding, wordt als alt-tekst gebruikt wanneer dat veld zelf leeg is
  • Alt-tekst: alternatieve tekst, geeft uitleg voor mensen die geen afbeelding zien; ook nuttig voor zoekrobots
  • Beschrijving: kan weergegeven worden wanneer thema daartoe is ingericht

Weergave-instellingen

  • Uitlijning: Links, Gecentreerd, Rechts, Geen
  • Link naar: Geen, Mediabestand, Bijlagepagina, Aangepaste URL
  • Afmeting: Tumbnail, Gemiddeld, Volledige grootte (groottes afhankelijk van instellingen voor Media)

wp image editWanneer een afbeelding eenmaal in een bericht of pagina is ingevoegd is van daaruit ook verdere bewerking mogelijk door op de afbeelding te klikken. Er verschijnen bewerkingsicoontjes die voor zich spreken: uitlijnen kan direct aangepast worden, of het instellingsvenster kan geopend worden. Daarin is nog een geavanceerde instelling op te geven, voor Attribuut afbeeldingstitel. Je kunt hier een korte tekst invoeren die in een popup verschijnt wanneer de bezoeker de muis over de afbeelding beweegt.

wp image caption titleVoorbeeld van afbeelding met onderschrift en titel attribuut dat bij mouseover van gelinkte afbeelding verschijnt:

 

 

 

 Wordpress kent nog 2 andere soorten afbeeldingen; weergave is afhankelijk van thema functies:

  • Kopafbeelding (header)
  • Uitgelichte Afbeelding (featured image)

 Via dashboard-item Weergave > Header is instelling van een kopafbeelding aan te passen. De Wordpress standaard voorziet niet in verschillende afbeeldingen voor verschillende pagina's. Deze functie is toe te voegen via een plugin.

Een uitgelichte afbeelding is wel per bericht of pagina in te stellen. De plaats en stijl van weergave is echter geheel afhankelijk van het thema. De plek voor instelling van deze afbeelding is in de kolom rechts naast de editor onderaan.

wp featured image

Tekstlink invoegen

Wanneer je een woord of woordgroep wilt laten linken naar een andere webpagina begin je met selecteren van de linktekst:

textlink select

 Vervolgens klik je het link-icoontje aan in de editor: "Link invoegen/bewerken"; je krijgt een popup venstertje te zien waarin je de link URL van de te linken pagina kunt invoeren.

textlink insert

Je kunt daarna ofwel op het blauwe pijltje klikken om de link toe te passen, of het instellingsicoontje aanklikken voor meer opties. Veel gebruikt is de optie "Open link in een nieuw tabblad", die je hier kunt aanvinken. Vervolgens kan je daar de link toevoegen.

 PDF invoegen

Een pdf is op vergelijkbare manier te plaatsen; het gaat dan om een tekstlink naar een pdf-bestand dat naar de mediabibliotheek is geupload. Het titel-veld wordt als link-tekst weergegeven. Voor meer instellingen klik je 1x op de link en vervolgens op het edit-icoontje

wp link naar pdf

Het volgende popup venster toont de verdere instellingsopties; belangijkste is dat je checkbox "Open link in een nieuw tabblad" kunt aanvinken, waardoor de pdf in een nieuw browser tabblad zal openen.

wp link edit

 Video invoegen

Voor een zelf gehoste video zijn de eerste stappen gelijk aan die voor een afbeelding. Upload is aan een maximum omvang gebonden. Verder is de opmerking hierboven over converteren van de gebruikte video naar een op alle platforms afspeelbaar bestand belangrijk
Door selectie van de video voor invoegen in bericht of pagina opent een aangepaste set instellingen.

wp video edit

Is de video eenmaal ingevoegd, dan kun je nog meer instellingsmogelijkheden oproepen door 1x op de video te klikken en vervolgens op het bewerk-icoontje. Het volgende venster geeft o.a. de mogelijkheid afspeelwijze in te stellen (automatisch starten, in een lus afspelen). Je kunt ook een zogenaamde "Posterafbeelding" toevoegen, die in het videoframe zichtbaar zal zijn voordat de video gestart wordt. Ten slotte kan je nog 2 andere versies van de video aanbieden, zodat de afspeelmogelijkheden van de HTML5 speler op alle platforms zo goed mogelijk gedekt zijn. Het gaat om de alternatieve bestandsformaten .ogv en .webm

wp video details

Ten slotte de plaatsing van een op Youtube of Vimeo gehoste video. Daartoe volstaat plakken van de URL in de tekst. Wordpress doet de rest, en je krijgt al in de editor de video te zien.

https://www.youtube.com/watch?v=5UqjIA_F5GA

https://vimeo.com/85528256