Gutenberg De nieuwe WordPress editor

Transcriptie

1 Gutenberg 1 / 16 De nieuwe WordPress editor

2 Gutenberg De nieuwe WordPress editor Voorwoord WordPress 5.0 en de nieuwe Gutenberg editor Gutenberg uitgelicht De nieuwe indeling van je editor scherm De bovenkant Het middenvlak De zijbalk De blokview De document view Meest gebruikte blokken De tussenkop en de lijst Meer en pull-quote Galerij, citaat en audio Inline elementen Algemene blokken Het onderdeel opmaak Layout elementen Widgets Insluitingen Ons cadeau voor jou / 16

3 3 / 16 Voorwoord Bedankt voor het downloaden van deze pdf-handleiding voor de nieuwe Gutenberg editor. Je kunt hiermee makkelijker aan de slag met leren van de nieuwe editor. We hopen dat je het nuttig vindt. Focus Websites is een full service webbureau, geleid door Martha Pelkman en Rolf Veringmeier. Samen timmeren zij sinds 2016 aan de weg om mooie websites neer te zetten, goede en goedkope hosting voor websites aan te bieden en websites te onderhouden. Kijk op voor ons volledige dienstenpakket. Over Rolf Webdeveloper, Wordpress-specialist en Php programmeur sinds Ik heb een passie voor programmeren en ben mede eigenaar van Focus Websites. Over Martha Co-creator. Webdeveloper, tekstschrijver, SEO-specialist. Ik heb al mijn hele leven een passie voor alles wat met internet en tekst te maken heeft. Mede-eigenaar van Focus Websites en eigenaar van Tekstbureau DrsPee. Veel plezier met de nieuwe editor! Hartelijke groet, Martha Pelkman en Rolf Veringmeier Focus Websites Focus Websites 2018 info@focuswebsites.nl

4 4 / 16 WordPress 5.0 en de nieuwe Gutenberg editor Met de nieuwe versie van WordPress 5.0 en de nieuwe editor Gutenberg wil het platform de strijd aanbinden met platforms zoals Wix, Weebly, Medium, Squarespace en andere, oneerbiedig gezegd, sleur-en-pleur platformen. De nieuwe editor is vernoemd naar de uitvinder van de boekdrukkunst: Johannes Gutenberg, die als eerste met losse letters werkte om een boek te maken. Voordat Gutenberg dit deed, bestond de blokdruk al. Dat wil zeggen: men maakte van iedere bladzijde een blok en daarmee drukte men een boek. Door het gebruik van losse letters konden de boekdrukkers de letters opnieuw gebruiken en hoefde er niet steeds opnieuw een blok te worden gemaakt. De grootste verandering in de nieuwe editor is dat alles als blok wordt neergezet. Voor de titel vind je een blok, voor de tekst daaronder staat een blok. Daarmee kun je de tekst toevoegen. Gutenberg uitgelicht In deze pdf zullen we uitleggen wat er allemaal kan met de nieuwe editor. Er zullen mogelijk nog wel wat dingen veranderen, omdat de editor nog in beta is, maar dan zullen wij dat natuurlijk onmiddellijk aanpassen in onze handleiding. We zullen de volgende onderwerpen behandelen: De nieuwe vormgeving en waar je wat kunt vinden; De verschillende blokken die mogelijk zijn: De standaard blokken; Layout, opmaak en blokken; Widgets; Insluitingen zoals YouTube en Twitter We zullen ook een schets proberen te geven van de voordelen voor WordPress websitebouwers. Zelfs als je als bouwer niet van visual builders houdt voor je teksten. De nieuwe indeling van je editor scherm Laten we beginnen met de nieuwe vormgeving van de editor. Als je straks een nieuw blog wil beginnen of een nieuwe pagina, dan krijg je een volledig nieuw bewerkingsscherm voor je. Het is handig om te weten waar alle mogelijkheden zich bevinden en wat er überhaupt straks allemaal mogelijk is met de Gutenberg editor. Omdat de editor nog in beta is, en het nog niet helemaal vlekkeloos verloopt, zullen we uiteraard nog updates doen naarmate de publicatie datum van WordPress 5.0 en Gutenberg dichterbij komen. AFB 1 DE EERSTE AANBLIK De bovenkant Hier vind je verschillende opties voor je nieuwe stuk tekst. In de linkerbovenhoek, vind je een plusje in een rondje. Hiermee voeg je nieuwe blokken toe aan je pagina of post. De verschillende blokken zullen in de volgende blogpost behandelen met alle opties die erbij komen kijken.

5 5 / 16 AFB 2 DE VERSCHILLENDE MOGELIJKHEDEN De halfronde pijltjes zijn de mogelijkheden om iets ongedaan te maken en opnieuw te doen, zoals je die in Word ook hebt en het (i) geeft je extra informatie over de structuur van je content. Je ziet hierin het aantal woorden, het aantal koppen dat je hebt gebruikt en het aantal paragrafen en blokken. Waarschijnlijk heb je ook al gezien, dat je concept met grotere regelmaat wordt bewaard dan in de oude editor het geval was. Aan de rechterkant, een beetje rechts van het midden zie je een wolkje, waarmee je ook zelf je concept kunt opslaan. Daarnaast zie je de voorbeeld en publiceer knop. Als je nu op publiceren klikt, dan is je blog echter niet direct gepubliceerd. Je krijgt dan het publiceerblok te zien zoals dat in de oude editor stond. Het tandwiel geeft je de mogelijkheid of je wel of niet de zijbalk naast de editor wil zien. Als je de plugin van Yoast hebt geïnstalleerd, dan zie je daarnaast de Y van de Yoast instellingen. Het middenvlak In het middenvlak kun je klikken met je muis op de tekst Voeg je titel toe of Schrijf je verhaal om je tekst toe te voegen. Deze editor werkt eigenlijk net als de oude editor, alleen heeft hij een paar leuke extra s die ik in het volgende blog zal uitlichten. Naast de schrijf je verhaal tekst zie je al drie mogelijkheden: Het toevoegen van een plaatje Het toevoegen van een opsomming Het toevoegen van een tussenkop Zo kun je snel de opmaak toevoegen die je wil voor die alinea of een tussenkop toevoegen. De zijbalk Aan de rechterzijde zie je onder de publiceerknop een zijbalk met de mogelijkheden document en blok. In deze zijbalk kun je kiezen voor verschillende opties. Afhankelijk van het blok dat je hebt gekozen, kun je aanpassingen doen aan je tekst. De blokview In de blok view zie je de instellingen die mogelijk zijn van bijvoorbeeld een tekstblok. Voor ieder blok is dit anders. Je kunt nu ook makkelijk je teksten aanpassen of een begin initiaal toepassen (zoals wij gedaan hebben aan het begin van dit blog.

6 Er zijn ook wat toevoegingen gekomen aan de opties van je alinea, zoals de reeds genoemde initiaal, maar ook het groter of kleiner maken van de tekst, een achtergrondkleur toevoegen en, voor de bouwers onder ons, een css-klasse. Het is nog niet mogelijk een plaatje toe te voegen en dan uit te lijnen zoals jij het wil, zoals je ziet. Mogelijk komt daar nog een oplossing voor. 6 / 16 AFB 3 DE ZIJBALK De document view In de document view, die overigens wegspringt op het moment dat je een stukje tekst gaat typen, zie je eigenlijk de standaard blokken die je nu ook hebt in je editor. Een van de nadelen ervan, vind ik dat je de blokken niet meer in een voor jou prettige volgorde kan slepen, zoals dat nu wel kan. Naast de blokken die we al kennen, zoals Status & Zichtbaarheid, Categorieën, Tags en Uitgelichte afbeelding, zien we nu ook een blok voor Samenvatting. Dit blok is een nieuwe toevoeging in de editor. Deze samenvatting is niet de metabeschrijving van de Yoast plugin, maar geeft je de mogelijkheid om een samenvatting op je blogpagina te laten zien. Als je dus een blog hebt, waarbij je op de voorpagina alleen de uittreksels laat zien, dan kun je hier nu een samenvatting van je blog laten zien, of een teaser plaatsen, of een interessante andere manier creëren om mensen op de lees meer link te laten klikken. We gaan de diepte in. Ik loop alle opties langs die mogelijk zijn met de blokken van de nieuwe WordPress editor. En dat zijn er veel, dus ga er maar eens goed voor zitten. De blokken voor pagina s en blogs vind je rechtsboven in onder het plusje. Je kunt op de links hieronder in de lijst klikken als je snel naar een onderdeel wil gaan. Meest gebruikte blokken We beginnen met de blokken die je vindt bij Meest gebruikt. Hier zie je blokken die je vaak nodig hebt in je pagina s of posts. Ieder blok dat je in de pagina of post stopt, heeft zijn eigen mogelijkheden. AFB 4 MEEST GEBRUIKT Paragraaf is het blok waar de tekst in komt te staan. Aan de zijkant krijg je dan een blok waar je de tekstinstellingen kunt aanpassen. In de vorige blogpost heb ik al laten zien dat je een initiaal kunt toepassen, maar ook dat je de grootte van je tekst kunt aanpassen. Let wel: als je de grootte aanpast, dan geldt dat voor het hele blok. Het is niet mogelijk om stukjes tekst in een alinea aan te passen. Je past gelijk de hele alinea aan. Nieuw is

7 dat je een blok een achtergrondkleur kan meegeven door de kleurinstellingen aan te passen. Onder de kleurinstellingen kun je zowel de tekst als achtergrond aanpassen. 7 / 16 AFB 5 KLEURINSTELLINGEN Het tweede meest gebruikte blok is de afbeelding en ook die komt met mooie mogelijkheden voor het vertonen van je afbeelding. Het begint ermee dat je kunt aangeven welke alternatieve tekst je kunt weergeven voor je afbeelding. Je kunt de grootte aanpassen en je kunt een link ingeven. AFB 6 DE ZIJBALK Het afbeeldingsblok in de editor zelf, geeft je nog de mogelijkheid om de afbeelding te centreren, rechts of links uit te lijnen en om het blok te bewerken. AFB 7 DE MOGELIJKHEDEN VAN HET AFBEELDINGSBLOK De tussenkop en de lijst Deze blokken spreken voor zich, maar ik wil ze toch even benoemen. De tussenkop geeft je namelijk de mogelijkheid om heel makkelijk een niveau aan te geven. Niet alleen in de lopende tekst van de editor, maar ook aan de zijkant die dan nog de extra mogelijkheid geeft om je koptekst uit te lijnen. De geavanceerde opties geven je de mogelijkheid om een bookmark neer te zetten. Dat is als je bijvoorbeeld bij een artikel dat zo lang wordt als dit, een soort inhoudsopgave kan neerzetten, waarmee je makkelijk naar de verschillende onderdelen kunt gaan. Je vult een naam in voor het anker en die zet je dan weer in optie waar je de link toevoegt. De opsommingslijst is altijd een nieuw blok. Deze geeft overigens geen andere opties. Door de opties bij het blok zelf (zie afbeelding 5), kun je wel de inspringing vergroten, waardoor je een opsomming in een opsomming krijgt. Meer en pull-quote Met het meer blok, kun je als je de samenvatting niet gebruikt, een read more tag invoegen. Dan wordt je blog afgekapt op je blogpagina en vervolgens krijg je een Lees meer -link naar de rest van je blog.

8 8 / 16 AFB 8 DE PULL-QUOTE Dit is een pull-quote, grafische weergave van de blockquote. Deze heeft verder weinig opties. Als je css kunt schrijven, kun je het lettertype aanpassen en een klasse meegeven aan het citaat. Galerij, citaat en audio AFB 9 DE GALERIJ

9 9 / 16 Dit is een galerij. In het zijblok heb je weer verschillende mogelijkheden om je galerij vorm te geven. Het is niet meer mogelijk of nog niet mogelijk om een diashow van je galerij te maken. De diashow komt vanuit de Jetpack-plugin. Het kan dus zijn dat we daarop moeten wachten of dat Gutenberg zelf met een diashow optie komt. Het verschil tussen een pull quote en een citaat zie je hier. Het is visueel iets minder interessant: AFB 10 HET CITAAT Een audio fragment invoegen kun je doen via het blok audio. Dat ziet er zo uit: AFB 11 EEN AUDIO BESTAND INVOEGEN Inline elementen Er is op dit moment maar een inline element. Inline wil zeggen dat het in de lopende tekst wordt toegevoegd. Het enige inline element is het toevoegen van een plaatje. En dat werkt op het moment van schrijven nog niet helemaal naar behoren. Je kunt het plaatje namelijk nog niet uitlijnen terwijl de tekst ernaast blijft doorlopen. Hier is melding van gemaakt op het WordPress forum en zodra het wel kan, zullen we dit aanpassen in deze handleiding. Algemene blokken Veel van de algemene blokken heb ik al behandeld in het stukje over de meest gebruikte blokken. Ik zal het hier alleen over de andere vier blokken hebben, namelijk omslag afbeelding, bestand, subkop en video. Een omslagafbeelding is een plaatje waar je een titel doorheen kan zetten. Je zou dit bijvoorbeeld kunnen gebruiken om de titel van je blog in te zetten aan het begin van je post. Of om de header van je pagina te maken. In de zijbalk kun je nog de doorzichtigheid van je plaatje aanpassen.

10 10 / 16 AFB 12 OMSLAGPLAATJE Met het blok bestand, kun je op een makkelijkere manier bestanden delen in je blogs of pagina s. Via uploaden in de mediabibliotheek werkt het nog niet, maar als je de uploadknop gebruikt in het blok zelf, dan lukt het wel. Er zit dan een mooie downloadknop bij die je overigens ook uit kunt zetten in de zijbalk. Gutenberg is heel behulpzaam in de omschrijving van de subkop: Wat is een subkop? Kleiner dan een kop, groter dan standaard tekst. Zoals je hieronder ziet hebben wij dus uitgetest wat die subkop nu precies doet. h2 kop Subkop De subkop heeft een lichtere kleur dan de gewone koppen. Op een lichte achtergrond, zal de kop dus lichter worden, weergegeven omdat die lichtere kleur wordt bereikt door het aanpassen van de dekkingsgraad van de tekst (de zogenaamde opacity). Dat heeft tot gevolg dat je bij een donkere achtergrond, dus een donkerdere subkop krijgt. AFB 13 GEEN TWEEDE SUBKOP IN EEN TEKST Focus Websites 2018 info@focuswebsites.nl

11 11 / 16 Helaas kan ik dit niet laten zien, omdat de subkop maar een keer per blog gebruikt mag worden. Als de subkop wordt gezien als een ondertitel, dan is dat logisch. Een verhaal heeft namelijk een titel en een ondertitel. Ook is het niet mogelijk een achtergrond kleur toe te voegen aan een subkop blok. De video is de laatste van de algemene blokken die ik behandel. De rest heb ik eerder al behandeld bij de meest gebruikte blokken. De video spreekt eigenlijk voor zich. Zodra je kiest voor dit blok, kun je een url invoegen of een videobestand uploaden. Daarmee kun je dan makkelijk een video in je blog integreren. Een url van een youtube filmpje werkt hier niet. Dit gaat echt om video s die je zelf upload. Het onderdeel opmaak Hier vind je een aantal blokken terug: code, vers, pull-quote, klassiek, aangepaste HTML, voorgeformatteerd en tabel. De code is een blok dat misschien interessant kan zijn voor mensen die stukjes code delen op hun site (al vraag ik mij af of zij Gutenberg zullen gaan gebruiken). Dat ziet er zo uit: <h2>dit is een tussenkop</h2> <p>hier komt de lopende tekst</p> Waarschijnlijk zullen de meeste bloggers dit niet nodig hebben. Een blok dat interessant is voor dichters, is het blok Vers. Daarin kun je bijvoorbeeld een haiku plaatsen of een ander gedicht. Maar of het echt wat toevoegt aan je tekst? Ach oude vijver de kikkers springen erin geluid van water. Bashō De pull-quote hebben we al behandeld onder de meest gebruikte blokken. Het blok klassiek is een blok dat je de oude editor teruggeeft. Dit blok heb ik in de oude editor getypt, dit zie je natuurlijk niet terug aan de voorkant. Vandaar onderstaand screenshot hoe dat eruit ziet. AFB 14 HET KLASSIEKE BLOK Het blok met aangepaste html geeft je een blok waarin je zelf wat html kunt typen, als je dat kunt. Je kunt dan bijvoorbeeld een link typen:

12 Wil jij je producten verkopen met een webshop, maar wil je niet de romslomp van het opzetten en werkend maken? Wij helpen je verder! Het stukje html zie je niet terug aan de voorkant, vandaar weer onderstaand plaatje: 12 / 16 AFB 15 HET HTML BLOK Wat is een voorgeformatteerd blok? Dat is een blok dat er anders uitziet, maar wel jouw stijl, tussenruimte en tekst behoudt, zoals jij het hebt ingtypt. Nu heb ik bijvoorbeeld na ieder einde van de zin een enter gemaakt, om de zin goed te kunnen afbreken. Dit betekent dat je ook met afbreekstreepjes kunt werken om de tekst wat beter te laten doorlopen of uit te vullen. De tabel spreekt eigenlijk ook wel voor zich. Had je vroeger html-code nodig om een tabel te kunnen maken en voor WordPress websites de plugin TablePress, dan kan dat nu makkelijker met het ingebouwde blok van de Gutenberg editor. Geen code meer en geen externe plugins die je site zwaarder maken. Je kunt ook nog kiezen om je cellen een vaste breedte mee te geven, maar in verband met mobiel bezoek is dat misschien niet wenselijk. Als voorbeeld onze pakketten voor het onderhoud van je website (genoemde prijzen zijn ex btw). Basis pakket Upgrade pakket Premium pakket 60,00 per kwartaal 75,00 per kwartaal 80,00 per kwartaal Maandelijkse backup Dagelijkse backup Dagelijkse backup Wekelijkse updates Wekelijkse updates Dagelijkse updates Kosteloos terugplaatsen van de backup* Kosteloos terugplaatsen van de backup* Kosteloos terugplaatsen van de backup* Prioriteit bij calamiteiten *indien er door een update gemaakt door Focus iets fout is gegaan.

13 13 / 16 Layout elementen Gutenberg geeft de blogger ook verschillende lay-out elementen om in zijn posts te gebruiken. Dit zijn Meer, knop, kolommen (beta), pagina-einde, scheidingslijn en vulelement. Over Meer heb ik het bij de algemene elementen al gehad, dus daarom zal ik verder gaan met knop. AFB 16 DE KNOP Met de knop kun je mensen natuurlijk iets verkopen of zich laten inschrijven voor je nieuwsbrief in ruil voor een mooi cadeautje. AFB 17 KLEUR TOEVOEGEN AAN JE KNOP EN DE TEKST! Je kunt je tekst ook in kolommen indelen. Dan krijg je dus twee kolommen naast elkaar. Dat is bijvoorbeeld handig op een pagina als je meerdere dingen naast elkaar wil zetten. Hiermee kun je dus bijvoorbeeld twee plaatjes naast elkaar zetten. De kolommen zijn nog in beta, dat wil zeggen dat ze nog niet helemaal doorontwikkeld zijn. Dus nog even voorzichtig met de kolommen. De scheidingslijn heb ik hierboven gebruikt. Helaas valt er weinig aan te stijlen binnen de Gutenberg editor. Dit zul je dan in je stylesheet moeten doen, door een class toe te kennen via het blokje Geavanceerd. Doe dit alleen als je weet wat je doet. Vraag het anders aan je webbouwer. Een pagina-einde doet precies hetzelfde als in Word of Pages. Het leidt je naar een volgende pagina. Als een tekst te lang wordt, dan kun je ervoor kiezen om je lezer naar de volgende pagina van je blog door te laten klikken, zodat hij weer even iets te doen heeft op je site. Het is ook een manier om meer kliks op je website te krijgen (en veel click-bait sites doen dus precies dat), want dan heb je meer paginaviews per bezoeker, wat weer goed is voor de cijfers als je adverteerders wil. Hieronder zie je een plaatje van een vulelement: AFB 18 HET VULELEMENT

14 14 / 16 Je kunt de hoogte aanpassen in het blokje aan de linkerkant. Je kunt een vulelement gebruiken om wat extra ruimte te maken tussen twee blokken. Dat heb ik gedaan tussen de kolommen en de tekst eronder, zodat de twee blokken niet te dicht op elkaar zouden worden getoond. Het vulelement krijgt alleen een hoogte in pixels mee aan de zijkant. Aan de voorkant zie je het element niet. Widgets De widgets kennen we allemaal van de zijbalk. Maar met deze toevoeging in de Gutenberg editor wordt het ook makkelijker om widgets in je pagina of in je post te laten lopen. De mogelijkheden: shortcodes, archieven, categorieën, nieuwste berichten en nieuwste reacties behandelen we hieronder. Het toevoegen van shortcode kan bijvoorbeeld interessant zijn als je adressen verzamelt via Mailchimp. Zo kun je een inschrijfformulier makkelijk in je tekst plaatsen. AFB 19 DE SHORTCODE WIDGET Je ziet rechtsboven in de afbeelding een pop-up boven een tag met Meer opties in het zwart. Ieder blok heeft deze mogelijkheid. Hiermee kun je bijvoorbeeld een blok verwijderen als je een verkeerd blok hebt gekozen of als je iets anders wil doen. Bovenaan het blok aan de linkerkant, kun je ook nog de opmaak van de tekst veranderen. De uitlijning geldt voor het hele blok, maar je kunt er ook voor kiezen om stukjes van je tekst vet te maken of schuin te zetten. Archieven, nieuwste blogs en nieuwste reacties, kun je nu ook makkelijk in de tekst plaatsen, zoals hieronder kunt zien. Al vraag ik me af waarom je deze elementen in je tekst zou willen hebben. Wellicht is het mogelijk om zelf widgets te programmeren die wel wat toevoegen aan je tekst. Dit zul je echter moeten laten doen, want daar heb je meer kennis voor nodig. Insluitingen Bij de insluitingen tref je voor verschillende externe partijen mogelijkheden aan, die ik hier niet allemaal apart zal behandelen. Ik zal in ieder geval YouTube uitlichten, omdat we die waarschijnlijk het meeste gebruiken. Het werkt heel simpel: voeg de url toe in de balk en klik op insluiten.

15 15 / 16 AFB 20 EEN YOUTUBE FILMPJE INSLUITEN Gebruik wel de youtube.com link en niet de youtu.be link. Alle insluitingen werken eigenlijk allemaal hetzelfde. Er zijn veel insluitingen beschikbaar. Een aantal ken ik niet, maar ik zal de meest bekende noemen. Youtube Instagram Twitter Facebook WordPress Soundcloud Spotify Flickr Vimeo Collegehumor Imgur Issuu (voor tijdschriften) Kickstarter (voor crowdfunding) Photobucket Slideshare Ted Tumblr Bij al deze insluitingen is het de bedoeling dat je een link toevoegt. Je kunt deze insluitingen verder niet echt stijlen. Er is nog een insluiting die ik wil behandelen en dat is de insluiting insluiten. Dit blok geeft je de mogelijkheid om een url in te sluiten voor alle overige zaken, die niet zijn voorzien in het blok insluitingen. Als je bijvoorbeeld kiest voor een website url, dan krijg je de titel van de website en een screenshot van de homepage. Omdat de preview van de website op dit moment nog over de tekst van de andere blokken heen valt, heb ik deze insluiting niet opgenomen in dit blog. Ik neem aan dat dit nog wordt opgelost. Mocht je nu denken: die editor is niets voor mij, dan is er ook al een plugin ontwikkeld die de Gutenberg editor uitschakelt. De bespreking van deze nieuwe editor komt hiermee ten einde. Omdat jij deze pdf hebt gedownload, hebben we nog een extra cadeau voor je.

16 Ons cadeau voor jou 16 / 16 Heb je een website en wil je graag eens in gesprek met ons om te kijken hoe je je website kunt verbeteren, dan kun je een gratis advies gesprek met ons inboeken! Mail naar info@focuswebsites.nl met de link naar jouw website erbij waar je specifiek advies op wil en we nemen zo snel mogelijk contact met je op!