{"id":55308,"date":"2023-09-04T16:21:38","date_gmt":"2023-09-04T14:21:38","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=55308&preview=true&preview_id=55308"},"modified":"2023-09-12T09:34:13","modified_gmt":"2023-09-12T07:34:13","slug":"wordpress-blok-templates","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/wordpress-blok-templates\/","title":{"rendered":"Zo maak je WordPress bloktemplates"},"content":{"rendered":"

In het Gutenberg<\/a> tijdperk is het ontwerpproces niet strikt gebonden aan WordPress thema’s<\/a>. Out of the box voorziet het CMS gebruikers van alle ontwerptools die nodig zijn om een geweldige websitelayout te bouwen waarbij thema’s als doel hebben om nog meer bouw- en ontwerptools toe te voegen.<\/p>\n

Bloktemplates zijn een feature die nog meer krachten vrijmaakt bij het bouwen van sites. Volgens het Block Editor Handbook<\/a>:<\/p>\n

Een bloktemplate wordt gedefinieerd als een lijst met blokitems. Zulke blokken kunnen vooraf gedefinieerde attributen hebben, placeholder content en statisch of dynamisch zijn. Met bloktemplates kun je een standaard beginstate opgeven voor een redactiesessie.<\/em><\/p><\/blockquote>\n

Met andere woorden, bloktemplates zijn vooraf samengestelde verzamelingen blokken die worden gebruikt om dynamisch een standaardtoestand in te stellen op de client.<\/p>\n

\ud83d\udc49 Bloktemplates verschillen van templatebestanden.<\/strong><\/p>\n

Templatebestanden zijn PHP bestanden zoals index.php<\/strong>, page.php<\/strong> en single.php<\/strong>, en werken op dezelfde manier met zowel klassieke als blokthema’s, volgens de WordPress templatehi\u00ebrarchie<\/a>. Bij klassieke thema’s zijn deze bestanden geschreven in PHP en HTML. Bij blokkenthema’s bestaan ze volledig uit blokken.<\/p>\n

\ud83d\udc49 Bloktemplates zijn anders dan blokpatronen.<\/strong><\/p>\n

Blokpatronen<\/a> moeten handmatig worden toegevoegd aan je pagina’s, terwijl bloktemplates automatisch zorgen voor de initi\u00eble layout en standaardinstellingen wanneer jij of je teamleden een nieuw bericht maken.<\/p>\n

Je kunt ook specifieke bloktemplates binden aan je aangepaste berichttypes en bepaalde blokken of features vergrendelen om gebruikers te dwingen je standaardwaarden te gebruiken of om fouten te voorkomen.<\/p>\n

Je hebt een paar manieren om bloktemplates te maken. Je kunt de blok API gebruiken<\/a> om een array van bloktypes te declaren via PHP, of je kunt een aangepast bloktype maken met behulp van de component InnerBlocks<\/code>.<\/p>\n

Tijd om alles uitgebreid te bespreken!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Een bloktemplate maken met PHP<\/h2>\n

Als je een ouderwetse developer bent, kun je een aangepast bloktemplate defini\u00ebren met behulp van een plugin of de functions.php<\/a> van je thema. Als je kiest voor een plugin, start dan je favoriete code editor<\/a>, maak een nieuw PHP bestand aan en voeg de volgende code toe:<\/p>\n

<?php\n\/*\n * Plugin Name:       My Block Templates\n * Plugin URI:        https:\/\/example.com\/\n * Description:       An example plugin\n * Version:           1.0\n * Requires at least: 5.5\n * Requires PHP:      8.0\n * Author:            Your name\n * Author URI:        https:\/\/author.example.com\/\n * License:           GPL v2 or later\n * License URI:       https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Update URI:        https:\/\/example.com\/my-plugin\/\n *\/\n\nfunction myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
In de code hierboven, get_post_type_object<\/code><\/a> wordt een berichttype op naam opgehaald.<\/p>\n
Sla je bestand op in de map wp-content\/plugins<\/strong>, navigeer naar het Plugins scherm in je WordPress dashboard<\/a> en activeer de My Block Templates<\/strong> plugin.<\/p>\n
Als je nu een nieuw bericht maakt, start de editor automatisch je bloktemplate met een Image blok, een heading en een alinea.<\/p>\n
\"Een
Een bloktemplate dat automatisch wordt geladen in de Post Editor<\/figcaption><\/figure>\n
Je kunt daarnaast een array met instellingen voor elk blok toevoegen en geneste structuren van blokken maken. De volgende feature bouwt een geavanceerder bloktemplate met binnenliggende blokken en instellingen:<\/p>\n
function myplugin_register_my_block_template() {\n\n\t$block_template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading', array(\n\t\t\t'placeholder'\t=> 'Add H2...',\n\t\t\t'level'\t\t\t=> 2\n\t\t) ),\n\t\tarray( 'core\/paragraph', array(\n\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\n\t\t) ),\n\t\tarray( 'core\/columns', \n\t\t\tarray(), \n\t\t\tarray( \n\t\t\t\tarray( 'core\/column',\n\t\t\t\t\tarray(),\n\t\t\t\t\tarray(\n\t\t\t\t\t\tarray( 'core\/image' )\n\t\t\t\t\t)\n\t\t\t\t), \n\t\t\t\tarray( 'core\/column',\n\t\t\t\t\tarray(),\n\t\t\t\t\tarray(\n\t\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t\t) ),\n\t\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t\t) )\n\t\t\t\t\t) \n\t\t\t\t)\n\t\t\t) \n\t\t)\n\t);\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = $block_template;\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Je kunt de uitvoer van bovenstaande code zien in de volgende afbeelding:<\/p>\n
\"Een
Een geavanceerder bloktemplate<\/figcaption><\/figure>\n
Tot nu toe hebben we alleen coreblokken gebruikt. Maar je kunt ook aangepaste blokken<\/a> of blokpatronen<\/a> opnemen in je bloktemplates, zoals in het volgende voorbeeld:<\/p>\n
function myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'page' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/pattern', array(\n\t\t\t'slug' => 'my-plugin\/my-block-pattern'\n\t\t) ) \n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Er is niet veel verschil in het geval dat je besluit om een standaard bloktemplate te maken voor een al geregistreerd aangepast posttype. Verander gewoon het posttype van get_post_type_object<\/code> in de naam van je aangepaste posttype, zoals in het volgende voorbeeld:<\/p>\n
<?php\nfunction myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'book' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Nu je weet hoe je bloktemplates maakt, kunnen we verder gaan en meer use cases verkennen. Laten we eens wat dieper duiken.<\/p>\n
<\/div><\/kinsta-auto-toc>\n
Bloktemplates met aangepaste berichttypen<\/h3>\n
Zoals we al eerder zeiden, kun je een bloktemplate koppelen aan een aangepast berichttype. Je kunt dat doen nadat je aangepaste berichttype al is geregistreerd, maar je kunt er de voorkeur aan geven om een bloktemplate te defini\u00ebren bij de registratie van het aangepaste berichttype<\/a>.<\/p>\n
In dat geval kun je de argumenten template<\/code> en template_lock<\/code> van de register_post_type<\/code><\/a> functie gebruiken:<\/p>\n
function myplugin_register_book_post_type() {\n\t$args = array(\n\t\t'label' => esc_html__( 'Books' ),\n\t\t'labels' => array(\n\t\t\t'name' => esc_html__( 'Books' ),\n\t\t\t'singular_name' => esc_html__( 'Book' ),\n\t\t),\n\t\t'public' => true,\n\t\t'publicly_queryable' => true,\n\t\t'show_ui' => true,\n\t\t'show_in_rest' => true,\n\t\t'rest_namespace' => 'wp\/v2',\n\t\t'has_archive' => true,\n\t\t'show_in_menu' => true,\n\t\t'show_in_nav_menus' => true,\n\t\t'supports' => array( 'title', 'editor', 'thumbnail' ),\n\t\t'template' => array(\n\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t) ),\n\t\t\tarray( 'core\/columns', \n\t\t\t\tarray(), \n\t\t\t\tarray( \n\t\t\t\t\tarray( 'core\/column',\n\t\t\t\t\t\tarray(),\n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\tarray( 'core\/image' )\n\t\t\t\t\t\t)\n\t\t\t\t\t), \n\t\t\t\t\tarray( 'core\/column',\n\t\t\t\t\t\tarray(),\n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t\t\t) ),\n\t\t\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t\t\t) )\n\t\t\t\t\t\t) \n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t)\n\t);\n\tregister_post_type( 'book', $args );\n}\nadd_action( 'init', 'myplugin_register_book_post_type' );<\/code><\/pre>\n
En dat was het. De afbeelding hieronder toont het bloktemplate in de interface van de editor voor een aangepast berichttype voor boeken.<\/p>\n
\"Een
Een bloktemplate voor een aangepast berichttype<\/figcaption><\/figure>\n
Als je klaar bent met de layout, wil je misschien spelen met de blokinstellingen om het gedrag en het uiterlijk van je bloktemplate te finetunen.<\/p>\n
Het bloktemplate finetunen met blokattributen<\/h3>\n
We hebben een bloktemplate gedefinieerd als een lijst van blokken. Elk item in de lijst moet een array zijn die de naam van het blok en een array van optionele attributen bevat. Met geneste matrices wil je misschien een derde matrix toevoegen voor child blokken.<\/p>\n
Een template met een blok Columns kan als volgt worden weergegeven:<\/p>\n
$template = array( 'core\/columns', \n\t\/\/ attributes\n\tarray(), \n\t\/\/ nested blocks\n\tarray(\n\t\tarray( 'core\/column' ),\n\t\tarray( 'core\/column' ) \n\t) \n);<\/code><\/pre>\n
Zoals hierboven vermeld, is de tweede matrix in de lijst een optionele matrix van blokattributen. Met deze attributen kun je het uiterlijk van je template aanpassen, zodat jij of je gebruikers zich kunnen concentreren op de inhoud van het bericht zonder zich zorgen te maken over de layout en het ontwerp van de pagina.<\/p>\n
Om te beginnen kun je de Block Editor gebruiken om een structuur van blokken te maken die je kunt gebruiken als referentie voor je template.<\/p>\n
\"Een
Een blokindeling in de Block Editor<\/figcaption><\/figure>\n
Voeg je blokken toe, pas de layout en stijlen aan, schakel dan over naar de Code Editor en zoek blok delimiters.<\/p>\n
\"The
De blok delimiter van een Columns blok<\/figcaption><\/figure>\n
Blok delimiters slaan blokinstellingen en stijlen op in sleutel\/waardeparen. Je kunt eenvoudigweg sleutels en waarden uit de blok markup kopi\u00ebren en plakken om je reeks attributen te vullen:<\/p>\n
$template = array( 'core\/columns', \n\tarray(\n\t\t'verticalAlignment'\t=> 'center',\n\t\t'align'\t\t\t\t=> 'wide',\n\t\t'style'\t\t\t\t=> array( \n\t\t\t'border'\t=> array(\n\t\t\t\t'width'\t=> '2px',\n\t\t\t\t'radius'\t=> array(\n\t\t\t\t\t'topLeft'\t\t=> '12px', \n\t\t\t\t\t'topRight'\t\t=> '12px', \n\t\t\t\t\t'bottomLeft'\t=> '12px', \n\t\t\t\t\t'bottomRight'\t=> '12px'\n\t\t\t\t)\n\t\t\t)\n\t\t),\n\t\t'backgroundColor' => 'tertiary'\n\t),\n\tarray(\n\t\tarray( 'core\/column' ),\n\t\tarray( 'core\/column' ) \n\t) \n);<\/code><\/pre>\n
Herhaal dit proces voor elk blok in de template en je bent klaar.<\/p>\n
$template = array(\n\tarray( 'core\/paragraph', array(\n\t\t'placeholder'\t=> 'Add paragraph...'\n\t) ),\n\tarray( 'core\/columns', \n\t\tarray(\n\t\t\t'verticalAlignment'\t=> 'center',\n\t\t\t'align'\t\t\t\t=> 'wide',\n\t\t\t'style'\t\t\t\t=> array( \n\t\t\t\t'border'\t=> array(\n\t\t\t\t\t'width'\t\t=> '2px',\n\t\t\t\t\t'radius'\t=> array(\n\t\t\t\t\t\t'topLeft'\t\t=> '12px', \n\t\t\t\t\t\t'topRight'\t\t=> '12px', \n\t\t\t\t\t\t'bottomLeft'\t=> '12px', \n\t\t\t\t\t\t'bottomRight'\t=> '12px'\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t),\n\t\t\t'backgroundColor' => 'tertiary',\n\t\t\t'lock' => array(\n\t\t\t\t'remove'\t=> true,\n\t\t\t\t'move'\t\t=> true\n\t\t\t)\n\t\t), \n\t\tarray( \n\t\t\tarray( 'core\/column',\n\t\t\t\tarray( 'verticalAlignment'\t=> 'center' ),\n\t\t\t\tarray(\n\t\t\t\t\tarray( 'core\/image', \n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\t'style'\t=> array( 'border' => array( 'radius' => '8px' ) ) \n\t\t\t\t\t\t) \n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t), \n\t\t\tarray( 'core\/column',\n\t\t\t\tarray( 'verticalAlignment'\t=> 'center' ),\n\t\t\t\tarray(\n\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t) ),\n\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t) )\n\t\t\t\t) \n\t\t\t)\n\t\t)\n\t)\n);<\/code><\/pre>\n
Blokken vergrendelen<\/h3>\n
Je kunt specifieke blokken of alle blokken in je template vergrendelen met de propery template_lock<\/code> van de $post_type_object<\/code>.<\/p>\n
Het vergrendelen van templates kan heel handig zijn als je een blog hebt met meerdere auteurs en wilt voorkomen dat alle of specifieke gebruikers de layout van je blokkentemplate wijzigen.<\/p>\n
In het volgende voorbeeld vergrendelen we alle blokken in het blokkentemplate:<\/p>\n
function myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n\t$post_type_object->template_lock = 'all';\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Vergrendelde blokken tonen een sloticoon in de werkbalk en lijstweergave van de blokken:<\/p>\n
\"Een
Een vergrendeld Heading blok<\/figcaption><\/figure>\n
Gebruikers kunnen blokken ontgrendelen via het menu Options in de toolbar voor blokken.<\/p>\n
\"Een
Een blok ontgrendelen<\/figcaption><\/figure>\n
Als je op Unlock <\/b>klikt, krijg je een modale popup waarmee je de beweging kunt in-\/uitschakelen, verwijderen kunt voorkomen of beide:<\/p>\n
\"Opties
Opties voor vergrendelen<\/figcaption><\/figure>\n
template_lock<\/code> kan een van de volgende waarden<\/a> aannemen:<\/p>\n