Volgen

WordPress Tutorial | De "gewone" teksteditor van WordPress

WordPress-websites van WebGenerator werken met Visual Composer, een soort 'page builder' waardoor je pagina's veel mooier en sneller kunt opmaken dan met de standaard teksteditor van WordPress (de uitgebreide tutorial over Visual Composer kun je hier downloaden).

Toch werk je in het CMS ook vaak in die 'gewone' teksteditor. Bijvoorbeeld als je met Visual Composer een tekstelement invoegt, maar ook op andere plekken in het CMS. Vandaar deze aparte tutorial.

Alle werkbalken uitklappen

Als je de teksteditor in beeld krijgt valt je misschien op dat er wat weinig knopjes in de werkbalk staan: 

editor-01.jpg

Dat is een typisch WordPress-dingetje: er zijn meer knopjes, maar die komen pas tevoorschijn als je op het uiterst rechtse icoontje in de zichtbare werkbalk klikt. Dit hoef je overigens maar één keer te doen: WordPress onthoudt je laatst gemaakte keuze.

editor-02.jpg

De knoppen in de werkbalken

Nu we de editor volledig in beeld hebben, zullen we de verschillende functies hieronder per stuk toelichten. We gaan er daarbij gemakshalve vanuit dat je de gebruikelijk tekstverwerkingsfuncties wel kent en zullen alleen de functies behandelen die specifiek met WordPress te maken hebben.

Block quote

quote.jpg

Met deze knop maak je een alinea op als 'block quote'. In de praktijk betekent dit dat de alinea in je editor zal inspringen. Op de site zelf gebeurt dat niet op alle sites (het ligt eraan of hiervoor een aparte definitie in je design is opgenomen). Je kunt een alinea echter wel laten inspringen met de knop Inspringing (zie verderop) of met behulp van de Visual Composer. 

Links maken en verwijderen

links.jpg

Met het linker kettinkje maak je een link, met het gebroken rechter kettinkje verwijder je de link weer. De knoppen zijn in eerste instantie 'gedimd': ze komen vol in beeld zodra je een stukje tekst selecteert om daar een link van te maken of juist de link uit te verwijderen.

Een link maken

Je maakt als volgt een link:

  • Selecteer eerst de tekst waar je een link van wilt maken.
  • Klik op het linker kettinkje.
  • Het onderstaande schermpje komt in beeld:

    linkvenster.jpg

  • Je ziet niet meteen het hele schermpje, klik op "Of link naar bestaand bericht of pagina" om dat in beeld te krijgen.
  • In het veld URL kun je een webadres invullen, doe dat altijd inclusief http://
  • Kopieer en plak je een URL, pas dan even op dat er niet 2x http:// komt te staan want de link zal dan niet werken.
  • In het veld Titel kun je optioneel een tekst invullen die zal worden getoond als bezoekers met hun muis over de link heen gaan.
  • Met de optie Open link in een nieuw venster/tab kun je bepalen of de link in een nieuw scherm moet openen. Vuistregels hiervoor:
    • Open links naar externe websites of bestanden (bijvoorbeeld een PDF) in een nieuw scherm.
    • Open links naar pagina's binnen je eigen site in hetzelfde scherm (dus vink dan deze optie niet aan).
  • Links naar berichten of pagina's binnen je eigen site hoef je niet in te typen of te plakken: die kun je selecteren in de onderste helft van het venster.
  • Heb je veel pagina's dan kun je de pagina makkelijk opzoeken met het zoekveldje daarboven.
  • Klik de pagina of het bericht aan en het adres van de pagina wordt automatisch in het veld URL geplaatst.
  • Klik op de button Link toevoegen om de link te plaatsen.
  • Wil je bij nader inzien toch geen link maken, klik dan op Annuleren.

Een link verwijderen

Om een link te verwijderen, selecteer je de link in kwestie en klik je op het gebroken rechter kettinkje.

Een e-mail link maken

Wil je een e-mail link maken, haal dan de tekst http:// weg uit het veld URL en type het gewenste e-mailadres voorafgegaan door mailto: dus als volgt: mailto:janjansen@hotmail.nl

Linken naar een bestand

Wil je linken naar een bestand (bijvoorbeeld om een PDF aan je bezoekers aan te bieden), dan moet je dit bestand eerst uploaden naar de mediabibliotheek. Daar kun je dan het adres van het adres kopiëren en dat als link invullen in het veld URL van het linkvenster. Dit werkt als volgt (we gaan er even vanuit dat je het bestand nog moet uploaden):

  • Ga naar Media en klik helemaal bovenin op de link Nieuw bestand
  • Upload de PDF (onderin beeld verschijnt een tijdbalkje: als dat verdwijnt is het bestand geupload).
  • Ga weer naar Media. Als het goed is ziet je het zojuist geuploade bestand nu helemaal bovenaan staan.
  • Als je je bestand al eens eerder had geupload kun je voorgaande stappen overslaan en het bestand meteen in de mediabibliotheek opzoeken (rechtsboven in het scherm vind je een zoekveld).
  • Klik op de naam van het bestand.
  • Helemaal rechts zie je een blokje met een aantal eigenschappen, waaronder de Bestand URL, ofwel het adres van het bestand:

    bestandsurl2.jpg

  • Kopieer het hele adres en gebruik het om de link te maken zoals uitgelegd onder het kopje Een link maken.
  • Omdat een PDF veelal in een aparte PDF-reader opent, is het raadzaam de link in een apart venster te openen, zodat je je website nog in beeld blijft als mensen de PDF wegklikken.

In dit geval hebben we een PDF als voorbeeld genomen, maar je kunt dit principe ook toepassen voor bestanden als Word, Excel, Powerpoint, etcetera.

Op onze reguliere website vind je een nog wat uitgebreidere uitleg over linken naar een bestand in dit blogartikel.

De "Meer lezen" tag

meerlezen.jpg

Deze knop gebruik je alleen in blogberichten. Van een blogbericht kun je een eerste deel (introductie) laten zien op de overzichtspagina en het hele bericht op een achterliggende pagina door de Meer lezen tag in te voegen. Dit doe je via het derde icoontje van rechts in de bovenste werkbalk van de teksteditor (zet daarbij eerst je cursor op de plaats in de tekst waar je de scheiding wilt invoegen). Op de achterliggende pagina wordt vervolgens het complete bericht getoond, inclusief de introductie boven de Meer lezen tag. In de teksteditor zelf wordt de scheiding aangegeven met een stippellijntje:

meerlezentageditor.jpg

Volledig-venster-modus

fullscreen.jpg

Als je op deze knop klikt wordt de teksteditor vergroot naar de volledige grootte van je browser scherm, of zoals WordPress het zelf noemt: de "schrijven-zonder-afleiding-modus". Een nadeel hiervan is dat je in deze modus niet alle functies van de werkbalk ziet. Zo ontbreekt in deze modus o.a. de functie om kopteksten in juiste kopstijl op te maken.

Paragraaf (kopstijlen toepassen)

paragraaf.jpg

Via dit keuzemenu kun je kopteksten in vaste kopstijlen (Kop 1 t.m. 6) opmaken. Hoe die kopstijlen eruit zien kun je zelf centraal beheren via Options > Tekststijlen. We adviseren je hier gebruik van te maken: je website zal hierdoor over de hele linie consistent en netjes ogen en ook Google vindt het prettig als je met deze kopstijlen werkt. Klik hier voor de aparte tutorial over het beheer en gebruik van deze kopstijlen

Plakken vanuit externe bronnen

pastefrom.jpg

Het is niet altijd verstandig teksten 'zomaar' in je CMS te plakken. Kopieer je tekst uit externe bronnen, dan kun je het beste een van deze knopjes gebruiken:

  • Plakken als platte tekst - Tekst kopiëren en plakken van andere sites of tekstverwerkers resulteert soms in heel anders opgemaakt tekst dan je verwachtte. De reden hiervoor is dat er onder water allerlei HTML en codes meekomen. Om dit te voorkomen, gebruik je de knop Plakken als platte tekst. Hierdoor zal alle ongewenst opmaak, HTML en code uit de geplakte tekst worden verwijderd.
  • Plakken vanuit Word - Tekst plakken vanuit Microsoft Word heeft doorgaans enorme hoeveelheden onnodige én zeer ongewenste HTML-codes tot gevolg. Gebruik daarom voor het kopiëren van Word-teksten altijd de optie Plakken vanuit Word. Hiermee wordt de tekst schoongemaakt. Basale opmaak zoals bijvoorbeeld vette tekst en regeleindes blijven wel behouden.

