Nieuw in WordPress 5.4 en Gutenberg: Social Icons, Buttons, Fullscreen & meer

Michael Firnkes Laatst bijgewerkt op 10/23/2020
8 Min.
WordPress  5.4
Laatst bijgewerkt op 10/23/2020

De WordPress 5.4 release is gepubliceerd op 31 maart 2020. Wat brengt de versie voor gebruikers en ontwikkelaars? Ons overzicht: Wat is er nieuw op WordPress en Gutenberg.

WordPress blijft zijn editor Gutenberg opkuisen en geeft het nieuwe functies. Voordat het in de volgende ontwikkelingsstappen gaat - d.w.z. in de richting van samenwerking en meertaligheid. Sommige nieuwe functies kunnen verwarring veroorzaken bij de gebruikers, dus daar moet u op voorbereid zijn. Wij vatten alle belangrijke wijzigingen voor u samen.

Widget: Staat van de website

De vernieuwing van WordPress 5.4, die op het eerste gezicht merkbaar is: In het dashboard is er nu een nieuwe widget voor de "toestand van de website". De functie hierachter bestaat al sinds WordPress 5.2. Je kunt hem vinden in de backend onder "Tools". Met de nieuwe centrale plaatsing zullen veel gebruikers zich er waarschijnlijk voor het eerst van bewust worden:

Toestand van de website
De nieuwe widget

Het idee achter de functie: De beheerders maar ook de gebruikers van WordPress moeten bewust worden gemaakt van mogelijke kwetsbaarheden in de installatie. Ook een blik op de in de widget gekoppelde gegevens biedt suggesties voor verbetering of hints over mogelijke beveiligingslekken. Dit zijn bijvoorbeeld:

  • Een lijst van inactieve Plugins en Themes. U moet deze altijd verwijderen, omdat ze een doelwit kunnen zijn voor hackers, zelfs als ze zijn uitgeschakeld.
  • Suggesties voor PHP-modules die op uw server moeten worden geïnstalleerd. Anders kan WordPress traag werken, of kunnen sommige functies ontbreken. Zie deze lijst van de WordPress Hostingteam.
  • Een waarschuwing als uw website nog geen HTTPS-verbinding gebruikt.

Encryptie via SSL is een absolute must voor elke professionele website. Bijvoorbeeld via Let's Encrypt. Google vereist ook een beveiligde verbinding, anders zal uw website belangrijke rankings en bezoekers verliezen. Idealiter zijn de SSL-certificaten inbegrepen in uw hostingpakket - dit vermindert uw inspanning.

Tot nu toe is de functionaliteit van de rubriek toestand/verbetering van de website nog beheersbaar. Dit zal zeker veranderen met toekomstige versies. Het tabblad "Rapport" bevat echter spannende informatie:

WordPress  Configuratie
De configuratie van WordPress

Dit zal u talrijke details verschaffen over uw configuratie van WordPress en WooCommerce. U kunt ze exporteren, bijvoorbeeld als hulpmiddel voor uw WordPress dienstverleners. Of voor debugging doeleinden voor ontwikkelaars van Plugins en Themes.

Gutenberg in volledig scherm modus

Je wist niet dat Gutenberg een volledig scherm modus heeft? Dan zult u geïrriteerd zijn als u de editor voor het eerst opent in versie 5.4. De dashboardbalk aan de linkerkant ontbreekt. Dit heeft voordelen, maar ook nadelen:

  • Vooral op kleinere schermen heb je nu meer ruimte beschikbaar voor je inhoud.
  • Je wordt tijdens het schrijven niet afgeleid door binnenkomende commentaren, Plugins die moeten worden bijgewerkt, enz.
  • Tegelijkertijd ontbreekt de zijbalk voor individuele processen

Het laatste punt vertraagt je vooral wanneer je moet schakelen tussen het postoverzicht en de editor bij het bijwerken van je teksten. Of wanneer u even de mediabibliotheek wilt oproepen.

Gutenberg volledig scherm
Gutenberg in volledig scherm modus

