De Gutenberg block editor, de inhoudseditor van WordPress, heeft meer dan 81 miljoen actieve installaties. Vanwege het marktdominante karakter van WordPress en de intuïtieve aard van het ontwerp van deze editor, is het geen verrassing dat dit systeem zo populair is.
Gutenberg is een toegankelijke drag-and-drop page builder en content editor. Het biedt veel functionaliteiten, samen met gevarieerde benaderingen die je kunt gebruiken om de curatieve website van je dromen te maken.
Deze editor is gebouwd op Gutenberg-blokkenDit zijn verschillende eenheden inhoud die de pagina’s en lay-out van een website vormen.
Je kunt deze blokken uit de WordPress Block Library halen. Deze bibliotheek is uitgebreid, maar heeft niet altijd het exacte blok dat je nodig hebt voor je website.
Dus, als je een ondernemer bent die geavanceerde websitefunctionaliteit of gespecialiseerde elementen wil die nog niet worden aangeboden door Gutenberg, dan ben je misschien geïnteresseerd in het gebruik van Gutenberg aangepaste blokken op je WordPress website.
Gutenberg: De belangrijkste inhoudseditor van WordPress
De Gutenberg editor is de kern van het WordPress raamwerk voor het bewerken van inhoud. De blok-gebaseerde structuur maakt het eenvoudig om een WordPress website en al zijn pagina’s te bouwen – zelfs voor totale beginners.
Met deze editor kun je mediarijke inhoud maken in WordPress door de nieuwe blokken te kiezen die je nodig hebt. Vervolgens kun je ze naar wens indelen en de specifieke elementen toevoegen die je op elke pagina wilt weergeven.
Wat zijn Gutenberg-blokken?
In Gutenberg bestaat elke pagina of post uit een verzameling op zichzelf staande elementen.
Je gebruikt deze elementen – of blokken – om pagina’s, berichten en al het andere op je WordPress website op te bouwen.
Het populairste blok is het blok met paragrafen, gevolgd door blokken met afbeeldingen en koppen. Andere voorbeelden van bloktypes zijn titels, tekst, verdelers, widgets en video’s.
Zoals we al eerder zeiden, kun je WP blokken openen via de Block Library. Je vindt deze door tijdens het bewerken van een pagina of bericht op de + linksboven in je WordPress werkbalk te klikken.
Maar wat als de bibliotheek van WordPress niet het blokkentype biedt dat je zoekt? Of een placeholder die je zou kunnen upgraden om aan je behoeften te voldoen?
Daar komen aangepaste blokken om de hoek kijken.
Wat zijn Gutenberg custom blokken?
Met Gutenberg kan iedereen gratis assets maken. Dus als je ervaring hebt met coderen en webontwikkeling, kun je aangepaste blokken maken terwijl je je website maakt.
Aangepaste blokken bieden nog meer flexibiliteit en niche-specifieke functionaliteit dan standaardblokken.
Gebruikers bouwen aangepaste blokken om unieke pagina-elementen te maken.
Aangepaste blokken van Gutenberg bieden vele voordelen, waaronder:
- Je kunt visueel aantrekkelijke, mediarijke WordPress-elementen ontwerpen die zijn afgestemd op de behoeften van je bedrijf.
- Ze voegen unieke en geavanceerde functionaliteiten toe aan je website.
- Ze verbeteren het esthetische uiterlijk van je pagina’s en helpen je bedrijf zich te onderscheiden van de massa.
- Je hoeft blokken maar één keer te coderen. Daarna kun je ze op al je websites en pagina’s gebruiken.
Aangepaste blokken hebben echter een aantal uitdagingen. Zo is er bijvoorbeeld een grondige technische kennis nodig om ze te maken. Daarnaast heb je specifieke codeerexpertise en ontwikkeltools nodig.
Hoe krijg je aangepaste Gutenberg blokken voor WordPress
Om Gutenberg aangepaste blokken te krijgen, moet je ze zelf bouwen of kopen.
Aangepaste blokken maken is niet voor iedereen weggelegd, maar dat is geen probleem. Je kunt aangepaste Gutenberg-blokken kopen in plaats van ze zelf te maken. Zoek hiervoor een ontwikkelaar van topkwaliteit die u vertrouwt en werk met hem samen om uw ideale blokken te maken.
Als je van plan bent om deze blokken zelf te maken, zijn er een aantal dingen waar je rekening mee moet houden voordat je begint.
Wat u moet overwegen voordat u aangepaste blokken maakt
Het maken van een aangepast Gutenberg-blok kost tijd en energie. Voordat je aan het proces begint, moet je ervoor zorgen dat je al je andere opties hebt uitgeput.
U kunt controleren of er geen andere geschikte benaderingen zijn door zorgvuldig de bibliotheek met standaardblokken van Gutenberg door te nemen. Controleer of er geen bestaande blokken zijn die de basisfuncties of stijlspecificaties bieden die u nodig hebt.
En als je hebt vastgesteld dat je een aangepast blok nodig hebt, zet dan de essentiële specificaties voor je blok op een rijtje voordat je begint met bouwen. Denk aan esthetische elementen, standaardinstellingen en kernfuncties. Denk ook aan werkbalkspecificaties en andere belangrijke stilistische en functionele kenmerken.
Wat je nodig hebt om aangepaste Gutenberg-blokken te bouwen
Zodra je de meest essentiële aspecten van je blok hebt bepaald, zijn er nog een paar belangrijke vereisten waaraan je moet voldoen voordat je aan het proces begint.
Een actieve WordPress website is essentieel. En je hebt op zijn minst enige ervaring nodig met JavaScript en JavaScript-bouwprogramma’s, zoals Node.js.
Je hebt ook gemiddelde kennis nodig van HTML, CSS en PHP om je eigen aangepaste blokken te maken.
Als je niet zo thuis bent op dit gebied, geen zorgen. Je kunt tijd en stress besparen door webdesign-experts in te huren om je te helpen blokken te bouwen.
Hoe maak je aangepaste Gutenberg blokken in WordPress?
Er zijn twee toegankelijke benaderingen voor het bouwen van aangepaste blokken in Gutenberg. Je kunt een gebruiksvriendelijke plugin installeren die het proces vereenvoudigt of ze vanaf nul opbouwen met HTML/CSS of PHP-code.
Aangepaste blokken maken met een plugin
Er zijn een aantal WordPress plugins beschikbaar die het proces van het maken van aangepaste Gutenberg blokken voor je WordPress site stroomlijnen. Wij raden aan om Genesis Custom Blocks te gebruiken.
Om je eerste blok te maken met deze plugin:
1. Genesis aangepaste blokken installeren
Navigeer eerst naar Plugins > Nieuwe toevoegen in de linker zijbalk van je admin dashboard en zoek naar Genesis in de WordPress Plugins Directory. Installeer het en klik op de knop Activeren .
2. Maak een nieuw blok
Navigeer vervolgens naar Aangepaste blokken > Nieuw toevoegen om een blok te maken.
3. Blokspecificaties configureren
Nu kun je een bloknaam selecteren en de eigenschappen configureren en aanpassen. Voeg relevante trefwoorden toe om te helpen met zoekmachineoptimalisatie (SEO).
Voeg vervolgens velden toe – zoals getallen, afbeeldingen en selectievakjes – door op de + knop te drukken. Je moet meer specificaties invoeren, zoals Veldlabel, Veldlocatie en Helptekst. Je kunt velden ook herschikken, bewerken en verwijderen.
4. Bouw uw sjabloon.
Vervolgens kun je je sjabloon opbouwen met HTML en CSS of PHP, afhankelijk van je blokuitvoer.
Als je blok is geconfigureerd voor HTML en CSS, kun je de Sjablooneditor van de plugin gebruiken, te vinden in de bovenste balk. Daar kun je je blok aanpassen via de tabbladen Markup (HTML) en CSS .
En als je PHP wilt toevoegen, moet je een platte teksteditor gebruiken om handmatig block.php- en block.css-bestanden te maken.
5. Sla uw blok op en bevestig
Zorg ervoor dat je je blok opslaat door rechtsboven op Publiceren te klikken.
6. Voeg uw blok toe aan uw website
Tot slot kun je het blok toevoegen aan je website. Open of maak een bericht of pagina en druk vervolgens op de + in de linkerzijbalk van je dashboard om je blok te vinden en in te sluiten.
Pas vervolgens de inhoud van de pagina naar wens aan met andere blokken, handige WordPress shortcodes en andere toegankelijke benaderingen die de gebruikerservaring (UX) en websiteprestaties optimaliseren.
Aangepaste blokken handmatig maken
Je kunt ook aangepaste Gutenberg-blokken vanaf nul coderen door dit stapsgewijze proces te volgen:
1. Stel uw WordPress ontwikkelomgeving in
Installeer eerst en vooral Node.js en de Node package manager (npm). Dit zijn JavaScript-bouwgereedschappen waarmee je basisblokfuncties kunt definiëren. Je kunt Node.js downloaden via het online installatieprogramma en er vervolgens voor zorgen dat npm is geactiveerd door het commando npm-v in je code-editor in te voeren.
Vervolgens moet je Docker installeren, een vereiste om de ontwikkelaarstool van WordPress te kunnen gebruiken. De Docker-website biedt een eenvoudige installatie met één klik.
Daarna stel je je ontwikkelomgeving in en activeer je je staging site. Je kunt de ontwikkelomgeving instellen via de standaardtool van WordPress. Installeer het globaal door het commando npm -g install @wordpress/env in te voeren.
2. Stel je basis (starter) plugin bestand in
Voordat je je aangepaste Gutenberg-blok kunt maken, moet je een plugin basisblok maken als referentie. Gelukkig zijn er een paar manieren om deze stap niet handmatig uit te voeren.
Voer het commando /wp-content/plugins/ uit om naar je plugin-map te navigeren.
Een optie is om het commando npx @wordpress/create-block uit te voeren. Dit geeft je eenvoudig toegang tot en bewerkingsmogelijkheden voor je PHP-bestanden en JS-bestanden.
Zorg ervoor dat je de naam die je wilt gebruiken voor je startblok toevoegt aan het commando. Je kunt iets eenvoudigs gebruiken, zoals mijn-nieuwe-blok, of wees creatief.
Je andere optie is om het hulpprogramma create-guten-block te installeren en het commando npx create-guten-block uit te voeren met de naam van je startblok.
Deze processen creëren een startpunt.
3. Block.json configureren
Je moet een block.json bestand toevoegen aan je nieuwe map en het vervolgens configureren door metadata en selecties voor verschillende instellingen in te voeren. Voorbeelden van instellingen zijn blokattributen en andere instelbare specificaties, zoals deAPI-versie(Application Planning Interface), titel en categorie.
Hier is een voorbeeld van hoe een deel van de block.json code eruit zou kunnen zien:
Het block.json bestand zorgt ervoor dat je basis block plugin wordt weergegeven in de plugins directory, maakt het registreren van je block later gemakkelijker en helpt bij de prestaties van je website.
4. Meer specificaties configureren
Vervolgens bepaal je enqueue je specifieke gegevens met betrekking tot:
- Stijlen.
- Afhankelijkheden en activabestanden.
- Kenmerken.
- Scripts.
- Labels en trefwoorden.
Je kunt naar het package.json bestand navigeren om je JavaScript eigenschappen, stijlen en scripts te configureren. Via block.json kun je attributen definiëren met de functie setAttributes . Je kunt ook blokinstellingen wijzigen met labels en trefwoorden.
Je kunt andere frontend- en backendspecificaties toevoegen en verschillende functies bewerken. Je moet bijvoorbeeld een asset-bestand maken om afhankelijkheden toe te voegen. Je kunt dit doen door de opdracht npm run build in te voeren voor je JavaScript XML-bestand (JSX) of de volgende PHP-code:
5. Registreer uw blok
Zodra je je blokplugin hebt gemaakt, gebruik je de functie register_block_type. Deze blok registratie techniek haalt automatisch de eerder bepaalde metadata uit het block.json bestand.
6. Sla uw blok op en bevestig dat het werkt
De laatste stap is het opslaan van alle bestanden en het testen van je nieuwe blok.
U kunt de functionaliteit ervan bevestigen door uw nieuwe aangepaste Gutenberg-blok toe te voegen aan uw website. Als u het invoegt en het toont het bericht “Hello World”, dan is dat een teken dat u het proces correct hebt voltooid.
Als je hetzelfde blok in de toekomst in meerdere lay-outs of websites wilt gebruiken, probeer het dan te gebruiken in een Gutenberg-blokpatroon.
Ga naar de WordPress “Leren” pagina voor meer informatie en tutorials over het configureren van je website.
Laatste gedachten: Hoe Gutenberg aangepaste blokken maken – een Bluehost gids
Het maken van aangepaste Gutenberg-blokken voor WordPress is een handige oplossing als je website-elementen nodig hebt die niet worden aangeboden door standaardblokken.
Je kunt je eigen Gutenberg-blokken maken met een plugin of door handmatig te coderen. Beide processen vereisen echter enige technische expertise.
Als je zelf geen blokken op maat wilt maken, probeer dan de website ontwerpdiensten van Bluehost. Ons team van toegewijde experts staat klaar om je te helpen bij het aanpassen en creëren van de perfecte website.
Als je je website zelf wilt ontwerpen, maar wel graag deskundige begeleiding wilt bij het bewerken van je site, bieden we ook Pro Design met live ondersteuning. Onze experts kunnen je helpen bij het kiezen en aanpassen van de perfecte thema’s en plugins en bij het optimaliseren van je website.
Als je website klaar is om live te gaan, neem dan contact op met Bluehost voor snelle, hoogwaardige en goed presterende WordPress hostingdiensten.
