Als je een eigen thema bouwt of met een childthema werkt, moet je misschien bepaalde stylingkenmerken verwijderen of verbergen, of het nu gaat om een los coreblok of een volledige thema-stijlvariatie.
Dit is niet alleen een kwestie van voorkeur. Het levert vaak praktische voordelen op, zoals betere prestaties, een consistenter ontwerp en een eenvoudigere gebruikersinterface.
De aanpak om deze doelen te bereiken varieert en is waarschijnlijk afhankelijk van je behoeften en vaardigheden. Voor de voorbeelden in dit artikel werken we met een childthema van Twenty Twenty-Five (TT5), een modern WordPress blokthema.
Verwijderen hangt af van hoe het is geregistreerd
Voor onze doeleinden maken we, wanneer we het hebben over het ongedaan maken van het registreren van een blok of thema stijlvariatie, onderscheid tussen volledige en gedeeltelijke verwijdering, en of de variatie volledig is verwijderd of slechts verborgen is in de interface. Het onderscheid is belangrijk.
Begrijpen hoe je een blok kunt de-registreren begint met weten hoe het is geregistreerd. Coreblokken die zijn geregistreerd met JavaScript kunnen bijvoorbeeld het beste in die taal worden uitgeschreven. Themastijlvariaties daarentegen zijn geregistreerd met PHP en daarom kan een andere aanpak op zijn plaats zijn.
Het ongedaan maken van custom blokken valt buiten het bestek van dit artikel en je aanpak hangt af van hoe die blokken oorspronkelijk zijn geregistreerd.
Wat is een stijlvariatie?
WordPress maakt onderscheid tussen variaties van blokstijlen en themastijlen. Blokstijlen zijn visuele alternatieven voor een specifiek blok, zoals de “vul” of “omlijn” stijlen van een knopblok. Stijlvariaties van blokken worden geregistreerd in core, theme.json, block.json (of in een plugin).
Thema stijlvariaties daarentegen zijn volledige visuele alternatieven die kleuren, typografie en layouts bevatten die zijn gedefinieerd in een uniek theme.json bestand. Hiermee kunnen gebruikers wisselen tussen verschillende looks (skins) voor een site zonder het thema te veranderen. TT5 wordt geleverd met acht stijlvariaties naast de standaardstijl.
De eerste stap: enqueue je scripts
Omdat we met een childthema werken, moet je ervoor zorgen dat je je scripts op de juiste manier enqueuet.
Deze installatie helpt je op weg, inclusief het enqueuen van ons aangepaste unregister-blocks.js bestand.
// Enqueue Parent and Child Styles
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
['parent-style'],
wp_get_theme()->get('Version')
);
});
// Enqueue styles in the WordPress admin
add_action('admin_enqueue_scripts', function () {
wp_enqueue_style(
'child-admin-style',
get_stylesheet_uri(),
[],
wp_get_theme()->get('Version')
);
});
// Enqueue JavaScript for block editor
add_action('enqueue_block_editor_assets', function () {
wp_enqueue_script(
'unregister-core-blocks',
get_stylesheet_directory_uri() . '/js/unregister-blocks.js',
['wp-blocks', 'wp-dom-ready', 'wp-edit-post'],
null,
true
);
});Zoals je kunt zien, hebben we een JavaScript-bestand op js/unregister-blocks.js, dat al onze scripts voor dit artikel bevat.
Gebruik niet get_template_directory_uri() voor het JavaScript-bestand, want dit verwijst naar het hoofdthema.
Timing is alles
Weten wanneer een hook afgaat is cruciaal bij het werken met PHP in WordPress. Je moet bekend zijn met de basis laadprocedure, die begint op wp-settings.php:
- Constants
- Globals
- Core componenten
- Plugins laden
- Thema laden
Uitzoeken op welk punt een custom functie moet worden uitgevoerd is een van de lastigste en meest frustrerende onderdelen van WordPress ontwikkeling.
Een blokstijl uit de core verwijderen
Laten we eens kijken naar een situatie waarin je de stijl van een coreblok wilt verwijderen. In dit geval willen we de contourstijl voor het Button blok verwijderen.
Omdat de stijlen voor vulling en omlijning van knoppen zijn geregistreerd in het theme.json bestand, gebruiken we JavaScript om het proces af te handelen.
wp.domReady(() => {
if (wp.blocks && wp.blocks.unregisterBlockStyle) {
wp.blocks.unregisterBlockStyle('core/button', 'outline');
}
});Het resultaat is het verwijderen van de contourstijl in de werkbalk en zijbalk.
Een core blok de-registreren
Stel dat je alle blokstijlen voor een blok wilt verwijderen. Een rationelere aanpak is om het blok (of de blokken) te de-registreren. Dit stroomlijnt de Inserter door het verwijderen van blok(ken) waarvan je niet wilt dat gebruikers ze gebruiken en verbetert de prestaties.
Hier wordt het Quote-blok verwijderd.
wp.domReady(() => {
wp.blocks.unregisterBlockType('core/quote');
});Wat gebeurt er als het script wordt uitgevoerd nadat het Quote-blok al is gebruikt? WordPress toont een bericht “Dit blok is niet langer beschikbaar” in de editor, maar de inhoud wordt nog steeds weergegeven op de front-end. Gebruikers kunnen de ruwe HTML-weergave waarnaar het blok terugvalt handmatig bewerken of converteren.
Je kunt het laten zoals het is of omzetten naar HTML om de inhoud en styling te behouden.
Hoe zit het met het verwijderen van meer dan één blok? In dit voorbeeld verwijderen we de blokken Quote en Heading door een foreach-loop uit te voeren om dit op een zeer efficiënte manier te doen.
wp.domReady(() => {
const blocksToRemove = [
'core/quote',
'core/heading',
];
blocksToRemove.forEach((blockName) => {
if (wp.blocks.getBlockType(blockName)) {
wp.blocks.unregisterBlockType(blockName);
}
});
});Dit script maakt het gemakkelijk om andere blokken te verwijderen als dat nodig is.
Een stijlvariatie van een thema verwijderen
Het mooie van stijlvariaties in blokthema’s is dat ze niet geregistreerd hoeven te worden, zoals je in het verleden misschien wel hebt gedaan met andere WordPress extensies.
In plaats daarvan worden ze automatisch herkend door Core door eenvoudigweg een goed opgemaakt theme.json bestand te plaatsen in de root of /styles map van het kinderthema.
Het is gemakkelijk om aan te nemen dat je een functie nodig hebt om stijlvariaties te de-registreren, maar blokthema’s werken anders.
Net als bij blokstijlen is er geen standaard UI om ongewenste stijlvariaties te verwijderen.
Laten we beginnen met de eenvoudigste methoden en van daaruit verder werken. Wat stijlvariaties zo gemakkelijk maakt om te “registreren” of toe te voegen aan een blokthema, is precies wat het erg moeilijk maakt om te “de-registreren”. Daarom hebben we een paar benaderingen.
Een stijlvariatie van een thema verwijderen
Er zijn een paar manieren om de Evening stijlvariatie in een blokthema zoals TT5 te verwijderen.
Als je geen childthema gebruikt, is de meest directe optie het verwijderen van het corresponderende .json bestand uit het parent-thema. Door bijvoorbeeld 01-evening.json uit de map /styles te verwijderen, wordt de Evening variatie helemaal verwijderd.
Dit is echter niet aan te raden, omdat het bestand na de volgende thema-update waarschijnlijk weer terugkomt.
Een betere, veiligere methode is om een childthema te gebruiken en de stijlvariatie te overschrijven. Je kunt dit doen door een leeg bestand aan te maken in hetzelfde pad met dezelfde bestandsnaam. Om 01-evening.json op te heffen, voeg je een leeg bestand toe met de naam 01-evening.json in de map /styles van je kinderthema.
Deze aanpak “de-registreert” de variatie niet echt; het neutraliseert het alleen. WordPress herkent het bestand nog steeds, maar omdat het geen instellingen bevat, wordt de variatie onzichtbaar in de UI en niet meer functioneel. Deze override werkt alleen omdat childthema’s na parent-thema’s worden geladen, dus het is de moeite waard om te controleren of je childthema correct is ingesteld.
Een variatie verbergen met CSS
Een andere workaround is het verbergen van de stijlvariatie van de UI met CSS. Dit verwijdert het niet uit het geheugen of de REST API, en het zal de front-end bloat niet verminderen, maar het zal gebruikers ervan weerhouden om het te selecteren in de Site Editor.
Hier is een voorbeeld om de Evening variatie te verbergen:
/* Hide specific global style variations in the Site Editor */
.edit-site-global-styles-variations_item[data-slug="morning"],
.edit-site-global-styles-variations_item[data-name="evening"],
.edit-site-global-styles-variations_item[title="Evening"],
.edit-site-global-styles-variations_item[aria-label*="Evening"] {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}Dit werkt in het paneel Editor > Styles > Browse styles. Als een gebruiker eerder de Evening variant heeft geactiveerd, wordt deze nog steeds toegepast, maar hij kan deze niet opnieuw selecteren of ernaar overschakelen.
Een variatie verbergen met JavaScript
Je kunt ook JavaScript gebruiken om de variatie te verbergen, geïnjecteerd via PHP met wp_add_inline_script. Dit is een beetje een hack, omdat stijlvariaties worden geregistreerd in PHP, maar het is soms de enige praktische manier om de UI betrouwbaar te manipuleren.
Hier is een werkend voorbeeld:
// Inject JS to hide specific style variations in the Site Editor UI
add_action('enqueue_block_editor_assets', function () {
wp_add_inline_script(
'unregister-core-blocks',
<< {
const interval = setInterval(() => {
document.querySelectorAll(
'[aria-label*="Noon"], [title*="Evening"], [data-name="noon"], [data-slug="evening"]'
).forEach(el => {
el.style.display = 'none';
});
}, 500);
// Stop the interval after 5 seconds
setTimeout(() => clearInterval(interval), 5000);
});
JS
);
});Dit script wacht tot de DOM is geladen, scant dan herhaaldelijk naar de variatie en verbergt deze gedurende een paar seconden. Het is fragiel (omdat het afhankelijk is van timing en classnamen), maar het werkt als je specifieke variaties moet onderdrukken zonder het bestandssysteem aan te raken.
Samenvatting
Je site schoon en vrij van ongebruikte elementen houden verbetert de gebruikerservaring en, in veel gevallen, de prestaties van de site.
Onze voorbeelden hier bieden een goede aanpak voor het uitschrijven van stijlvariaties. We hopen dat ze ook inzicht geven in waarom het ongedaan maken van stijlvariaties verwarrend kan zijn.
Op zoek naar snelle, betrouwbare WordPress hosting terwijl je eigen thema’s bouwt en test? Kinsta biedt ontwikkelaarvriendelijke features, testomgevingen en een voor prestaties geoptimaliseerde infrastructuur om je workflow van lokale ontwikkeling tot productie te ondersteunen.
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.