De volledig scherm modus is contraproductief voor uw werk? Dan kunt u de oude vertrouwde weergave als volgt herstellen:

  1. Ga naar de geavanceerde opties van Gutenberg (de drie verticale puntjes naast het tandwielpictogram rechtsboven)
  2. Deze worden tot nu toe in de editor "Meer gereedschappen & opties" genoemd.
  3. Vink het vakje "Volledig scherm modus" daar uit.

Het gedrag - volledig scherm aan of uit - kan ook vooraf worden gedefinieerd met een paar regels JavaScript:

const isFullscreenMode = wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' );

if ( isFullscreenMode ) {
    wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' );
}

Dit is vooral handig als u als admin of ontwikkelaar wordt overspoeld door verzoeken van uw gebruikers zodra WordPress 5.4 live gaat op uw website.

Gutenberg Blok Sociale Pictogrammen

Met deze functie kunt u met één muisklik links of pictogrammen toevoegen aan uw sociale netwerkverschijningen. De basisopties van "Sociaal Pictogram":

  • U kunt het type, het aantal en de volgorde van de pictogrammen zelf bepalen, evenals de respectieve links, uiteraard.
  • Er zijn bijna 40 iconen of netwerken beschikbaar
  • Naast WordPress , Twitter, Facebook, YouTube of Instagram zijn dat bijvoorbeeld Dropbox, Etsy, RSS, Flickr, GitHub, LinkedIn, Pinterest, Skype, Vimeo of Spotify.
  • Links naar andere websites (bijv. gastschrijvers) of naar e-mail adressen kunnen ook worden ingevoegd

Een beetje verwarrend: Als u een bestaand pictogram wilt verwijderen, kunt u dit doen door op het pictogram te klikken, en dan de optie "Blok verwijderen" te gebruiken. Dan wordt niet het hele blok gewist, maar alleen het betreffende item:

Verwijder sociale knop Gutenberg
Verwijder sociale knoppen in Gutenberg

Uw gecreëerde blok is standaard geen herbruikbaar element. Dit betekent dat als u wijzigingen aanbrengt - zoals het toevoegen of verwijderen van individuele sociale pictogrammen - u dit opnieuw zou moeten doen wanneer u later "Sociaal Pictogram" in een ander blok of bericht integreert. De oplossing: U zet uw resultaat om in een herbruikbaar blok en gebruikt dit blok alleen achteraf.

Tip: Veel gebruikers zijn nog niet op de hoogte van de functie "herbruikbare blokken". Het is uiterst praktisch: wanneer bijvoorbeeld Google+ verdween, hoefde je alleen maar de wijziging in het herbruikbare element aan te passen. Dit gebeurt dan automatisch in de bijbehorende blokken van de afzonderlijke berichten.

Gutenberg Blokknoppen

De naam zegt het al: je kunt dit nieuwe WordPress blok gebruiken om tekstgebaseerde knoppen in je berichten te integreren. Bijvoorbeeld om e-books te downloaden of om door te verwijzen naar centrale landingspagina's. De knoppen kunnen als volgt worden aangepast:

  • Verschillende stijlen (volledig met kleur gevuld of alleen met omtrek)
  • Achtergrond en tekstkleur vrij te kiezen, ook met individuele kleuren (via hexadecimale kleurwaarden)
  • Achtergrond monochroom of met kleurverloop (groeten uit de wilde tijden van webdesign)
  • Randinstellingen (hoekradius)
  • Link opties zoals doel _blank

Oplettende gebruikers van Gutenberg weten dat er al een blok is met de naam "Button". De nieuwe optie "Buttons" biedt echter aanzienlijk meer mogelijkheden:

Gutenberg Knoppen
Gutenberg Knoppen met kleurverloop en curven

Bovendien kunt u nu meerdere knoppen na elkaar invoegen, zonder dat dit uw lay-out breekt. U kunt de volgorde van de knoppen aanpassen zoals u wilt via drag & drop.

Opmerking: Oorspronkelijk zou WordPress 5.4 een nieuw blok Navigatie krijgen om een navigatiemenu ook in de inhoud van een pagina of post in te voegen. Deze aanpassing werd echter uitgesteld tot een latere datum.

Scherm: Welkom bij de blok-editor

Net als bij WooCommerce worden gebruikers van Gutenberg nu begroet met een "Welkomstgids". Dit bevat:

  • Een inleiding over hoe de bloksgewijze aanpak werkt
  • Basisuitleg van de opties per blok (bv. kleur, breedte, uitlijning)
  • Opmerkingen over de blokbibliotheek

Een link aan het eind leidt naar een handleiding voor Gutenberg. Maar dit is in het Engels.

Gutenberg Welkomstscherm
De Welkom Gids van Gutenberg

Wij bevelen de volgende bronnen aan als u nog niet met de nieuwe editor voor WordPress hebt gewerkt:

Voor admins is de gids niets nieuws, maar voor pure gebruikers en redacteurs kan hij interessant zijn. Het zou hen moeten helpen om sneller hun weg te vinden op Gutenberg . Dit kan ook uw ondersteuningsinspanning als admin verminderen.

Tip: De Welkomgids wordt alleen automatisch gestart wanneer u WordPress opnieuw installeert of Gutenberg voor de eerste keer gebruikt. Wil je het handmatig starten? U kunt dat doen in de algemene opties onder Extra -> Welkom Gids ( onder het punt waar u kunt schakelen tussen code en visuele editor).

Plaats post afbeelding via drag & drop

Soms zijn het de kleine veranderingen die de gebruikers van WordPress gelukkig maken. Met versie 5.4, kunt u de post afbeelding uploaden door te slepen en neer te zetten. Voorbeeld:

  1. U hebt het beeld al bewerkt of ontvangen, en het staat in een map op uw computer.
  2. Sleep het vanaf daar met de muis naar het "Definieer postafbeelding" gebied in de rechter zijbalk van Gutenberg versie WordPress 5.4 en hoger.
  3. Klaar - uploaden naar de mediabibliotheek gebeurt automatisch op de achtergrond

U hoeft alleen achteraf de meta-informatie aan de afbeelding toe te voegen, indien nodig, door op de ingevoegde afbeelding te klikken. Of in de mediabibliotheek van WordPress . Dit is misschien wel het grootste "gevaar" van de handige nieuwe optie: het gaat ten koste van attributen die belangrijk kunnen zijn voor uw SEO.

Geoptimaliseerd blok Recente berichten

Het tonen van verdere artikelen onder uw blogberichten wordt door veel lezers gebruikt. Het is vergelijkbaar met de laatste berichten (momenteel genaamd "Latest Posts" in Gutenberg ). Hierdoor blijven uw gebruikers langer op uw website. De waarden "dwell time" en "page views per visit" stijgen - beide zijn belangrijke kengetallen voor zoekmachineoptimalisatie (SEO).

De kliksnelheid van deze functie neemt aanzienlijk toe als u niet alleen tekstlinks gebruikt, maar ook de betreffende postafbeeldingen worden weergegeven. Dit is precies wat mogelijk is vanaf WordPress 5.4:

Nieuwste bijdragen WordPress
Laatste berichten met afbeelding

Andere nieuwe functies in het blok "Recente berichten":

  • Stel de beeldgrootte in voor de voorbeeldafbeelding
  • U kunt vaste waarden in pixels definiëren, of verschillende percentages gebruiken.
  • De uitlijning van het beeld kan ook worden aangepast (links uitgelijnd, gecentreerd, rechts uitgelijnd).

Moet de volledige post zichtbaar zijn in de preview, of alleen een uittreksel van de tekst? Sommige blogs melden dat deze optie ook nieuw is. Het bestaat echter al in WordPress 5.3., onder "Instellingen voor post inhoud" .

Tekstkleur voor afzonderlijke woorden en zinnen

Tot nu toe kon de tekstkleur in Gutenberg alleen worden gewijzigd voor een volledige paragraaf of sectie. Met WordPress 5.4 is er nu een optie om de kleur van enkele letters, woorden of zinnen te veranderen:

Tekst kleur in Gutenberg
Nu kan het ook kleurrijk worden in delen van uw teksten

Om dit te doen, markeert u het corresponderende deel in de bodytekst met de muis. In de geavanceerde opties (naast het linksymbool) vindt u nu de vermelding "Tekstkleur". Daar kunt u kiezen uit voorgedefinieerde kleuren of een individuele kleur definiëren. Voor dit doel zijn een RGB-kleurentabel en hexadecimale kleurwaarden beschikbaar.

Andere wijzigingen voor gebruikers

WordPress 5.4 brengt onder de motorkap tal van kleinere aanpassingen, voor het systeem zelf of ook voor de editor Gutenberg. Hier volgt een overzicht van de belangrijkste punten:

  • Voor individuele blokken zijn er nu uitgebreide kleur- en kleurverloopopties, bijvoorbeeld voor het coverblok (afbeelding of video met overlappende tekst) maar ook voor groepen en kolommen.
  • De navigatie in de broodkruimels van geneste blokken is duidelijker gemaakt
  • In de smartphone-weergave blijft de werkbalk bovenaan staan, zodat hij niet langer uit de focus verdwijnt
  • In het blok "Galerij" kunt u de afbeeldingsgrootte wijzigen (vier niveaus: thumbnail, medium, groot, volledige grootte).
  • Er is nu een onderschrift voor tabellen, voor afbeeldingen kan het titelattribuut direct in de editor worden toegewezen (onder de geavanceerde opties).
  • Video's van het portaal TikTok zijn beschikbaar in de blok editor als een nieuwe embed bron

Bovendien is de gebruiksvriendelijkheid van Gutenberg op sommige plaatsen geoptimaliseerd, bijvoorbeeld door de meervoudige selectie van blokken of de navigatie met de tab-toets te vereenvoudigen. Dit laatste werkt nu ook binnen de zijbalken van de blokken.

Onderschrift tabel WordPress
Een tabel met handtekening (bijschrift)

Tip: Als u op zoek bent naar informatie over de toekomstige routekaart van WordPress , bezoek dan de blog van het Duitstalige WordPress project. Of kijk op https://de. wordpress.org /about/roadmap/.

Wijzigingen voor ontwikkelaars

Voor degenen die achter de schermen werken op WordPress , zijn er ook nieuwe mogelijkheden. Maar ook meer prestaties:

  • Verhoogde snelheid: Het ontwikkelingsteam rond de blok-editor heeft volgens eigen informatie een vermindering van de laadtijd met 14 procent bereikt.
  • Kalenderwidget: De navigatielinks zijn verplaatst naar een nav HTML-element dat onmiddellijk volgt op het tabelelement, voor geldige HTML (volgens de 5.1-specificatie).
  • Consistente semantiek: De functie do_shortcode() wordt vervangen door apply_shortcode() vervangt
  • Favicons: Favicon verzoeken kunnen flexibeler beheerd worden, het WordPress logo dient als noodoplossing
  • Fout-log: Fout in wp_login_failed worden meer in detail getoond

U kunt hier meer over lezen - net als over andere aanpassingen - in de officiële aankondigingen voor WordPress 5.4. Hints voor het testen van WordPress 5.4 vindt u hier.

Welke vragen heeft u over WordPress 5.4? Voel je vrij om de commentaarfunctie te gebruiken. Wilt u op de hoogte blijven van nieuwe bijdragen aan WordPress ? Volg ons dan op Twitter, Facebook of via onze nieuwsbrief.

Michael is bij RAIDBOXES verantwoordelijk voor Content en Mental Health. Hij is al vanaf 2007 actief in de blogging- en WordPress-community. Onder andere als mede-organisator van WordPress evenementen, auteur van boeken en Corporate Blog Trainer. Hij geniet ongelooflijk van bloggen, zowel professioneel als persoonlijk. Michael werkt en schrijft op afstand vanuit het zonnige Freiburg.

Gerelateerde artikelen

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.