{"id":70333,"date":"2023-08-10T07:00:06","date_gmt":"2023-08-10T14:00:06","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=70333"},"modified":"2025-05-26T09:19:30","modified_gmt":"2025-05-26T16:19:30","slug":"hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/","title":{"rendered":"Hoe Je WordPress-blokken Gebruikt (+ Hoe Je Je Eigen Maakt!)"},"content":{"rendered":"\n<p>Zou dit een vreemde plek zijn om te vermelden dat mijn vrouw een mint-condition, ongeopende, gelimiteerde Lego Star Wars BB-8 set vasthoudt?<\/p>\n\n\n<p>Die dingen gaan voor zo&#8217;n $500!<\/p>\n\n\n<p>Ok\u00e9. Het zou vreemd zijn. Begrepen, luid en duidelijk&#8230; Maar dit wordt zo dadelijk allemaal wat duidelijker.<\/p>\n\n\n<p>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 &#8220;nieuw&#8221; <a href=\"https:\/\/www.dreamhost.com\/blog\/what-is-wordpress\/\" target=\"_blank\" rel=\"noopener\">WordPress<\/a> omdat je begonnen bent met het gebruiken van de klassieke editor.<\/p>\n\n\n<p>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.<\/p>\n\n\n<p>WordPress-blokken zijn een soort Legos \u2014zie je, ik <i>zei het je<\/i> dat het zou aansluiten\u2014 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.<\/p>\n\n\n<p>En dat is een van de redenen waarom mensen zo van ze houden. Zodra ze ze begrijpen, tenminste.<\/p>\n\n\n<p>Nadat ik uitleg hoe ze werken, twijfel ik er niet aan dat jij ze ook geweldig zult vinden.<\/p>\n\n\n<h2 id=\"definition\" class=\"wp-block-heading\">Wat Zijn WordPress Blokken?<\/h2>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1052\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks.jpg\" alt=\"Wordpress Blokken\" class=\"wp-image-41445 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-300x197.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-1024x673.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-768x505.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-1536x1010.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-600x395.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1200x789.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-730x480.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1460x960.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-784x515.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1568x1031.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-877x577.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1052;\" \/><\/figure>\n\n\n<p>WordPress-blokken zijn, zoals de naam al doet vermoeden, als stapelbare <i>bouwblokken<\/i> die je kunt toevoegen aan pagina&#8217;s en berichten op je WordPress-site.<\/p>\n\n\n<p>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 \u2014 en je kunt blokken over je hele site gebruiken, niet alleen binnen berichten.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Gutenberg<\/h3>\n    <p>Gutenberg is de naam voor het Block Editor project in WordPress. Veel WordPress-ontwikkelaars en -enthousiastelingen gebruiken de termen Gutenberg Editor en Block Editor door elkaar.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/gutenberg\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lees Meer                    <\/a>\n\n<\/div>\n\n\n<p>Denk er eens aan, een beetje zoals een site- of paginabouwer. Je kunt op de &#8220;+&#8221; 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.<\/p>\n\n\n<p>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&#8217;s of contactformulieren aan de pagina toevoegen, of zelfs specifieke inhoud met vooraf gedefinieerde opmaak toevoegen.<\/p>\n\n\n<p>Plus, de meeste blokken hebben aanpassingsopties waarmee je kunt instellen hoe ze worden weergegeven of functioneren op je site.<\/p>\n\n\n<p>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.<\/p>\n\n\n<p><b>Nerd opmerking:<\/b> 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 <a href=\"https:\/\/www.dreamhost.com\/wordpress\/\" target=\"_blank\" rel=\"noopener\">WordPress-installatie<\/a> 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.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h2 id=\"blocks\" class=\"wp-block-heading\">Welke Blokken Heeft WordPress Al?<\/h2>\n\n\n<p>Standaard biedt de blokeditor een <i>enorm <\/i>aantal <a href=\"https:\/\/wordpress.com\/support\/wordpress-editor\/blocks\/\" target=\"_blank\" rel=\"noopener\">beschikbare blokken<\/a>. 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.<\/p>\n\n\n<p>Laten we eens kijken naar enkele van de meest populaire en nuttige standaard Gutenberg-blokken.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Meest Voorkomende Blokken<\/h3>\n\n\n<p>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.<\/p>\n\n\n<p>Zoals:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Tekstblok \u2014 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.<\/li>\n\n\n\n<li>Afbeeldingsblok \u2014 Voor als je wilt laten zien \u00e9n vertellen, voeg een afbeelding toe voor wat extra flair.<\/li>\n\n\n\n<li>Lijstblok \u2014 Moet je een overzicht maken? Of een genummerde lijst? Je kunt het allemaal doen met het lijstblok!<\/li>\n\n\n\n<li>Afbeeldingengalerijblok \u2014 Vakantiefoto&#8217;s of productafbeeldingen delen zag er nog nooit zo goed uit.<\/li>\n\n\n\n<li>Tabelblok \u2014 Maak een prijzentabel of deel wat spreadsheetgegevens met gemak.<\/li>\n\n\n\n<li>Citaatblok \u2014 Wil je de aandacht vestigen op een bepaalde observatie? Ge\u00efnspireerd door een citaat dat relevant is voor de post die je schrijft? Licht het uit met het citaatblok!<\/li>\n\n\n<\/ul>\n\n\n<p>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.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Ingebedde Inhoudsblokken<\/h3>\n\n\n<p>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.<\/p>\n\n\n<p>Enkele van de meest populaire invoegbloktypen voor het binnenhalen van externe inhoud:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Calendly-blok<\/li>\n\n\n\n<li>Aangepaste HTML-blok<\/li>\n\n\n\n<li>Twitter-blok<\/li>\n\n\n\n<li>YouTube-blok<\/li>\n\n\n\n<li>Getuigenissen<\/li>\n\n\n\n<li>WooCommerce<\/li>\n\n\n\n<li>Contactformulieren<\/li>\n\n\n\n<li>Veelgestelde vragen<\/li>\n\n\n<\/ul>\n\n\n<p>Met deze bloktypen kun je verder gaan dan de basisteksteditor en interactieve inhoud maken die allerlei functionaliteiten en functies bevat.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Speciale Blokken<\/h3>\n\n\n<p>Hier wordt het echt spannend.<\/p>\n\n\n<p>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.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Navigatie<\/h3>\n    <p>Op het web vertegenwoordigt de term &#8216;navigatie&#8217; het verplaatsen van de ene website of pagina naar de andere. Navigatie is ook een veelvoorkomende term in webontwikkeling en -ontwerp. Er wordt nadruk gelegd op het gemakkelijk maken voor gebruikers om de pagina&#8217;s te vinden die ze nodig hebben.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/navigation\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lees Meer                    <\/a>\n\n<\/div>\n\n\n<p>Hier zijn er een paar om te bekijken:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Knoppenblok<\/li>\n\n\n\n<li>Kolommenblok<\/li>\n\n\n\n<li>Groepsblok<\/li>\n\n\n\n<li>Post Carrouselblok<\/li>\n\n\n\n<li>Post Inhoudsblok<\/li>\n\n\n\n<li>Query Lus Blok<\/li>\n\n\n\n<li>Herbruikbaar Blok<\/li>\n\n\n\n<li>Shortcode Blok<\/li>\n\n\n\n<li>Inhoudsopgaveblok<\/li>\n\n\n<\/ul>\n\n\n<p>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.<\/p>\n\n\n<p>Dat is allemaal geweldig en prima.<\/p>\n\n\n<p><i>Maar wat als je een blok nodig hebt dat niet standaard met WordPress meegeleverd wordt?&nbsp;<\/i><\/p>\n\n\n<p>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.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Widget<\/h3>\n    <p>WordPress-widgets kunnen functies toevoegen aan de zijbalken, voetteksten of andere gebieden van je website. Enkele standaard WordPress-widgets zijn Categorie\u00ebn, Tagwolk, Zoeken, Navigatiemenu, Kalender en Recente berichten.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/widget\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lees Meer                    <\/a>\n\n<\/div>\n\n\n<h2 id=\"create\" class=\"wp-block-heading\">Hoe Maak Je Aangepaste Blokken Met Een WordPress Plugin<\/h2>\n\n\n<p>Verreweg de gemakkelijkste manier om een aangepast blok te maken is door een plugin te gebruiken.<\/p>\n\n\n<p>De <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/#description\" target=\"_blank\" rel=\"noopener\">Genesis Custom Blocks plugin<\/a> maakt het bouwen en lanceren van je eigen aangepaste blokken vrij eenvoudig. Je zult een basiskennis van <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-html\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a> en <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-css\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> moeten hebben om het blok te cre\u00ebren en te stylen naar je behoeften.<\/p>\n\n\n<p>Met die basiskennis zorgt de plugin voor alle moeilijke installatie en configuratie om een nieuw blok te implementeren.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Stap 1: Installeer Genesis Block Plugin<\/h3>\n\n\n<p>Als eerste: ga naar de WordPress plugin directory en installeer de <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/#description\" target=\"_blank\" rel=\"noopener\">Genesis Custom Block plugin<\/a>.<\/p>\n\n\n<p>(Vergeet niet naar het tabblad Plugins te gaan en deze te activeren.)<\/p>\n\n\n<h3 class=\"wp-block-heading\">Stap 2: Voeg Een Nieuw Blok Toe<\/h3>\n\n\n<p>Eenmaal ge\u00efnstalleerd en geactiveerd, zou je een nieuwe optie moeten zien vanuit het WP-beheerpaneel in de navigatie aan de linkerkant.<\/p>\n\n\n<p>Klik op Aangepaste Blokken &gt; Nieuw toevoegen.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Stap 3: Pas De Editorvelden Aan<\/h3>\n\n\n<p>Nu zijn we klaar om het aangepaste blok te gaan bouwen.<\/p>\n\n\n<p>De eerste stap zal zijn om de velden en aanpassingsopties in te stellen die verschijnen wanneer je het blok op je website gebruikt.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1171\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen.jpg\" alt=\"Screenshot die het instellingenscherm van de Genesis Custom Blocks Plugin toont\" class=\"wp-image-41446 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-300x220.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1024x749.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-768x562.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1536x1124.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-600x439.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1200x878.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-730x534.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1460x1069.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-784x574.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1568x1148.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-877x642.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1171;\" \/><\/figure>\n\n\n<p>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.<\/p>\n\n\n<p>Bijvoorbeeld, als je een aangepaste oproep-tot-actie (CTA) blok bouwt, zou je velden kunnen toevoegen zoals:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Kop tekst<\/li>\n\n\n\n<li>Subkop tekst<\/li>\n\n\n\n<li>Knop tekst<\/li>\n\n\n\n<li>CTA knop URL<\/li>\n\n\n<\/ul>\n\n\n<p>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.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Stap 4: Pas De Opmaak En CSS Aan<\/h3>\n\n\n<p>Nu we de backend van het blok hebben ingesteld, moeten we WordPress vertellen hoe de toegevoegde inhoud daadwerkelijk weergegeven moet worden.<\/p>\n\n\n<p>Hier komt enige eerdere kennis van HTML of CSS die je misschien hebt goed van pas.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1171\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS.jpg\" alt=\"Pas de Opmaak en CSS Aan\" class=\"wp-image-41447 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-300x220.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-1024x749.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-768x562.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-1536x1124.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-600x439.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1200x878.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-730x534.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1460x1069.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-784x574.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1568x1148.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-877x642.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1171;\" \/><\/figure>\n\n\n<p>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.<\/p>\n\n\n<p>Je kunt dit in standaard HTML en CSS schrijven.<\/p>\n\n\n<p>Je kunt ook de variabelen uit de blokeditor halen door dubbele haakjes te gebruiken en de veldnaam (slug) uit de editor. (Bijv., &#8220;{{button-text}}&#8221;)<\/p>\n\n\n<h3 class=\"wp-block-heading\">Stap 5: Voeg Het Blok Toe<\/h3>\n\n\n<p>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.<\/p>\n\n\n<p>Klik simpelweg op de \u201c+\u201d en vind dan het nieuwe blok op naam.<\/p>\n\n\n<p>Eenmaal toegevoegd, zou je het scherm van de Gutenberg blokeditor moeten zien met de velden en opties die je hebt geconfigureerd.<\/p>\n\n\n<p>Dat is het!<\/p>\n\n\n<p>Je kunt nu je aangepaste blok gebruiken door het toe te voegen aan pagina&#8217;s, berichten, zijbalken of waar je het nodig hebt.<\/p>\n\n\n<h2 id=\"custom\" class=\"wp-block-heading\">Hoe Maak Je Aangepaste WordPress-blokken Zonder Een Plugin<\/h2>\n\n\n<p>Als je dieper wilt duiken en echt wilt leren hoe je nieuwe blokken vanaf nul kunt cre\u00ebren, heb je iets meer geavanceerde kennis nodig.<\/p>\n\n\n<p>In deze handleiding lopen we door de basisstappen voor het gebruik van de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\" target=\"_blank\" rel=\"noopener\">create-block tool<\/a> waarmee je volledig aangepaste blokken kunt opzetten zonder een plugin te hoeven gebruiken.<\/p>\n\n\n<p>Eerlijke waarschuwing: Dit is een geavanceerde workflow. Het vereist dat je je verdiept in de commandoregel.<\/p>\n\n\n<p>Je moet PHP, JavaScript, HTML en CSS begrijpen.<\/p>\n\n\n<p>Zeg niet dat we je niet gewaarschuwd hebben!<\/p>\n\n\n<h3 class=\"wp-block-heading\">Stap #1: Installeer Node.js, NPM, en Lokale WordPress Installatie<\/h3>\n\n\n<p>Voordat we create-block kunnen gebruiken, moeten we de juiste opstelling en toegang hebben.<\/p>\n\n\n<p>Hier zijn de vereisten:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/learn.wordpress.org\/tutorial\/local-wordpress-installations-for-beginners\/\" target=\"_blank\" rel=\"noopener\">Een lokale WordPress installatie<\/a><\/li>\n\n\n\n<li>Terminal of command line setup<\/li>\n\n\n\n<li><a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener\">Node.js en npm<\/a><\/li>\n\n\n<\/ul>\n\n\n<p>Je wilt misschien ook gebruik maken van <a href=\"https:\/\/github.com\/nvm-sh\/nvm\" target=\"_blank\" rel=\"noopener\">nvm<\/a> (Node versiebeheerder) om een compatibele versie van Node.js te installeren of bij te werken<\/p>\n\n\n<p>Met deze setup zullen we het commando \u201cnpx\u201d van NPM gebruiken om het create-block-pakket direct vanuit de gehoste directory in de cloud uit te voeren.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Stap #2: Voer het create-block Pakket Uit<\/h3>\n\n\n<p>Nu, de gemakkelijke stap.<\/p>\n\n\n<p>Vanuit de terminal navigeer je naar de \/wp-content\/plugins directory van je website op je lokale machine.<\/p>\n\n\n<p>Voer vervolgens het create-block-pakket uit met NPX:<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"693\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package.jpg\" alt=\"Voer het create-block pakket uit\" class=\"wp-image-41448 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-300x130.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-1024x444.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-768x333.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-1536x665.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-600x260.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1200x520.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-730x316.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1460x632.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-784x340.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1568x679.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-877x380.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/693;\" \/><\/figure>\n\n\n<p><code>npx @wordpress\/create-block {{block-name}}<\/code><\/p>\n\n\n<p>Dit pakket zal het proces doorlopen van het opzetten van wat bekend staat als de &#8220;bloksteiger&#8221;. 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.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Stap #3: Activeer De Plugin<\/h3>\n\n\n<p>Het nieuwe blok zal de vorm aannemen van een plugin.<\/p>\n\n\n<p>Zodra het create-block pakket voltooid is, moet je naar WP admin gaan.<\/p>\n\n\n<p>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.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Stap #4: Pas De Blokcode Aan<\/h3>\n\n\n<p>Je zult de inhoud en functionaliteit van het blok aanpassen in de <b>\/src\/<\/b> map binnen de plugin directory.<\/p>\n\n\n<p><b>Index.js<\/b> is waar je het blok registreert en de hoofdoutput codeert:<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"871\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code.jpg\" alt=\"Pas de Blokcode Aan\" class=\"wp-image-41449 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-300x163.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-1024x557.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-768x418.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-1536x836.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-600x327.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1200x653.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-730x397.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1460x795.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-784x427.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1568x854.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-877x477.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/871;\" \/><\/figure>\n\n\n<p>Let op dat de functie registerBlockType is ingesteld om zowel de invoer van de blokeditor (&#8220;edit&#8221;) als de weergave aan de voorkant (&#8220;save&#8221;) te verwerken.<\/p>\n\n\n<p>Dit is slechts het begin van het bouwen van een functioneel blok.<\/p>\n\n\n<p>Je wilt waarschijnlijk de volledige documentatie voor het schrijven van functionele blokken met behulp van de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/\" target=\"_blank\" rel=\"noopener\">WordPress Block API<\/a> grondig doornemen.<\/p>\n\n\n<p>Zodra je de basis onder de knie hebt, kun je extra afhankelijkheden toevoegen, externe databronnen aanspreken, en vrijwel alles wat je hartje begeert.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Stap #5: Voeg Het Blok Toe Vanuit De Gutenberg-Editor<\/h3>\n\n\n<p>Met de geactiveerde plugin kun je je blok toevoegen aan elke pagina of post vanuit de Gutenberg-editor.<\/p>\n\n\n<p>Open het via de \u201c+\u201d knop of \u201c\/\u201d commando, net zoals elke andere blok.<\/p>\n\n\n<h2 id=\"summary\" class=\"wp-block-heading\">De Lucht Is De Limiet<\/h2>\n\n\n<p>Ok\u00e9, we zijn van de basis naar gevorderd gegaan met deze, maar het goede nieuws is dat je nu onstuitbaar bent.<\/p>\n\n\n<p>Tussen de standaard blokopties, de Genesis plugin, en de mogelijkheid om je eigen blokken vanaf nul te bouwen \u2014 er is niets dat je niet kunt doen!<\/p>\n\n\n<p>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.<\/p>\n\n\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      WordPress + DreamHost\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Onze automatische updates en sterke beveiligingsverdedigingen nemen serverbeheer uit jouw handen zodat je je kunt concentreren op het cre\u00ebren van een geweldige website.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/wordpress\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Bekijk De Plannen                    <\/a>\n\n  <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Zou dit een vreemde plek zijn om te vermelden hoe mijn vrouw een mint-conditie, ongeopende, gelimiteerde-editie Lego Star Wars BB-8 kit vasthoudt? Die dingen gaan voor zoiets als $500! Ok\u00e9. Het zou vreemd zijn. Begrepen, luid en duidelijk\u2026 Maar dit zal zo dadelijk allemaal wat meer zin maken. In deze post, [\u2026]<\/p>\n","protected":false},"author":1062,"featured_media":41439,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"WordPress-blokken zijn een van de meest significante veranderingen voor het CMS ooit. Leer hoe ze werken en hoe je ze kunt aanpassen aan jouw specifieke behoeften.","toc_headlines":"[[\"definition\",\"Wat Zijn WordPress Blokken?\"],[\"blocks\",\"Welke Blokken Heeft WordPress Al?\"],[\"create\",\"Hoe Maak Je Aangepaste Blokken Met Een WordPress Plugin\"],[\"custom\",\"Hoe Maak Je Aangepaste WordPress-blokken Zonder Een Plugin\"],[\"summary\",\"De Lucht Is De Limiet\"]]","hide_toc":false,"footnotes":""},"categories":[14954,14942,14946],"tags":[],"class_list":["post-70333","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-getting-started-nl","category-website-design-nl","category-wordpress-nl"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Hoe Je WordPress-blokken Gebruikt (+ Hoe Je Je Eigen Maakt!) - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"WordPress-blokken zijn een van de meest significante veranderingen voor het CMS ooit. Leer hoe ze werken en hoe je ze kunt aanpassen aan jouw specifieke behoeften.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hoe Je WordPress-blokken Gebruikt (+ Hoe Je Je Eigen Maakt!)\" \/>\n<meta property=\"og:description\" content=\"WordPress-blokken zijn een van de meest significante veranderingen voor het CMS ooit. Leer hoe ze werken en hoe je ze kunt aanpassen aan jouw specifieke behoeften.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-10T14:00:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T16:19:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Hoe Je WordPress-blokken Gebruikt (+ Hoe Je Je Eigen Maakt!) - DreamHost Blog","description":"WordPress-blokken zijn een van de meest significante veranderingen voor het CMS ooit. Leer hoe ze werken en hoe je ze kunt aanpassen aan jouw specifieke behoeften.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/","og_locale":"en_US","og_type":"article","og_title":"Hoe Je WordPress-blokken Gebruikt (+ Hoe Je Je Eigen Maakt!)","og_description":"WordPress-blokken zijn een van de meest significante veranderingen voor het CMS ooit. Leer hoe ze werken en hoe je ze kunt aanpassen aan jouw specifieke behoeften.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-08-10T14:00:06+00:00","article_modified_time":"2025-05-26T16:19:30+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"Hoe Je WordPress-blokken Gebruikt (+ Hoe Je Je Eigen Maakt!)","datePublished":"2023-08-10T14:00:06+00:00","dateModified":"2025-05-26T16:19:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/"},"wordCount":2004,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","articleSection":["Aan de slag","Websiteontwerp","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/","name":"Hoe Je WordPress-blokken Gebruikt (+ Hoe Je Je Eigen Maakt!) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","datePublished":"2023-08-10T14:00:06+00:00","dateModified":"2025-05-26T16:19:30+00:00","description":"WordPress-blokken zijn een van de meest significante veranderingen voor het CMS ooit. Leer hoe ze werken en hoe je ze kunt aanpassen aan jouw specifieke behoeften.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","width":1460,"height":1095,"caption":"How To Use WordPress Blocks Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-je-wordpress-blokken-gebruikt-hoe-je-je-eigen-maakt-nl\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Hoe Je WordPress-blokken Gebruikt (+ Hoe Je Je Eigen Maakt!)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"nl","translations":{"nl":70333,"es":41465,"en":41438,"de":52846,"pt":54873,"pl":54880,"ru":54916,"uk":54919,"it":68363,"fr":70312},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=70333"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70333\/revisions"}],"predecessor-version":[{"id":70335,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70333\/revisions\/70335"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/41439"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=70333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=70333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=70333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}