WordPress  5.4

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

De WordPress 5.4 release werd gepubliceerd op 31 maart 2020. Wat brengt de versie voor gebruikers en ontwikkelaars? Ons overzicht: Wat is er nieuw in 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 nieuwe functie van WordPress 5.4 die op het eerste gezicht opvalt: Er is nu een nieuwe widget voor de "staat van de website" op Dashboard . De functie erachter is al beschikbaar sinds WordPress 5.2. De functie hierachter bestaat al sinds WordPress 5.2 en is te vinden in de backend onder "Tools". Door de nieuwe centrale plaatsing zullen veel gebruikers er waarschijnlijk voor het eerst kennis van nemen:

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 je 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 het onderdeel Website Status of Verbeteringen nog hanteerbaar. Dit zal bij toekomstige versies zeker veranderen. 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

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 afzonderlijke 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

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. Tot nu toe heten deze in de editor "Meer gereedschappen & opties".
  3. Verwijder het vinkje bij "Fullscreen Mode".

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 Sociale pictogrammen blokkeren

Met deze functie kun je met een muisklik links of pictogrammen invoegen naar je optredens in sociale netwerken. De basisopties van "Social Icon":

  • Je kunt het type, het aantal en de volgorde van de pictogrammen zelf bepalen, evenals de respectievelijke links natuurlijk.
  • Er zijn bijna 40 pictogrammen 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-mailadressen kunnen ook worden ingevoegd

Enigszins verwarrend: Als je een bestaand pictogram wilt verwijderen, kun je dat doen door op het pictogram te klikken en dan de optie "Blokkering verwijderen" te gebruiken. In dit geval wordt niet het hele blok verwijderd, maar alleen de betreffende vermelding:

Sociale knop verwijderen Gutenberg
Verwijder sociale knoppen in Gutenberg

Je gemaakte blok is standaard geen herbruikbaar element. Dit betekent dat als je wijzigingen aanbrengt - zoals het toevoegen of verwijderen van individuele sociale pictogrammen - je dit opnieuw zou moeten doen als je later het "sociale pictogram" in een ander blok of bericht integreert. De oplossing: Je zet je resultaat om in een herbruikbaar blok en gebruikt dan alleen dit blok.

Tip: Veel gebruikers zijn nog niet bekend met de functie "herbruikbare blokken". Het is uiterst praktisch: toen bijvoorbeeld Google+ verdween, hoefde je alleen de verandering 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)
  • Linkopties zoals doel _blank

Oplettende gebruikers van Gutenberg weten dat er al een blok is met de naam "Knop". De nieuwe optie "Knoppen" 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

Vergelijkbaar met WooCommerce worden gebruikers van Gutenberg nu ook begroet met een "Welcome Guide". Dit bevat:

  • Een inleiding tot hoe de benadering op basis van blokken werkt
  • Basisuitleg van de opties per blok (bijv. kleur, breedte, uitlijning)
  • Opmerkingen over de blokbibliotheek

Een link aan het eind leidt naar een handleiding voor Gutenberg. Dit is echter 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. Je hebt het beeld al bewerkt of ontvangen, en het staat in een map op je computer.
  2. Van daaruit sleep je het met de muis naar het gebied "Stel postafbeelding in" in de rechter zijbalk van Gutenberg vanaf versie WordPress 5.4.
  3. Klaar – uploaden naar de mediabibliotheek gebeurt automatisch op de achtergrond

Je hoeft de meta-informatie voor de afbeelding pas later toe te voegen, indien nodig, door op de ingevoegde afbeelding te klikken. Of binnen de mediabibliotheek van WordPress. Dit is waarschijnlijk het grootste "gevaar" van de handige nieuwe optie: het gaat ten koste van attributen die belangrijk kunnen zijn voor je SEO.

Geoptimaliseerd blok Recente berichten

Veel lezers zien graag meer artikelen onder je blogberichten. Het is vergelijkbaar met de laatste berichten (die nu "Laatste berichten" heten in Gutenberg ). Hierdoor blijven je gebruikers langer op je website. De waarden "verblijftijd" en "paginaweergaven per bezoek" nemen toe - 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 post afbeelding

Verdere vernieuwingen in het blok "Recente berichten":

  • Stel de beeldgrootte in voor de voorbeeldafbeelding
  • Je kunt vaste waarden in pixels vastleggen, of verschillende percentages gebruiken.
  • De beelduitlijning kan ook worden aangepast (links-uitgelijnd, gecentreerd, rechts-uitgelijnd).

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

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 je teksten

Markeer daartoe met de muis het betreffende deel van de doorlopende tekst. In de geavanceerde opties (naast het linksymbool) vind je de vermelding "Tekstkleur". Daar kun je kiezen uit voorgedefinieerde kleuren of een individuele kleur definiëren. Hiervoor zijn een RGB-kleurentabel en hexadecimale kleurwaarden beschikbaar.

Andere wijzigingen

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" kun je de afbeeldingsgrootte beïnvloeden (vier niveaus: voorbeeldafbeelding, middelgroot, groot, volledig formaat).
  • Er is nu een bijschrift 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.

Bijschrift Tafel 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/.

Veranderingen 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 in meer 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.

Vond je het artikel leuk?

Met jouw beoordeling help je ons om onze inhoud nog verder te verbeteren.

Laat een reactie achter

Je e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *.