Hoe Je WordPress-blokken Gebruikt (+ Hoe Je Je Eigen Maakt!)

Zou dit een vreemde plek zijn om te vermelden dat mijn vrouw een mint-condition, ongeopende, gelimiteerde Lego Star Wars BB-8 set vasthoudt?

Die dingen gaan voor zo’n $500!

Oké. Het zou vreemd zijn. Begrepen, luid en duidelijk… Maar dit wordt zo dadelijk allemaal wat duidelijker.

In deze post gaan we alles behandelen wat je moet weten over WordPress-blokken. Als je een ouderwetse WP-gebruiker bent zoals ik, dan denk je waarschijnlijk nog steeds aan blokken als “nieuw” WordPress omdat je begonnen bent met het gebruiken van de klassieke editor.

Het is al meer dan vijf jaar geleden dat WordPress blokken introduceerde, maar ze zijn nog steeds een van de meest misbegrepen en onderbenutte CMS-functies.

WordPress-blokken zijn een soort Legos —zie je, ik zei het je dat het zou aansluiten— ze stellen je in staat om je website te bouwen en aan te passen op een manier die een paar jaar geleden nog het inhuren van een professionele websiteontwerper en -ontwikkelaar zou hebben vereist.

En dat is een van de redenen waarom mensen zo van ze houden. Zodra ze ze begrijpen, tenminste.

Nadat ik uitleg hoe ze werken, twijfel ik er niet aan dat jij ze ook geweldig zult vinden.

Wat Zijn WordPress Blokken?

WordPress-blokken zijn, zoals de naam al doet vermoeden, als stapelbare bouwblokken die je kunt toevoegen aan pagina’s en berichten op je WordPress-site.

Ze zijn toegevoegd aan WordPress 5.0 samen met de opname van de Gutenberg-editor die de meesten van ons nu kennen. Blokken zijn nu de standaard manier om je WordPress-site aan te passen — en je kunt blokken over je hele site gebruiken, niet alleen binnen berichten.

Denk er eens aan, een beetje zoals een site- of paginabouwer. Je kunt op de “+” knop klikken om een blok aan een pagina of bericht toe te voegen en vervolgens kiezen uit verschillende blokopties. De huidige versie van WordPress bevat standaard meer dan 90 opties.

Elk blok is in wezen een widget. Ze kunnen verschillende dingen doen, zoals inhoud van een andere site of dienst insluiten, nieuwe functionaliteiten zoals agenda’s of contactformulieren aan de pagina toevoegen, of zelfs specifieke inhoud met vooraf gedefinieerde opmaak toevoegen.

Plus, de meeste blokken hebben aanpassingsopties waarmee je kunt instellen hoe ze worden weergegeven of functioneren op je site.

De WordPress blokeditor is een enorme verbetering ten opzichte van de klassieke editor. In de pre-Gutenberg dagen konden WordPress gebruikers alleen tekst en afbeeldingen toevoegen aan een bericht voordat zij zich moesten verdiepen in aangepaste code.

Nerd opmerking: Als je om de een of andere reden geen toegang hebt tot blokken van de WordPress-editor, kan dat om een van twee redenen zijn: De ene is dat je WordPress-installatie vreselijk verouderd kan zijn (zoals jaren en jaren oud). Ten tweede is het mogelijk dat de blokeditor is uitgeschakeld door de Classic Editor-plugin. Wanneer deze plugin actief is op een WordPress-site, brengt het je terug naar de klassieke editor-ervaring. Controleer je plugins-pagina vanuit wp-admin om te zien of dat voor jou het geval is.

Welke Blokken Heeft WordPress Al?

Standaard biedt de blokeditor een enorm aantal beschikbare blokken. Je kunt deze blokken gebruiken om je WordPress-thema aan te passen, schrijvers en bloggers in staat stellen rijke inhoud aan hun berichten toe te voegen, sociale media-inhoud te integreren, en nog veel meer.

Laten we eens kijken naar enkele van de meest populaire en nuttige standaard Gutenberg-blokken.

Meest Voorkomende Blokken

Het toevoegen van elk type tekst of afbeelding gebeurt met behulp van een blok. Dit betekent dat de meest voorkomende blokken over het algemeen de verschillende stijlen en typen tekst- of beeldelementen zijn die je aan een pagina kunt toevoegen.

Zoals:

• Tekstblok — Elk paragraaf dat je schrijft in de blokeditor bevindt zich in zijn eigen tekstblok, maar tekstblokken zijn niet beperkt tot paragrafen. Schrijf een beetje of schrijf veel.
• Afbeeldingsblok — Voor als je wilt laten zien én vertellen, voeg een afbeelding toe voor wat extra flair.
• Lijstblok — Moet je een overzicht maken? Of een genummerde lijst? Je kunt het allemaal doen met het lijstblok!
• Afbeeldingengalerijblok — Vakantiefoto’s of productafbeeldingen delen zag er nog nooit zo goed uit.
• Tabelblok — Maak een prijzentabel of deel wat spreadsheetgegevens met gemak.
• Citaatblok — Wil je de aandacht vestigen op een bepaalde observatie? Geïnspireerd door een citaat dat relevant is voor de post die je schrijft? Licht het uit met het citaatblok!

Elk van deze is een element dat je aan je website kunt toevoegen met de blokeditor. Vervolgens kun je ze positioneren en stylen binnen het inhoudsgedeelte van de pagina.

Ingebedde Inhoudsblokken

Blokken maken het extreem eenvoudig om externe inhoud en widgets in je WordPress-website te integreren zonder dat je een nieuwe plugin of een add-on van derden hoeft toe te voegen.

Enkele van de meest populaire invoegbloktypen voor het binnenhalen van externe inhoud:

• Calendly-blok
• Aangepaste HTML-blok
• Twitter-blok
• YouTube-blok
• Getuigenissen
• WooCommerce
• Contactformulieren
• Veelgestelde vragen

Met deze bloktypen kun je verder gaan dan de basisteksteditor en interactieve inhoud maken die allerlei functionaliteiten en functies bevat.

Speciale Blokken

Hier wordt het echt spannend.

Naast de basis en ingebedde inhoud zijn er ook een groot aantal geavanceerde blokken die je kunt gebruiken voor speciale gevallen. Misschien wil je bijvoorbeeld de navigatie en UX van je site verbeteren, of WordPress gebruiken als een volwaardige websitebouwer.

Hier zijn er een paar om te bekijken:

• Knoppenblok
• Kolommenblok
• Groepsblok
• Post Carrouselblok
• Post Inhoudsblok
• Query Lus Blok
• Herbruikbaar Blok
• Shortcode Blok
• Inhoudsopgaveblok

Met deze blokken kun je aangepaste inhoud rechtstreeks uit de WordPress-database halen of de indeling, afstand en stroom van elke pagina of bericht op je website volledig aanpassen.

Dat is allemaal geweldig en prima.

Maar wat als je een blok nodig hebt dat niet standaard met WordPress meegeleverd wordt? 

Gelukkig zijn blokken ook aanpasbaar. Net als widgets, kun je nieuwe blokken toevoegen en zelfs je eigen blokken maken om aan de behoeften van je websiteontwerp en sjabloon te voldoen.

Hoe Maak Je Aangepaste Blokken Met Een WordPress Plugin

Verreweg de gemakkelijkste manier om een aangepast blok te maken is door een plugin te gebruiken.

De Genesis Custom Blocks plugin maakt het bouwen en lanceren van je eigen aangepaste blokken vrij eenvoudig. Je zult een basiskennis van HTML en CSS moeten hebben om het blok te creëren en te stylen naar je behoeften.

Met die basiskennis zorgt de plugin voor alle moeilijke installatie en configuratie om een nieuw blok te implementeren.

Stap 1: Installeer Genesis Block Plugin

Als eerste: ga naar de WordPress plugin directory en installeer de Genesis Custom Block plugin.

(Vergeet niet naar het tabblad Plugins te gaan en deze te activeren.)

Stap 2: Voeg Een Nieuw Blok Toe

Eenmaal geïnstalleerd en geactiveerd, zou je een nieuwe optie moeten zien vanuit het WP-beheerpaneel in de navigatie aan de linkerkant.

Klik op Aangepaste Blokken > Nieuw toevoegen.

Stap 3: Pas De Editorvelden Aan

Nu zijn we klaar om het aangepaste blok te gaan bouwen.

De eerste stap zal zijn om de velden en aanpassingsopties in te stellen die verschijnen wanneer je het blok op je website gebruikt.

Je kunt dit zien als een soort mini-versie van de blokeditor zelf. Je voegt aangepaste velden en gegevens toe die ofwel vooraf ingevuld worden door het blok zelf of verzameld worden door de editor of gebruiker die het blok toevoegt aan een pagina of bericht.

Bijvoorbeeld, als je een aangepaste oproep-tot-actie (CTA) blok bouwt, zou je velden kunnen toevoegen zoals:

• Kop tekst
• Subkop tekst
• Knop tekst
• CTA knop URL

Elk veld zal een label, naam en type hebben. Je kunt zelfs de breedte aanpassen of helptekst toevoegen om het makkelijker te maken voor extra redacteuren of schrijvers om te gebruiken.

Stap 4: Pas De Opmaak En CSS Aan

Nu we de backend van het blok hebben ingesteld, moeten we WordPress vertellen hoe de toegevoegde inhoud daadwerkelijk weergegeven moet worden.

Hier komt enige eerdere kennis van HTML of CSS die je misschien hebt goed van pas.

In deze volgende stap ga je in wezen het blok code schrijven dat dynamisch gegenereerd wordt uit de input die geconfigureerd is voor de blokeditor.

Je kunt dit in standaard HTML en CSS schrijven.

Je kunt ook de variabelen uit de blokeditor halen door dubbele haakjes te gebruiken en de veldnaam (slug) uit de editor. (Bijv., “{{button-text}}”)

Stap 5: Voeg Het Blok Toe

Zodra je het blok hebt ingesteld met de Genesis-plugin, zou het moeten verschijnen in de lijst van beschikbare blokken in de WordPress Gutenberg-editor.

Klik simpelweg op de “+” en vind dan het nieuwe blok op naam.

Eenmaal toegevoegd, zou je het scherm van de Gutenberg blokeditor moeten zien met de velden en opties die je hebt geconfigureerd.

Dat is het!

Je kunt nu je aangepaste blok gebruiken door het toe te voegen aan pagina’s, berichten, zijbalken of waar je het nodig hebt.

Hoe Maak Je Aangepaste WordPress-blokken Zonder Een Plugin

Als je dieper wilt duiken en echt wilt leren hoe je nieuwe blokken vanaf nul kunt creëren, heb je iets meer geavanceerde kennis nodig.

In deze handleiding lopen we door de basisstappen voor het gebruik van de create-block tool waarmee je volledig aangepaste blokken kunt opzetten zonder een plugin te hoeven gebruiken.

Eerlijke waarschuwing: Dit is een geavanceerde workflow. Het vereist dat je je verdiept in de commandoregel.

Je moet PHP, JavaScript, HTML en CSS begrijpen.

Zeg niet dat we je niet gewaarschuwd hebben!

Stap #1: Installeer Node.js, NPM, en Lokale WordPress Installatie

Voordat we create-block kunnen gebruiken, moeten we de juiste opstelling en toegang hebben.

Hier zijn de vereisten:

• Een lokale WordPress installatie
• Terminal of command line setup
• Node.js en npm

Je wilt misschien ook gebruik maken van nvm (Node versiebeheerder) om een compatibele versie van Node.js te installeren of bij te werken

Met deze setup zullen we het commando “npx” van NPM gebruiken om het create-block-pakket direct vanuit de gehoste directory in de cloud uit te voeren.

Stap #2: Voer het create-block Pakket Uit

Nu, de gemakkelijke stap.

Vanuit de terminal navigeer je naar de /wp-content/plugins directory van je website op je lokale machine.

Voer vervolgens het create-block-pakket uit met NPX:

npx @wordpress/create-block {{block-name}}

Dit pakket zal het proces doorlopen van het opzetten van wat bekend staat als de “bloksteiger”. Het zal alle relevante elementen registreren, de juiste bestands- en mapstructuur opzetten en standaardcode genereren voor het hele blok om zowel bewerkbaar als bruikbaar te zijn.

Stap #3: Activeer De Plugin

Het nieuwe blok zal de vorm aannemen van een plugin.

Zodra het create-block pakket voltooid is, moet je naar WP admin gaan.

Ga naar de Plugins-pagina en activeer de nieuwe plugin die is gemaakt, die de naam zou moeten hebben van het blok dat je in je npx-opdracht hebt gebruikt.

Stap #4: Pas De Blokcode Aan

Je zult de inhoud en functionaliteit van het blok aanpassen in de /src/ map binnen de plugin directory.

Index.js is waar je het blok registreert en de hoofdoutput codeert:

Let op dat de functie registerBlockType is ingesteld om zowel de invoer van de blokeditor (“edit”) als de weergave aan de voorkant (“save”) te verwerken.

Dit is slechts het begin van het bouwen van een functioneel blok.

Je wilt waarschijnlijk de volledige documentatie voor het schrijven van functionele blokken met behulp van de WordPress Block API grondig doornemen.

Zodra je de basis onder de knie hebt, kun je extra afhankelijkheden toevoegen, externe databronnen aanspreken, en vrijwel alles wat je hartje begeert.

Stap #5: Voeg Het Blok Toe Vanuit De Gutenberg-Editor

Met de geactiveerde plugin kun je je blok toevoegen aan elke pagina of post vanuit de Gutenberg-editor.

Open het via de “+” knop of “/” commando, net zoals elke andere blok.

De Lucht Is De Limiet

Oké, we zijn van de basis naar gevorderd gegaan met deze, maar het goede nieuws is dat je nu onstuitbaar bent.

Tussen de standaard blokopties, de Genesis plugin, en de mogelijkheid om je eigen blokken vanaf nul te bouwen — er is niets dat je niet kunt doen!

Omdat blokken ongelooflijk krachtig en flexibel zijn, is er bijna niets dat je niet kunt bouwen. Je WordPress-site heeft nu bijna oneindige functionaliteit, en je kunt de site, app of het project van je dromen maken.