Zoals bij de meeste softwareontwikkeling, hoef je niet bij nul te beginnen om iets te maken dat waardevol is voor je klanten of voor jezelf.
Dit geldt vooral voor WordPress blokthema’s. De Create Block Theme plugin, beschikbaar in de WordPress plugins repository, biedt een eenvoudige manier om een nieuw blokthema te maken – of dit nu is afgeleid van een actief thema of dat je begint met een leeg canvas.
Deze plugin maakt gebruik van de mogelijkheden van de WordPress Site Editor om thema’s te bouwen, wat het een krachtig hulpmiddel maakt voor ontwikkelaars van thema’s. Maar omdat het permanente wijzigingen in je site kan aanbrengen, raden we je sterk aan om het in een testomgeving te gebruiken. Als je een Kinsta-gebruiker bent, is het opzetten van een testomgeving voor je site snel en probleemloos.
Zoals verwacht is deze plugin alleen compatibel met blokthema’s en werkt hij niet voor klassieke thema’s. In dit artikel verkennen we de functies van de Create Block Theme plugin en leggen we uit hoe je deze kunt gebruiken.
Hoe te werken met de plugin Create Block Theme
De Create Block Theme plugin biedt twee manieren om toegang te krijgen tot de features, afhankelijk van je voorkeur en workflow:
Je kunt de instellingen van de plugin openen via Appearance > Create Block Theme in het WordPress Admin dashboard.
Hier vind je een lijst met opties, waaronder het opslaan van wijzigingen in het huidige thema, het maken van nieuwe thema’s of het exporteren van thema’s. Hoewel deze methode rechttoe rechtaan is, is de functionaliteit beperkt in vergelijking met de Site Editor.
Voor de beste ervaring raden we aan om de plugin te gebruiken in de WordPress Site Editor. Door het moersleutel icoon in de Site Editor te selecteren, kun je alle functies van de features direct openen in een live bewerkingsomgeving. Dankzij deze integratie kun je je wijzigingen naadloos bekijken en aanpassen.
De features van de Create Block Theme plugin verkennen
De Create Block Theme plugin biedt een robuuste set features om je te helpen blokthema’s efficiënt te bouwen, aan te passen en te exporteren. Laten we elke feature in detail bekijken:
1. Wijzigingen in een thema opslaan
Het concept en de uitvoering zijn heel eenvoudig. Wijzig in de Site Editor je stijlen, templates en patterns in het actieve thema en sla je werk op.
De knop Save Changes is bedoeld om op te slaan wat je wilt exporteren, niet de themawijzigingen die je hebt aangebracht, die kun je alleen opslaan met de standaard knop Save. Opgeslagen wijzigingen kunnen altijd worden teruggedraaid met de revisietool van WordPress (zonder dat je de plugin nodig hebt).
Zoals hierboven te zien is, heb je acht opties om te overwegen als je het thema wilt exporteren:
- Lettertypen opslaan
- Wijzigingen template opslaan
- Alleen gewijzigde templates verwerken
- Gesynchroniseerde patterns opslaan
- Tekst lokaliseren
- Afbeeldingen lokaliseren
- Navigatie verwijzingen verwijderen
2. Een themavariatie maken
Hoewel het op het eerste gezicht misschien niet voor de hand ligt, kun je met deze optie niet alleen een stijlvariatie maken, maar ook een nieuw kleurenpalet en/of een typeset (een verzameling lettertypen die je kunt toepassen op tekst, links, koppen, bijschriften en knoppen).
In het onderstaande voorbeeld hebben we een stijl “My New Variation” gemaakt. Om dit te doen, moet je op zijn minst een nieuw kleurenpalet en lettertype maken die worden gekoppeld aan de nieuwe stijlvariatie. Houd er rekening mee dat je hier alleen de nieuwe variatie ziet (zonder wijzigingen in de standaard kleurenpaletten en typesets).
In het onderstaande voorbeeld hebben we een nieuw kleurenpalet gemaakt met twee kleuren die kunnen worden toegepast op elke stijlvariatie. De linkerkant laat de creatie zien van twee custom kleuren voor het nieuwe kleurenpalet. Het midden toont het opslaan. De rechterkant bevestigt het nieuwe aangepaste kleurenpalet.
Tot slot hebben we hier een nieuwe typeset gemaakt. Een nieuw lettertype, Roboto, wordt toegevoegd en vervolgens toegewezen aan de tekst- en kopteksten (niet weergegeven).
De rechterkant geeft de lettertypes aan die worden gebruikt voor de nieuwe typeset, het midden toont het opslaan en de rechterkant bevestigt de nieuwe typeset.
Je kunt niet alleen een complete stijlvariatie maken, maar ook een apart kleurenpalet en/of zetwerk, dat je op elke gewenste manier op je thema kunt toepassen
3. Een leeg thema maken
Als je wilt beginnen met een schoon, design-agnostisch thema, dan is de optie Create Blank Theme de beste manier. Het doel is vergelijkbaar met het Underscores thema, dat populair was bij ontwikkelaars tijdens het Classic tijdperk van WordPress thematisering.
Het maken van een blokthema genereert een basis boilerplate thema. Zoals verwacht zal een leeg thema:
- Alleen een indexstemplate bevatten.
- Geen stijlvariaties hebben.
- Een enkel header en footer template part bevatten.
- Een minimalistisch
theme.jsonbestand bevatten. - Exclusief een
functions.phpbestand.
In tegenstelling tot de opties Nieuw thema maken of Stijlvariaties maken, bouw je met deze optie een geheel nieuw thema, wat duidelijk wordt zodra je de pagina Uiterlijk ziet.
4. Thema exporteren als zip
Dit is een handige feature van de plugin, omdat het de meest efficiënte manier is om je actieve thema te migreren naar een nieuwe site. De exportfunctie maakt een standaard zipbestand van het thema dat je voor een andere site kunt gebruiken.
Wat is het verschil tussen het exporteren van een thema op deze manier en de exportfeature die is ingebouwd in WordPress? Geen enkel. Dit is gewoon een handige manier om het actieve thema te exporteren.
Als je niet bekend bent met de ingebouwde methode om een actief thema te exporteren, selecteer dan de optie met drie puntjes in de rechterbovenhoek en zoek de optie Export.
5. Een nieuw thema maken
Laten we eens kijken naar de twee benaderingen die de plugin biedt om een nieuw thema te maken. Net als bij het lege thema, verschijnen thema’s die met deze optie zijn gemaakt ook op de pagina Appearance > Themes en worden ze na het maken automatisch het actieve thema.
Welke optie je ook kiest – Clone Theme of Create Child Theme – je krijgt dezelfde keuzes als bij het lege thema.
Thema klonen
Een thema klonen maakt een duplicaat van de opgeslagen wijzigingen in het actieve thema. Zodra je de naam van het kloonthema hebt gekozen, kun je als volgt metagegevens voor het thema instellen:
- Naam thema
- Beschrijving van het thema
- Thema URI
- Auteur
- URI auteur
- Minimale versie WordPress
Child thema maken
Het maken van een child thema biedt ontwikkelaars de juiste manier om wijzigingen aan te brengen in een thema zonder de code ervan te wijzigen.
Je keuzes voor metadata zijn dezelfde als bij het maken van een kloon-thema.
6. Metagegevens thema bewerken
Je kunt de metagegevens van je actieve thema direct via de plugin aanpassen. Metagegevensvelden die je kunt bijwerken zijn onder andere:
- Themanaam: De naam die wordt weergegeven in de WordPress themamanager.
- Thembeschrijving: Een korte beschrijving van het doel of de functies van je thema.
- Thema URI: Een URL die verwijst naar de documentatie of demo van het thema.
- Auteur: De naam van de maker van het thema.
- Themaversie: Het versienummer van het thema.
- Minimale WordPress versie: De vroegste WordPress versie die compatibel is met het thema.
- Thematags: Trefwoorden om je thema te categoriseren en te beschrijven.
- Aanbevolen plugins: Plugins waar je thema van afhankelijk is of die het verbetert.
- Credits lettertype: Erkenningen voor lettertypen die in je thema zijn gebruikt.
- Credits afbeeldingen: Erkenningen voor afbeeldingen die in je thema zijn gebruikt.
- Screenshot: De voorbeeldafbeelding die wordt weergegeven in de WordPress themamanager.
Deze velden zijn essentieel om je thema professioneel te maken en klaar voor distributie.
7. theme.json bekijken
Als je een snelle blik wilt werpen op je theme.json bestand, dan biedt de plugin een read-only view van het theme.json bestand van je thema. Dit bestand bevat de globale stijlen en instellingen voor je thema, zoals kleuren, typografie en layoutconfiguraties.
Door dit bestand te bekijken kun je snel de aanpassingen controleren die op je thema zijn toegepast.
8. Custom stijlen bekijken
Voor child blokthema’s bevat het bestand theme.json aanpassingen die geen invloed hebben op het parent thema. Dit zorgt ervoor dat het parent thema onaangeroerd blijft terwijl je specifieke wijzigingen doorvoert in het child thema.
De interface voor het bekijken van deze aangepaste stijlen is dezelfde als die voor het bestand theme.json van het parent thema.
9. Thema terugzetten
Met deze optie kun je wijzigingen in je thema, inclusief stijlen, templates en template parts terugdraaien naar de staat waarin ze zich bevonden bij de laatste keer opslaan.
Voor een meer robuuste aanpak kun je de WordPress Revisions feaure gebruiken. Deze ingebouwde feature biedt een gedetailleerde geschiedenis van je wijzigingen, zodat je je thema nauwkeurig kunt terugzetten naar een vorige staat.
Samenvatting
Als je begint met het ontwikkelen van een eigen blokthema, dan is de Create Block Theme plugin een ideaal hulpmiddel. Het maakt gebruik van alle mogelijkheden van WordPress als tool voor het bouwen van thema’s, waardoor je thema sneller wordt.
Terwijl je met de plugin werkt, ontvang je browser waarschuwingen om je te helpen begrijpen welke stappen je gaat nemen.
In wezen zorgt deze plugin voor een gegevensoverdracht van database naar bestandssysteem. Als je wijzigingen aanbrengt in een thema, worden die wijzigingen opgeslagen in de database. Deze plugin haalt die wijzigingen uit de database en maakt de bestanden die nodig zijn voor een nieuw thema en/of voor een export indien nodig.
Omdat deze plugin nog volop in ontwikkeling is, kun je verbeteringen verwachten, maar wees op je hoede voor mogelijke wijzigingen. Gebruik bij het testen van een bepaalde feature altijd een testomgeving. Bij Kinsta bieden we tools die het voor makers en ontwikkelaars van thema’s gemakkelijk maken om met WordPress te werken.
Probeer Kinsta vandaag nog uit en ontdek hoe we je kunnen helpen om fantastische WordPress thema’s te maken!
Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.
