WordPress is een krachtige tool waarmee je online kan publiceren en waarmee iedereen gemakkelijk tekstuele en/of multimedia content kan maken en delen. Daarnaast is het ook een geweldig professioneel hulpmiddel voor ontwerpers, marketeers en developers , ongeacht hun achtergrond en vaardigheden.
In het kort: WordPress kan je meest waardevolle teamlid zijn en je helpen succesvol te zijn in verschillende beroepssectoren.
Met dat in gedachten hebben we op deze blog een reeks artikelen gepubliceerd om je te helpen de vaardigheden te verwerven die nodig zijn om een WordPress developer te worden:
- Custom Gutenberg blokken bouwen
- Zo maak je dynamische blokken voor Gutenberg
- Zo voeg je metaboxes en aangepaste velden toe aan berichten in Gutenberg
En voor degenen die de voorkeur geven aan videocontent, hebben we ook een gratis videocursus: Custom Gutenberg blokken ontwikkelen.
En ja, je kunt je carrière een boost geven met Gutenberg ontwikkelingsvaardigheden, maar je hoeft niet per se een developers te zijn om geavanceerde layouts te maken op je WordPress website.
WordPress gebruikers kunnen profiteren van krachtige features waarmee ze eenvoudig geavanceerde bloklayouts kunnen maken zonder gedoe. In dit artikel richten we onze aandacht op Blokpatronen.
Wat zijn blokpatterns?
Blokpatterns zijn vooraf samengestelde groepen blokken die je kunt toevoegen aan je content en kunt aanpassen met dezelfde ontwerptools die beschikbaar zijn voor de meegeleverde blokken.
Ze werden voor het eerst geïntroduceerd met WordPress 5.5 om sitebeheerders en content creators in staat te stellen om complexe kant-en-klare structuren van geneste blokken in hun content op te nemen met slechts een paar klikken.
WordPress biedt standaard een paar ingebouwde blokpatronen waaruit je kunt kiezen bij het maken van je content. Daarnaast bieden blokkenthema’s meestal meer blokpatronen die je direct vanuit de blok-inserter aan je inhoud kunt toevoegen.
Het huidige standaardthema, Twenty Twenty-Three, biedt bijvoorbeeld de volgende blokpatronen:
- Call-to-action
- Default footer
- Hidden 404
- Hidden comments
- Hidden content without results
- Post meta
En je bent niet beperkt tot de patterns van WordPress of je thema.
Ten eerste vind je tonnen kant-en-klare blokpatterns in de officiële WordPress Patterns directory.
Daarnaast kun je een onbeperkt aantal aangepaste patterns maken met behulp van de Patterns API of de bewerkingstools die beschikbaar zijn in de blokkeneditor. Je kunt aangepaste paterns intern op je website gebruiken, ze exporteren naar andere websites of ze openbaar delen in de Patterns map.
Sinds WordPress 6.3 maakt een gloednieuw patternsysteem het aanmaken van patterns flexibeler en eenvoudiger. Nu is het duidelijker wat voor soort lay-out je aan het bouwen bent en welk effect je aanpassingen hebben op je hele website.
Vraag je je af hoe dit systeem werkt en hoe je kunt profiteren van de nieuwe editing features die zijn toegevoegd aan WordPress 6.3? Laten we er eens in duiken.
Kant-en-klare blokpatterns
Voorgebouwde patterns zijn “niet gesynchroniseerde” blokpatterns, wat betekent dat wijzigingen die je aanbrengt in een blokpattern alleen invloed hebben op de specifieke instance die je aan het bewerken bent en niet worden toegepast op andere instance die je hebt toegevoegd aan andere berichten of pagina’s van je website.
Je kunt kant-en-klare patterns gebruiken om bloklayouts op te nemen die je ter plekke aanpast door afbeeldingen, tekst, stijlen of het toevoegen/verwijderen van elementen te wijzigen.
Blokpatronen zijn herbruikbaar, wat betekent dat als je eenmaal je eigen blokpatroon hebt gemaakt, je het overal op je website kunt toevoegen en het met een paar klikken kunt aanpassen met de ingebouwde regelaars van de editor.
Je kunt voorgebouwde blokpatterns doorbladeren en invoegen vanaf het tabblad Patterns in de Block Inserter, navigeren naar de beheersectie Patterns in de Site Editor, of de map Patterns via de knop Explore all patterns in de Block Inserter.
Je vindt heel veel patterns in het tabblad Patterns van de Block Inserter, of verken de Block Pattern bibliotheek rechtstreeks vanuit de interface van de editor.
Je kunt ook de website van Block Patterns bezoeken, een pattern kiezen en op Copy klikken.
Zodra je een patroon hebt gekopieerd, plak je het in je inhoud en ben je klaar.
Je kunt de groep blokken in het pattern aanpassen zonder het geregistreerde pattern of een andere instance ervan op je website te beïnvloeden.
Custom blokpatterns
Zoals we hierboven al zeiden, is met WordPress 6.3 het het patternsysteem gestroomlijnd en consistenter geworden.
Het is nu eenvoudiger voor de gebruiker om custom patterns aan te maken rechtstreeks vanuit de Block Editor en ze te beheren vanuit het WordPress dashboard zonder zich bezig te hoeven houden met code.
Vanaf nu kun je het volgende bouwen:
- Gesynchroniseerde blokpatterns
- Standaard blokpatterns
Het verschil tussen de twee soorten patterns is dat alle wijzigingen die je aanbrengt in een gesynchroniseerd pattern worden toegepast op elk voorkomen van dat blok op je hele website.
Daarentegen zullen wijzigingen aan een standaard (niet gesynchroniseerd) blokpattern alleen van invloed zijn op die specifieke instance van het pattern en niet worden toegepast op elke andere instance die je hebt toegevoegd aan andere posts of pagina’s van je website.
Vanuit het oogpunt van een developer worden aangepaste blokpatterns geregistreerd in de WordPress database als wp_block custom berichttypes, en een wp_block_sync_status meta veld slaat de synchronisatiestatus van een pattern op.
wp_block_sync_status wordt gebruikt om de synchronisatiestatus van een blokpattern op te slaan
Dankzij het nieuwe pattern beheersysteem kun je nu gesynchroniseerde en niet gesynchroniseerde blokpatterns rechtstreeks vanuit de Site Editor of Post Editor maken. Je hoeft alleen maar je bloklayout te ontwerpen, de blokken te selecteren en op het pictogram met de drie puntjes in de blokkenwerkbalk te klikken. Kies vervolgens Create pattern/reusable block in het vervolgkeuzemenu.
In het voorbeeld hieronder maken we een gesynchroniseerd pattern van een Group block, een heading, een paragraaf, een knop en een paar spacers.
Als je op Create pattern/reusable block maken klikt, wordt je gevraagd een naam in te vullen voor je pattern en te bepalen of het een gesynchroniseerd of niet gesynchroniseerd pattern is.
Hier kun je een voorbeeld van je patterns bekijken en de patternsynchronisatiestatus controleren.
Vervolgens kun je de Pattern Editor starten en je blokpattern aanpassen.
Nogmaals, wijzigingen die je aanbrengt in gesynchroniseerde patterns hebben invloed op elk pattern op je website. Wijzigingen in standaard patterns hebben alleen invloed op toekomstige instances van het pattern.
Dit is mogelijk omdat WordPress de twee soorten patterns anders behandelt. Om het verschil te begrijpen, maak je een nieuw bericht aan en voeg je twee blokpatterns toe, één gesynchroniseerd en één standaard. Ga dan naar de Code Editor en controleer de code.
Het gesynchroniseerde blok wordt gegenereerd door de volgende code:
<!-- wp:block {"ref":94} /-->WordPress haalt het bericht met ID 94 op om de HTML te genereren die op het scherm wordt weergegeven.
Het standaard (niet gesynchroniseerde) blok wordt niet geïdentificeerd met een ID. In dit geval bevat de Code Editor de volledige opmaak van de blokken die het pattern vormen.
Gesynchroniseerde patterns zijn vooral handig om elementen te maken die je op meerdere pagina’s van je website en/of op verschillende websites wilt gebruiken. Denk aan oproepen tot actie, promotiebanners, prijstabellen, enzovoort.
In de Block Inserter staan custom blokpatterns op twee aparte tabbladen. Standaard patterns staan in het tabblad Patterns onder de categorie My Patterns.
wp_block berichttypes en slaat ze als zodanig op in de wp_posts tabel.
Als je eenmaal je patterns hebt aangemaakt, kun je ze beheren vanuit het adminscham Block Patterns. Je kunt die pagina op verschillende manieren openen:
- Door /wp-admin/edit.php?post_type=wp_block toe te voegen aan de WordPress URL van je website.
- Klikken op de knop Manage My Patterns in de Block Inserter.
- Klikken op de knop Manage All Of My Patterns in de Site Editor.
Eenmaal daar kun je
- Je pattern bewerken, weggooien of exporteren als JSON,
- Patterns importeren vanuit JSON,
- Nieuwe patterns aanmaken.
Alle wijzigingen aan een gesynchroniseerd pattern worden toegepast op elk voorkomen van dat pattern op je hele website, ongeacht de beheerpagina waar de wijzigingen zijn aangebracht.
Template-onderdelen
Vóór het Gutenberg tijdperk werden WordPress thema’s en templates voornamelijk in PHP gebouwd. Gedegen kennis van childthema’s, templatehiërarchie en de belangrijkste front-end ontwikkelingstalen waren basisvereisten om templates te maken of aan te passen. Maar dingen veranderden met de introductie van blokthema’s.
In blokthema’s en klassieke thema’s die voor deze feature hebben gekozen, kun je eenvoudig een template of templateonderdeel maken of aanpassen in de interface van de Site Editor. Je hebt geen ontwikkelingsvaardigheden nodig, tenzij je natuurlijk besluit om themadeveloper te worden.
Een bloktemplate is een lijst met blokonderdelen. Voorbeelden van blokonderdelen zijn de sitetitel, het logo en de navigatie.
Template-onderdelen zijn specifieke secties van een pagina die op verschillende plaatsen kunnen worden gevisualiseerd, zoals een header en een footer, en die op elke pagina van je WordPress website kunnen worden weergegeven.
Je kunt templateonderdelen maken en bewerken via de interface van de site-editor, waar je alle bewerkingstools kunt gebruiken die beschikbaar zijn voor blokken.
Maar in tegenstelling tot blokpatterns zijn template parts bedoeld voor delen van de site die niet vaak veranderen.
Verschillen tussen voorgebouwde patterns, custom patterns en template parts
Samengevat zijn dit de belangrijkste verschillen tussen de drie:
Voorgebouwde blokpatterns
- Voorgebouwde blokpatterns zijn voorgedefinieerde bloklayouts die je kunt toevoegen aan je content en kunt aanpassen met dezelfde tools als de meegeleverde blokken. Wijzigingen aan een blokpattern hebben alleen invloed op die ene instance van het blokpattern.
- Je kunt voorgebouwde patterns kopiëren en plakken vanuit de map Patterns.
- Je kunt nieuwe patronen maken en publiceren in de Pattern map.
Custom blokpatterns
- Custom blokpatterns zijn gesynchroniseerde of niet gesynchroniseerde groepen blokken die je kunt gebruiken op elke bericht of pagina van je website.
- Custom blokpatterns kunnen worden opgeslagen in de
wp_poststabel alswp_blockberichttype. - Je kunt aangepaste blokpatterns simporteren en exporteren van en naar andere websites.
Template-onderdelen
- Template-onderdelen zijn specifieke delen van een pagina die kunnen worden weergegeven op verschillende locaties, waaronder de Footer, Header en Sidebalk, die terugkomen op verschillende pagina’s van je WordPress website.
- Je kunt template-onderdelen maken en bewerken via de interface van de site-editor.
- Template-onderdelen zijn bedoeld voor delen van de site die niet vaak veranderen.
Zo maak je blokpatterns voor thema’s en plugins
Zoals we al eerder zeiden, introduceerde WordPress 6.3 een nieuw systeem voor het beheer van blokpatterns. Het is nu eenvoudiger om gesynchroniseerde of niet gesynchroniseerde blokpatterns te maken zonder de interface van de editor te verlaten. En je kunt bovendien met een paar klikken aangepaste patterns importeren en exporteren vanuit je WordPress dashboard.
Maar WordPress biedt ook andere manieren om blokpatterns te maken voor developers van thema’s en plugins.
Samen met de blokpatronen feature introduceerde WordPress 5.5 een nieuwe API voor developers om “vooraf ontworpen blokken met inhoud te maken die eenvoudig in berichten, pagina’s, aangepaste berichttypen en templates kunnen worden ingevoegd”. De nieuwe API biedt de functies register_block_pattern en register_block_pattern_category om blokpatronen en patrooncategorieën te registreren.
Vanaf WordPress 6.0 kun je ook blokpatronen registreren met een PHP bestand.
Op het moment van dit schrijven heb je dus twee manieren om een blokpatroon aan te maken.
- Met behulp van de
register_block_patternhelperfunctie, - Een PHP bestand toevoegen aan je thema in een map met patronen.
Een blokpatroon maken met een plugin
De eerste methode is vooral bedoeld voor WordPress developers, maar is eenvoudig genoeg om ook door niet-gevorderde developers te worden gebruikt.
Als je voor de eerste methode kiest, kun je een blokpatroon maken met behulp van de twee nieuwe functies register_block_pattern en register_block_pattern_category in het PHP bestand van een plugin of de functions.php van je thema.
Selecteer of registreer een patrooncategorie
Kies eerst een categorie voor je pattern. Met WordPress 6.2 zijn er nieuwe patrooncategorieën toegevoegd en zijn sommige bestaande categorieën aangepast. Op het moment van schrijven kun je de volgende ingebouwde categorieën gebruiken:
- Uitgelicht (
featured) - Berichten (
posts) - Tekst (
text) - Galerij (
gallery) - Oproep tot actie (
call-to-action) - Banners (
banner) - Headers (
header) - Footers (
footer) - Team (
team) - Testimonials (
testimonials) - Diensten (
services) - Portfolio (
portfolio) - Media (
media)
Als je blokpatroon niet in een van de standaardcategorieën valt, kun je ook een nieuwe categorie registreren met de functie register_block_pattern_category.
Deze functie accepteert twee argumenten:
$category_name: Patrooncategorienaam inclusief namespace.$category_properties: Een array van categorie-properties.
Een voorbeeld helpt je beter te begrijpen hoe je een nieuwe patrooncategorie registreert:
if ( function_exists( 'register_block_pattern_category' ) ) {
function my_plugin_register_pattern_category() {
register_block_pattern_category(
'my-pattern-category',
array(
'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),
'description' => __( 'Simple call to action with a header, an image, a paragraph, and a button.' ),
)
);
}
add_action( 'init', 'my_plugin_register_pattern_category' );
}Een blokpatroon registreren
Nadat de patrooncategorie is geregistreerd, is de volgende stap het registreren van het blokpatroon zelf. Je registreert het blokpatroon als volgt met de helperfunctieregister_block_pattern:
function my_plugin_register_block_pattern() {
register_block_pattern( 'prefix/pattern-name', $props );
}
add_action( 'init', 'my_plugin_register_block_pattern' );Deze functie neemt twee argumenten:
$pattern_name: Een voor machines leesbare naam in de vorm vannamespace/pattern-name.$pattern_properties: Een array met properties voor het patroon.
Hier is een lijst van de momenteel beschikbare patroonproperties:
title(verplicht): Een voor mensen leesbare titel voor het patroon.content(verplicht): De HTML opmaak voor het patroon.description: Een tekst die het patroon binnen de inserterapplicatie beschrijft. Een beschrijving is optioneel, maar wordt aanbevolen omdat het gebruikers helpt het pattern te vinden.categories: Een array van een of meer geregistreerde patrooncategorieën. Je moet een categorie registreren voordat je hem hier kunt gebruiken (zie de vorige paragraaf).keywords: Een array van trefwoorden die gebruikers helpen het patroon te vinden.viewportWidth: Een geheel getal dat de breedte van het patroon in de preview aangeeft.blockTypes: Een optionele array van bloktypes die gebruikt worden met het patroon.postTypes: Een array van berichttypen die het patroon mogen gebruiken.templateTypes: Een matrix van templatetypes waar het patroon zinvol is (beschikbaar sinds WordPress 6.2).inserter: Een boolean om te bepalen of het patroon zichtbaar moet zijn in de Block Inserter. Stel de waarde in opfalseom het patroon te verbergen. Standaard worden alle patronen weergegeven in de blokkenkiezer.
Hier is een voorbeeld van het gebruik van register_block_pattern:
if ( function_exists( 'register_block_pattern' ) ) {
function my_plugin_register_block_pattern() {
register_block_pattern(
'my-plugin/my-block-pattern',
array(
'title' => _x( 'My awesome pattern', 'Block pattern title', 'my-plugin-text-domain' ),
'categories' => array( 'my-pattern-category' ),
'postTypes' => array( 'post' ),
'content' => '<!-- wp:paragraph --><p>My awesome block pattern</p><!-- /wp:paragraph -->'
)
);
}
add_action( 'init', 'my_plugin_register_block_pattern' );
}'postTypes' => array( 'product' ),Maak nu een nieuw bericht (of aangepast berichttype), open de Block Inserter en klik op het label Patronen. Je zou een nieuwe patrooncategorie moeten vinden (Mijn patrooncategorie) met je aangepaste blokpatroon. Speel gerust met patrooneigenschappen om je blokpatronen aan te passen.
Laten we nu wat dieper duiken en proberen een echt blokpatroon te maken.
Een praktijkvoorbeeld van een blokpatroon
Stel dat je een blokpatroon wilt maken met een header, een afbeelding, een alinea en een knop.
Maak in de editor de layout voor je blokpatroon, schakel dan over naar de code-editor en kopieer de opmaak.
In ons voorbeeld hebben we de volgende code:
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="http://wordpress-block-patterns.local/wp-content/uploads/2023/05/placeholder.jpg" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong>View Plans</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->Je kunt deze code nu optimaliseren. Als je het blokpatroon met een plugin registreert, moet je de URL van de afbeelding als volgt wijzigen:
esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )Op deze manier zoekt WordPress de afbeelding niet in de uploads, maar in de images map van je plugin.
Je kunt dan de eigenschap viewportWidth gebruiken om een betere preview van het patroon te geven in de Block Inserter:
'viewportWidth' => 800,
Je kunt ook een reeks trefwoorden toevoegen om gebruikers te helpen je blokpatroon te vinden:
'keywords' => array( 'cta', 'demo', 'kinsta' ),
Een andere optie om gebruikers te helpen het blok te vinden in zoekopdrachten is het toevoegen van een array van bloktypes:
'blockTypes' => array( 'core/button' ),Op deze manier zal het blokpatroon verschijnen in suggesties wanneer een gebruiker zoekt naar een van de opgegeven blokken.
Met de property postTypes kun je het blokpatroon alleen beschikbaar maken voor specifieke berichttypen. Je kunt het patroon bijvoorbeeld alleen zichtbaar maken voor het berichttype product:
'postTypes' => array( 'product' ),Tot slot kun je een CSS class toevoegen aan de wrapper van je blokpatroon.
Om dat te doen, moet je een nieuwe group maken met het className attribuut:
<!-- wp:group {"className":"my-css-class","layout":{"type":"constrained"}} -->
<div class="wp-block-group my-css-class">
<!-- Your blocks -->
</div>
<!-- /wp:group -->Merk op dat je dezelfde class naam moet toevoegen aan het volgende div element.
Voor een nadere blik op blokpatronen en meer voorbeelden van code, zie ook Blokpatronen in het WordPress.org Theme Handbook.
Een blokpatroon maken met een bestand
Zoals hierboven vermeld, introduceerde WordPress 6.0 een nieuwe en eenvoudigere manier om blokpatronen toe te voegen aan je WordPress thema’s. Je kunt nu impliciet blokpatronen registreren door ze als PHP bestanden te declaren in een map /patterns in de root van je thema.
Stel dat je impliciet hetzelfde blokpatroon wilt registreren als in de vorige paragraaf in je blokthema. In dit voorbeeld gebruiken we het thema Twenty Twenty-Three.
Je kunt dezelfde parameters instellen als bij de vorige methode, maar ze opnemen in een opmerking in de header van het bestand. Daarnaast zul je in plaats van parameternamen in hoofdletters, de woorden scheiden met een spatie en in plaats van arrays gebruik je door komma’s gescheiden lijstitems.
Deactiveer eerst de plugin die je in het vorige voorbeeld hebt gebruikt om het patroon te registreren. Maak dan een nieuw my-block-pattern.php bestand en voeg de volgende header toe:
<?php
/**
* Title: My awesome pattern
* Slug: twentytwentythree/my-block-pattern
* Post Types: post
* Categories: featured, banner
* Viewport Width: 800
* Keywords: Call to action, Kinsta
* Block Types: core/buttons
*/
?>Vervolgens voeg je de inhoud toe aan je blokpatroon. Je kunt dezelfde opmaak gebruiken als in ons vorige voorbeeld, maar eerst moet je het een beetje veranderen:
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong><?php echo __( 'View plans', 'text-domain' ); ?></strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->De opmaak is in wezen ongewijzigd ten opzichte van het vorige voorbeeld. We hebben slechts twee wijzigingen aangebracht.
De URL van de placeholderafbeelding wordt nu gegenereerd door de functie get_theme_file_uri:
<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>Natuurlijk moet je eerst de placeholder.jpg afbeelding in de map /assets/images van je thema hebben geplaatst.
De volgende instructie genereert de tekst die je wilt vertalen.
<?php echo __( 'View plans', 'text-domain' ); ?>Sla nu je bestand op en maak een nieuw bericht. Je blokpatroon zou moeten verschijnen in de categorieën Featured en Banners.
Ondersteuning verwijderen, uitschrijven en blokpatronen verbergen
In sommige scenario’s wil je speciale acties uitvoeren op blokpatronen. Je wilt bijvoorbeeld een coreblokpatroon vervangen door een eigen blokpatroon of een categorie onder bepaalde voorwaarden uitschrijven. Dit zijn de bewerkingen die je kunt uitvoeren.
1. Ondersteuning voor alle coreblokpatronen verwijderen
Ten eerste kunnen themadevelopers de ondersteuning voor coreblokpatronen verwijderen en hun eigen set patronen aanbieden. Om ondersteuning voor corepatronen te verwijderen, kun je de functieremove_theme_support op deze manier gebruiken:
remove_theme_support( 'core-block-patterns' );Het wordt aanbevolen om de remove_theme_support functie te koppelen aan de after_setup_theme hook.
2. Een los blokpatroon uitschrijven
Je kunt ook een specifiek blokpatroon uitschrijven als je een custom alternatief wilt bieden of als je niet wilt dat het wordt gebruikt met je thema.
De Patronen API biedt daarvoor de functieunregister_block_pattern:
function my_theme_unregister_block_pattern() {
unregister_block_pattern( 'namespace/block-pattern-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );In het geval dat je ook een coreblokpatroon kunt uitschrijven, gebruik je het volgende:
function my_theme_unregister_block_pattern() {
unregister_block_pattern( 'core/query-offset-posts' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );Je gebruikt unregister_block_pattern met de init haak.
3. Een blokpatrooncategorie uitschrijven
Je kunt ook een patrooncategorie uitschrijven door de unregister_block_pattern_category functie in de hook init:
function my_theme_unregister_block_pattern_categories() {
unregister_block_pattern_category( 'pattern-category-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );Blokpatronen maken en delen met de Pattern Creator
Je kunt ook patronen maken en delen met de gemeenschap met een gratis online tool: The Pattern Creator.
Als je een WordPress.org account hebt, kun je de Pattern Creator openen vanuit de Pattern directory.
Daar klik je op Create new pattern. Dit start een patroonspecifieke versie van de Block Editor die je kunt gebruiken om je blokkenpatronen te maken.
Je kunt ook gratis afbeeldingen gebruiken die worden gehost door de Openverse bibliotheek.
Als je tevreden bent met je wijzigingen, kun je het ontwerp opslaan of het patroon opsturen voor revisie.
Je kunt nu teruggaan naar de map Patterns en My patterns selecteren. Daar vind je al je patronen in drie tabbladen: All, Concepts en Pending for review.
Als je klaar bent met je bewerkingen, kun je je patroon delen met de community. Klik hiervoor op de knop Submit rechtsboven in de editor om het patroon in te sturen voor revisie (zorg ervoor dat je de patroonrichtlijnen volgt voordat je je patroon instuurt).
Samenvatting WordPress
WordPress is 20 jaar geworden en de statistieken vertellen ons dat het nog steeds het meest gebruikte CMS ter wereld is, met 63,3% marktaandeel vanaf mei 2023.
Deze cijfers bewijzen dat WordPress een uitstekende publicatietool is die wordt gebruikt door duizenden professionals, developers en eenvoudige bloggers over de hele wereld.
Tijd en middelen besteden aan het verwerven van nieuwe vaardigheden in WordPress ontwikkeling en het leren over geavanceerde features zoals aangepaste blokken en blokpatronen kan een uitstekende investering zijn voor je carrière als marketeer, webdesigner of publisher.
En nu is het aan jou. Heb jij al blokpatronen gemaakt? Heb je er al een gedeeld met de community? We zouden het leuk vinden om je creaties te zien. Laat een reactie achter met een link of je gedachten over blokpatronen.
Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.
In deze code hebben we de property
postTypesgebruikt om de beschikbaarheid van het pattern te beperken tot gewone blogposts. Je hebt echter de flexibiliteit om een andere waarde in te stellen voorpostTypesom het toegankelijk te maken voor verschillende soorten berichten. Als je bijvoorbeeld eenproductberichttype hebt en je wilt de beschikbaarheid van het pattern beperken tot alleen dat specifieke type, dan schrijf je gewoon: