Wenn du ein benutzerdefiniertes Theme erstellst oder mit einem Child-Theme arbeitest, kann es sein, dass du bestimmte Styling-Funktionen entfernen oder ausblenden musst, sei es für einen einzelnen Core-Block oder eine komplette Style-Variation des Themes.
Das ist nicht nur eine Frage der Vorliebe. Es bringt oft praktische Vorteile mit sich, z. B. eine bessere Leistung, ein einheitlicheres Design und eine einfachere Benutzeroberfläche.
Die Ansätze zum Erreichen dieser Ziele sind unterschiedlich und hängen wahrscheinlich von deinen Bedürfnissen und deinen Fähigkeiten ab. Für die Beispiele in diesem Artikel arbeiten wir mit einem Child-Theme von Twenty Twenty-Five (TT5), einem modernen WordPress-Block-Theme.
Die Aufhebung der Registrierung hängt davon ab, wie sie registriert wurde
Wenn wir von der Aufhebung der Registrierung einer Block- oder Theme-Stilvariation sprechen, unterscheiden wir zwischen vollständiger und teilweiser Entfernung und ob die Variante vollständig entfernt oder nur aus der Benutzeroberfläche ausgeblendet wird. Diese Unterscheidungen sind wichtig.
Um zu verstehen, wie man einen Block abmeldet, muss man zunächst wissen, wie er angemeldet wurde. Core-Blöcke, die mit JavaScript registriert wurden, werden am besten in dieser Sprache gelöscht. Theme-Stilvariationen hingegen werden mit PHP registriert, weshalb eine andere Vorgehensweise angebracht sein kann.
Die Aufhebung der Registrierung von benutzerdefinierten Blöcken liegt außerhalb des Rahmens dieses Artikels und deine Vorgehensweise hängt davon ab, wie diese Blöcke ursprünglich registriert wurden.
Was ist eine Stilvariation?
WordPress unterscheidet zwischen Blockstilen und Theme-Stilvariationen. Blockstile sind visuelle Variationen für einen bestimmten Block, z. B. die Stile „Füllen“ oder „Umriss“ eines Schaltflächenblocks. Blockstilvariationen werden im Core, theme.json, block.json (oder in einem Plugin) registriert.
Theme-Stilvariationen hingegen sind komplette visuelle Variationen, die Farben, Typografie und Layouts umfassen und in einer eigenen theme.json-Datei definiert sind. Sie ermöglichen es den Nutzern, zwischen verschiedenen Looks (Skins) für eine Website zu wechseln, ohne das Theme zu ändern. TT5 wird mit acht Stilvarianten zusätzlich zum Standardstil geliefert.
Der erste Schritt: Skripte in die Warteschlange stellen
Da wir mit einem Child-Theme arbeiten, musst du darauf achten, dass du deine Skripte richtig einreihst.
Mit diesem Setup kannst du loslegen, einschließlich der Einreihung unserer benutzerdefinierten unregister-blocks.js-Datei.
// 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
);
});Wie du sehen kannst, haben wir eine JavaScript-Datei unter js/unregister-blocks.js, die alle unsere Skripte für diesen Artikel enthält.
Verwende nicht get_template_directory_uri() für die JavaScript-Datei, da diese auf das übergeordnete Theme verweist.
Timing ist alles
Zu wissen, wann ein Hook ausgelöst wird, ist bei der Arbeit mit PHP in WordPress entscheidend. Du solltest mit der grundlegenden Ladesequenz vertraut sein, die in wp-settings.php beginnt:
- Konstanten
- Globals
- Kernkomponenten
- Plugins laden
- Das Theme laden
Den richtigen Zeitpunkt für die Ausführung einer benutzerdefinierten Funktion herauszufinden, ist einer der schwierigsten und frustrierendsten Teile der WordPress-Entwicklung.
Aufheben der Registrierung eines Core-Blockstils
Betrachten wir eine Situation, in der du den Stil eines Core-Blocks entfernen möchtest. In diesem Fall wollen wir den Umrissstil für den Schaltflächenblock entfernen.
Da die Stile für die Füllung und den Umriss der Schaltflächen in der TT5 theme.json-Datei registriert sind, verwenden wir JavaScript, um den Vorgang durchzuführen.
wp.domReady(() => {
if (wp.blocks && wp.blocks.unregisterBlockStyle) {
wp.blocks.unregisterBlockStyle('core/button', 'outline');
}
});Das Ergebnis ist, dass der Umrissstil in der Symbolleiste und der Seitenleiste entfernt wird.
Aufheben der Registrierung eines Kernblocks
Angenommen, du möchtest alle Blockstile für einen Block entfernen. Ein vernünftigerer Ansatz ist es, den Block (oder die Blöcke) stattdessen zu deregistrieren. Dadurch wird der Inserter rationalisiert, indem du die Blöcke entfernst, die die Benutzer nicht verwenden sollen, und die Leistung verbessert.
Hier wird der Quote-Block entfernt.
wp.domReady(() => {
wp.blocks.unregisterBlockType('core/quote');
});Was passiert, wenn das Skript ausgeführt wird, nachdem der Quote-Block bereits verwendet wurde? WordPress zeigt im Editor die Meldung „Dieser Block ist nicht mehr verfügbar“ an, aber der Inhalt wird weiterhin im Frontend angezeigt. Die Benutzer können die Roh-HTML-Ansicht, auf die der Block zurückfällt, manuell bearbeiten oder umwandeln.
Du kannst den Block entweder so lassen, wie er ist, oder ihn in HTML umwandeln, um den Inhalt und das Styling beizubehalten.
Was ist mit dem Entfernen von mehr als einem Block? In diesem Beispiel werden die Blöcke „Quote“ und „Heading“ durch eine foreach-Schleife entfernt, was eine sehr effiziente Methode ist.
wp.domReady(() => {
const blocksToRemove = [
'core/quote',
'core/heading',
];
blocksToRemove.forEach((blockName) => {
if (wp.blocks.getBlockType(blockName)) {
wp.blocks.unregisterBlockType(blockName);
}
});
});Mit diesem Skript ist es ganz einfach, andere Blöcke bei Bedarf zu entfernen.
Aufheben der Registrierung einer Stilvariation des Themes
Das Schöne an Stilvariationen in Blockthemes ist, dass sie nicht registriert werden müssen, wie du es vielleicht bei anderen WordPress-Erweiterungen getan hast.
Stattdessen werden sie von Core automatisch erkannt, indem du einfach eine richtig formatierte theme.json-Datei im Stamm- oder /styles Verzeichnis des Child-Themes platzierst.
Es ist leicht anzunehmen, dass du eine Funktion brauchst, um Style-Variationen zu deregistrieren, aber Block-Themes funktionieren anders.
Wie bei den Blockstilen gibt es auch hier keine Standard-UI, um unerwünschte Stilvariationen zu entfernen.
Beginnen wir mit den einfachsten Methoden und arbeiten uns von dort aus vor. Das was es so einfach macht, Stilvariationen zu „registrieren“ oder zu einem Blocktheme hinzuzufügen, macht es auch sehr schwierig, sie wieder zu „deregistrieren“. Daher gibt es mehrere Möglichkeiten.
Aufheben einer Stilvariation eines Themes
Es gibt einige Möglichkeiten, die Evening-Stilvariation in einem Blocktheme wie TT5 zu entfernen.
Wenn du kein Child-Theme verwendest, ist die direkteste Möglichkeit, die entsprechende .json-Datei aus dem Parent-Theme zu löschen. Wenn du zum Beispiel 01-evening.json aus dem Verzeichnis /styles löschst, wird die Evening-Variation vollständig entfernt.
Das ist jedoch nicht empfehlenswert, da die Datei nach dem nächsten Theme-Update wahrscheinlich wieder auftaucht.
Eine bessere und sicherere Methode ist es, ein Child-Theme zu verwenden und die Stilvariation zu überschreiben. Dazu erstellst du eine leere Datei im gleichen Pfad mit dem gleichen Dateinamen. Um 01-evening.json zu überschreiben, füge eine leere Datei mit dem Namen 01-evening.json in das Verzeichnis /styles deines Child-Themes ein.
Diese Vorgehensweise hebt die Registrierung der Variation nicht wirklich auf, sondern neutralisiert sie nur. WordPress erkennt die Datei zwar immer noch, aber da sie keine Einstellungen enthält, ist die Variation in der Benutzeroberfläche unsichtbar und nicht funktionsfähig. Diese Umgehung funktioniert nur, weil Child-Themes nach den Parent-Themes geladen werden. Es lohnt sich also zu überprüfen, ob dein Child-Theme richtig eingerichtet ist.
Ausblenden einer Variation mit CSS
Eine andere Möglichkeit besteht darin, die Stilvariation mit CSS aus der Benutzeroberfläche auszublenden. Dadurch wird die Variation zwar nicht aus dem Speicher oder der REST-API entfernt und das Frontend wird nicht aufgebläht, aber die Benutzer können sie nicht mehr im Site Editor auswählen.
Hier ist ein Beispiel für das Ausblenden der Abendvariation:
/* 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;
}Dies funktioniert im Bereich Editor > Stile > Stile durchsuchen. Wenn ein Nutzer die Abend-Variation zuvor aktiviert hat, wird sie weiterhin angewendet, aber er kann sie nicht erneut auswählen oder zu ihr wechseln.
Ausblenden einer Variation mit JavaScript
Du kannst auch JavaScript verwenden, um die Variation auszublenden, und zwar über PHP mit wp_add_inline_script. Das ist zwar etwas umständlich, da Stilvariationen in PHP registriert werden, aber manchmal ist es die einzige Möglichkeit, die Benutzeroberfläche zuverlässig zu manipulieren.
Hier ist ein funktionierendes Beispiel:
// 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
);
});Dieses Skript wartet darauf, dass das DOM geladen wird, und sucht dann wiederholt nach der Variation und blendet sie für ein paar Sekunden aus. Es ist anfällig (weil es vom Timing und den Klassennamen abhängt), aber es funktioniert, wenn du bestimmte Variationen unterdrücken musst, ohne das Dateisystem zu berühren.
Zusammenfassung
Wenn du deine Website sauber und frei von ungenutzten Elementen hältst, verbessert sich das Nutzererlebnis und in vielen Fällen auch die Leistung der Website.
Unsere Beispiele bieten solide Ansätze, um die Registrierung von Stilvariationen aufzuheben. Wir hoffen, dass sie auch Aufschluss darüber geben, warum die Aufhebung der Registrierung verwirrend sein kann.
Du suchst ein schnelles, zuverlässiges WordPress-Hosting, während du eigene Themes erstellst und testest? Kinsta bietet entwicklerfreundliche Funktionen, Staging-Umgebungen und eine leistungsoptimierte Infrastruktur, um deinen Workflow von der lokalen Entwicklung bis zur Produktion zu unterstützen.
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.