We horen wel eens dat mensen het jammer vinden dat de opmaak uit hun Word-documenten niet 1 op 1 wordt overgenomen. Dat is een verkeerde redenatie. Je website heeft z'n eigen vaste opmaakkenmerken terwijl elk Word-document weer een andere opmaak kan hebben. Het zou al gauw een rommeltje worden als je de tekstopmaak van je website zou laten bepalen door allerlei verschillende Word-documenten...

Opmaak verwijderen

fum.jpg

Heb je een stukje tekst een bepaalde opmaak gegeven en wil je die opmaak verwijderen? Selecteer dan de tekst in kwestie en klik op dit "gummetje". NB: dit werkt niet bij toegepast kopstijlen. Wil je een kopstijl verwijderen, selecteer dan de koptekst in kwestie, klik op het keuzemenu voor de kopstijlen en kies "Paragraaf". De tekst gaat dan weer terug naar normale opmaak.

Speciale tekens

symbols.jpg

Met deze knop kun je speciale tekens invoegen, zoals ¼ ® » en meer.

Inspringende tekst (en terugspringen)

tab.jpg

Met het rechtericoontje kun je een alinea tekst laten inspringen: zet je cursor aan het begin van de alinea en klik op het icoontje. Met  het linkericoontje kun je tekst weer laten terugspringen (dit icoontje wordt actief als je je cursor voor een ingesprongen alinea zet). Let op: deze functie lijkt misschien een beetje op de "tab" functie van Word, maar dat is het niet. Je kunt met deze functie niet een "tab" midden in een zin toepassen zoals dat bij Microsoft Word wel kan.

Uitleg en sneltoetsen

tinyhelp.jpg

Onder het vraagtekentje vind je een globale uitleg over de teksteditor. Ook vind je hier een overzicht van sneltoets-combinaties die je kunt gebruiken als alternatief voor muishandelingen.

Tabellen

tabellen.jpg

In de derde werkbalk zie je icoontjes voor het invoegen en bewerken van tabellen (het tweede en alle volgende icoontjes worden actief zodra je een tabel hebt ingevoegd en je je cursor in die tabel zet om een bewerking uit te voeren). Het maken van tabellen is géén standaard functie van de editor van WordPress, deze optie is door ons toegevoegd. Om heel eerlijk te zijn wordt het gebruik van tabellen op websites min of meer afgeraden. Uit ervaring weten we echter dat een tabel soms handig kan zijn om gegevens netjes naast elkaar weer te geven (denk aan iets als een prijslijstje). 

We adviseren je echter tabellen met mate te gebruiken en wijzen je erop dat tabellen niet altijd helemaal mooi worden weergegeven in een mobiele weergave van je website.

Overige functies

Boven de werkbalken van de editor zie je nog wat opties, te weten: 

Media invoegen

media2.jpg

Hiermee kun je afbeeldingen invoegen. Deze functie werkt echter niet als je de teksteditor binnen Visual Composer gebruikt omdat je binnen Visual Composer daarvoor een apart element gebruikt (zie de aparte tutorial over Visual Composer, pagina 12). In andere delen van het CMS werkt deze functie wel.

Switchen tussen Wysiwyg-modus / Tekst-modus

wysiwyg-tekst.jpg

Rechtsboven de editor zie je twee tabjes: Wysiwyg (What You See Is What You Get) en Tekst. Deze geven de modus van de editor aan. Standaard werk je in Wysiwyg-modus. In Tekst-modus krijg je een rudimentaire HTML-weergave te zien, zoals hieronder weergegeven. We kunnen je meteen geruststellen... in de praktijk zul je nooit in deze modus hoeven werken.

textmode.jpg

 


 

Gerelateerde tutorials

Was dit artikel nuttig?
Aantal gebruikers dat dit nuttig vond: 0 van 0
Hebt u meer vragen? Een aanvraag indienen

Opmerkingen