WordPress 7.0 – blaues Admin Redesign, KI Integration und Icon Block im Praxistest😍
Veröffentlicht:
Aktualisiert:
WordPress 7.0 ist inzwischen erschienen und bringt einige interessante Neuerungen mit. Ich habe mir das neue blaue Admin-Design, die KI-Integration und den Icon Block genauer angesehen. Was davon im Alltag wirklich überzeugt und wo WordPress noch Luft nach oben hat, zeige ich in diesem Praxistest.
Plus: Alle Infos zu den Sicherheits Releases von WordPress 7.0 !
Es gab nach der Veröffentlichung von WordPress 7.0 schon ziemliche Dramas mit der Sicherheit und dementsprechend viele Patches 😅😅
WordPress 7.0 Minor Releases :
Diese WordPress Version hat es in sich:
7.0.1
7.0.2
7.0.3
und jetzt schon
7.0.4
Wobei hier wirklich heftige Sicherheitslücken dabei waren:
WordPress 7.0.1:
WordPress 7.0.1 wurde am 9. Juli 2026 veröffentlicht, enthielt jedoch die verheerende Sicherheitslücke noch!
Es handelte sich dabei um ein reines Wartungs-Update (Maintenance Release). Es sollte primär die Fehler der großen Hauptversion 7.0 ausbügeln, wurde aber kurz darauf selbst zum Hauptziel der Hacker
Warum WordPress 7.0.1 dich nicht geschützt hat
Reines Bugfix-Release: Die Version brachte 31 reine Fehlerbehebungen für den Core und den Gutenberg-Editor. Es optimierte beispielsweise die Stabilität des Admin-Dashboards und brachte Kompatibilität für PHP 8.5.
Keine echten Security-Fixes: Es wurde lediglich ein kleinerer Fehler in der Sicherheitsfunktion wp_kses() korrigiert, der fehlerhafte HTML-Attribute erzeugte.
Das Einfallstor blieb offen: Die kritischen Lücken (wie die „wp2shell“-RCE) waren in WordPress 7.0.1 vollständig aktiv und ungepatcht.
Das Timing-Problem im Juli 2026
Das fatale Zusammenspiel der Releases erklärt, warum so viele Seiten (schätzungsweise Millionen weltweit) überrumpelt wurden:
09. Juli: WordPress bringt 7.0.1 heraus, um Fehler zu korrigieren. Viele Admins dachten, sie seien nun auf dem neuesten, sicheren Stand.
17. Juli (Nur 8 Tage später): Die massive „wp2shell“-Lücke fliegt auf und wird bereits aktiv von Hackern ausnutzt.
Die Reaktion: WordPress muss im Eiltempo 7.0.2 nachschieben, um genau diese Lücke zu schließen. Wer also bei 7.0.1 stehen blieb, wurde sofort gehackt.
Staging Seiten betroffen
Ehrlich gesagt, mich hat es auch erwischt. Es waren zwar nur zwei Staging Seiten, aber trotzdem. Ich wurde von hetzner informiert, das meine Seiten kompromitiert waren.
Allerdings haben sie gesagt, die Fehler, die sie gefunden hatten, waren womöglich nicht alle. Ich solle es bereinigen.
Was war eigentlich so dramatisch an diesem wp2shell ?
Das Drama war, das diesmal nicht schlechte Passwörter die Ursache waren sondern das die Hacker einfach “ über die Hintertür „ reingekommen sind. Sie brauchten gar keine Passwörter.
Zunächst habe ich alles bereinigt, was mir Hetzner emfpohlen hatte, bezw. was sie gefunden hatten.
Das waren einfach fremde Dateien im Root Ordner.
Selber gefunden hatte ich dann noch zwei neue Admins die angelegt wurden.
Ich habe es zuerst mit Wordfence Security versucht. Das war aber nicht das Richtige für mich. Letztlich habe ich beide Staging Seiten komplett gelöscht.
Die Sicherheits-Patches für WordPress 7.0 im Überblick
Version
Veröffentlichung
Behobene Lücken
Hauptwirkung des Patches
7.0.2
17. Juli 2026
2 kritische Lücken (u.a. wp2shell)
Stoppt unbefugte Remote-Code-Ausführung (RCE) und SQL-Injektionen.
7.0.3
06. August 2026
12 Sicherheitslücken
Schließt ein gefährliches XSS-Leck im Login-Bildschirm (verhindert Einschleusen von PHP-Code).
7.0.4
12. August 2026
1 kritische Lücke
Verhindert RCE durch manipulierte Dateiuploads (bei Nutzung von Imagick/Ghostscript).
💡 Was du jetzt tun solltest: Wenn du gerade dabei bist, deine gehackte Seite zu bereinigen, stelle unbedingt sicher, dass du sofort auf WordPress 7.0.4 updatest.
WordPress 7.0 +WordPress 7.1
Ich möchte gleich zu Anfang sagen, ich bearbeite die beiden Releases fast synchron. Mit dem 7.0 war ich zu spät und habe unterdessen schon die WordPress Major Version 7.1 getestet.
Allerdings war das erste WordPress Major Update 7.0 so wichtig und beide sind fast übergreifend, somit kann man sie ruhig zusammen anzeigen. 😅
WordPress hat mit der Version 7.0 „Armstrong“ einen historischen Meilenstein erreicht. Nach einer kurzen Verzögerung im Frühjahr (um die Stabilität zu sichern) ist das Core-Update nun live.
Es ist das erste große Major-Release im Jahr 2026 und legt das Fundament für native KI-Integration und modernere Admin-Strukturen.
Hier kommen die echten Neuerungen, die sich kurz vor dem Release noch verschoben haben:
Native KI-Infrastruktur (WP AI Client & Connectors API): Das ist die wichtigste Story von Version 7.0. WordPress bietet nun eine standardisierte Schnittstelle im Core, um KI-Dienste wie OpenAI, Google Gemini oder Anthropic direkt anzubinden. Plugins müssen dadurch keine eigenen API-Verbindungen mehr bauen.
Um die KI-Infrastruktur in WordPress 7.0 zu verstehen, muss man wissen: WordPress liefert die KI nicht selbst mit, sondern baut nur die Brücke (den „Connectors Screen“) dafür.
1 – Was ist der Connectors Screen?
Connectors Screen ( Konnektoren ) öffnen
Der Connectors Screen ist in WordPress einfach nur eine eigene neue Seite, die sich öffnet. Sie sorgt dafür, dass deine Website überhaupt sicher mit externen KI-Riesen wie OpenAI (ChatGPT), Google Gemini oder Anthropic (Claude) sprechen kann.
2 – Connectors Screen öffnen:
Logge dich in dein WordPress-Backend ein.
Klicke im linken Hauptmenü auf > Einstellungen.
Dort siehst du den neuen Unterpunkt > Konnektoren
Wenn du darauf klickst, öffnet sich eine saubere, moderne Übersichtsseite.
Auf dem Connectors Screen sind drei KI Anbieter bereits vorinstalliert:
OpenAI (ChatGPT),
Google Gemini
Anthropic (Claude)
3 – Google Gemini Setup – Anleitung
Damit man verbunden wird, brauchst du einen API Key . Als nächstes klicke ich Bei Google AI auf > Setup Button. Es öffnet sich unteres Fenster, wo man nun den API Key einfügen soll.
Klicke auf den Link: aistudio.google.com, oder den obigen
💡 Google KI Gemini ist übrigens die einzige KI , die du kostenlos als Entwickler und Unternehmer mit API Key einrichten kannst. Allerdings wie üblich bei Google zahlst du mit deinen Daten. 😅
Auf aistudio.google.com kannst du nun deinen API Key erstellen.
Details zum API-Schlüssel
API-Schlüssel
Dieser Schlüssel besteht aus:
Dem Schlüssel selber
Name
Projektname
Projektnummer
Wähle einfach Default Gemini Project und klick auf > Schlüssel erstellen. Diesen Schlüssel gebe dann in dem Connectors Screen ein.
Google Ki ist nun verbunden / Connected ist grün
Danach bist du verbunden.
Google Gemini kostenlos – stimmt so nicht
Tipp: 👉 Real brauchst du auf jeden Fall ein kostenpflichtiges Abo, egal welchen KI Anbieter du verwendest. Das mit Google kostenlos stimmt so nicht wirklich. Egal welches Model, es kommt untere Fehlermeldung. Aber: es reicht zumindest , du bekommst den API Key und für eine Vorstellung, wie das in WordPress 7.0 funktioniert, reicht es .
Google has recently made major updates to the Gemini API quotas, eliminating free tier access for several models. If you encounter a “Limit is 0” error, it signifies that these specific models no longer offer a free daily quota through the Gemini API.
To resolve this, please consider the following options:
Switch to a paid account (enable billing) to unlock the required quota.
Try using the Gemini 2.5 Flash model, which may still provide a limited free tier.
Beim ersten Versuch ein KI generiertes Bild in WordPress Block Editor mit WordPress 7.0 zu erstellen kam ,eine Fehlermeldung das ich ein kostenpflichtiges Abo bräuchte.
Auf jeden Fall haben wir bis jetzt zumindest einen Ki Anbieter über den Connectores Screen connected. 👍
4 – Auslesen des unverschlüsselten API aus der Datenbank unter wp_options
Ein ziemlicher Fauxpas ist hier den Machern von WordPress 7.0 passiert. Und das sogar bewusst und willentlich.
Man möchte es nicht glauben aberder API Key ist unverschlüsselt in der Datenbank unter wp_options auszulesen. Siehe Beitrag unten.
Im Ticket 64789, sucht man auch nach einer Lösung, die man dann mit WordPress 7.1 nachreichen wird.
Core Committer Weston Ruter erklärte im GitHub-Ticket, dass man zumindest die Klartext-Anzeige auf der Seite wp-admin/options.php zügig anpassen sollte, damit die Schlüssel dort nicht sofort für jeden sichtbar sind. Da eine tiefere Integration und echte Verschlüsselung in der Datenbank aber Zeit brauchen, wurde dieser Teil im Entwickler-Team erst einmal für die kommende Version 7.1 eingeplant.
5 – AI Plugin von WordPress
Als nächsten Schritt brauchen wir das AI Plugin von WordPress.
✨ – WordPress AI Plugin installieren
Installiere da AI Plugin von WordPress und aktiviere es.
Unter > Einstellungen hast du jetzt einen Menüpunkt AI
Du hast jetzt viele Buttons, die du anklicken kannst, je nachdem, was du benögitgst.
Excerpt Generation
Alt Text Genration
Meta Description Generation
Editorila Notes
Content Summarisation
Titel Generation
Image Generation – im Bild nicht angeklickt, solltest du aber 😂
Auch die Experimente kannst du anklicken.
Das AI Plugin ist von dem Machern von WordPress selber. Das heisst dieses wird ständig weiterentwickelt. Im Augenblick kannst du mit diesem Plugin nur obige Features über den Block Editor abrufen.
☝️Achtung: Du kannst keine Prompts erstellen mit dem AIPlugin.
Es wird allerdings ständig weiterentwickelt. Das ist jetzt einmal der Anfang.
6 – Die System-Architektur: Was passiert hier im Hintergrund?
Kurz gesagt: WordPress 7.0 baut eine standardisierte Schnittstelle für KI-Modelle direkt in das CMS-System ein.
Bisher musste jedes Plugin (wie Yoast, Jetpack oder Elementor) eine eigene Verbindung zu OpenAI, Anthropic oder lokalen Modellen programmieren. Jeder hat das Rad neu erfunden. Jetzt baut WordPress eine einheitliche Infrastruktur im Core.
Der AI-Client (Die Infrastruktur im Core): Das ist eine neue, native PHP-Klasse im WordPress-Core. Sie fungiert als universeller Adapter (ein Wrapper) für generative KI-Modelle. Sie sendet Prompts an externe APIs und nimmt die Antworten entgegen. Wichtig: Er tut von alleine absolut nichts. Er stellt nur die Funktionen (wp_ai_generate_text() etc.) bereit.
Die Abilities API: Das ist die semantische Schicht darüber. Sie definiert, was die KI tun kann („Fähigkeiten“) . Anstatt dass ein Plugin direkt sagt: „Schicke diesen Prompt an GPT-4“, registriert das Plugin eine „Ability“ (z. B. generate_alt_text). WordPress matcht das dann mit dem konfigurierten KI-Modell .
Client-Side Abilities (JavaScript): Das ist die Brücke in den Gutenberg-Editor. Es bringt die KI-Fähigkeiten direkt als JavaScript-Paket in den Browser . Dadurch können Entwickler KI-Funktionen direkt in die Befehlspalette (Command Palette) von Gutenberg einbetten, ohne für jeden Klick einen eigenen REST-Call schreiben zu müssen.
Das AI-Plugin: Das ist die Benutzeroberfläche (UI). Da der Core sauber bleiben soll, liefert WordPress die eigentlichen Buttons (wie „Bild generieren“ oder „Text umschreiben“) über ein offizielles Feature-Plugin aus.
7- KI generierter Alt Text und Image
KI generierter Alt Text
Hier als Beispiel möchte ich nur zeigen, wie man im WordPress Block Editor – nach Aktivierung des AI Plugins und Aktivierung des Features Alt Text Generation einen Alt Text erstellen kann.
Rechts im Bild / Sidebar steht der schon mit KI generierte Alt Text. Den kann ich annehmen oder ablehnen – Apply/Dismiss.
Generate Image
Wenn ich schon ein Bild hinzugefügt habe, und ich will es ersetzen, gibt es nun einen Punkt „ Generate Image “ . Wenn man drauf klickt öffnet sich ein neues Fenster, wo man das Bild das man haben möchte, genau beschreiben soll.
Generate Image mit KI
8 – Fazit:
Es wird zwar über all so dargestellt, mit KI Integration in WordPress, wie wenn man dadurch tatsächlich mit einer KI interagieren könnte, wie mit Chat Gpt. Aber man braucht dazu noch ein Plugin.
Vergleich dazu:
Jetpack: AI ist total integriert und hat komplett alles out of the box plus Prompts.
9 – Vergleich : Jetpack AI Assistant mit wordpress.org AI Plugin
Ich möchte hier nur einen Vergleich mit Jetpack AI Assistant herstellen. Kostet nicht mehr wie andere KI Anbieter. Du kannst es auch kostenlos testen. Und es ist ehrlich WOW.
Jetpack AI Image Editor
Also der Jetpack Image Editor ist schon WOW. Und die KI Bilder, die er generiert sind auch echt umwerfend.
Jetpack erstellt auch KI Bilder, wenn ich einen gesamten Blogbeitrag fertig habe und sagte:
Erselle mir bitte ein Bild zu diesem Blogbeitrag ..
Für den Jetpack AI Assistenten brauchst du das Jetpack Plugin. Dann hast du dort, – siehe PDF oben – alle Features verfügbar, du brauchst keinen API Key, gar nichts und es ist alles da. Es ist beeindruckend gut. Kein Vergleich mit dem AI Plugin von wordpress.org.
Jetpack AI Assistantwordpress.org AI Plugin
Im Vergleich der Sidebar, schaut es vorerst fast gleich aus. Jetpack hat halt oben einen grünen Button, und das wordpress.org AI Plugin hat keine Kennzeichnung extra, dass man irgendwo erkennen kann, das hier die KI aktiv ist. Der große Unterschied ist, das Jetpack nämlich wirklich Prompts hat. Du kannst in jeder Zeile einen Prompt einfügen und diskutieren und fragen.
✨ Welche Technologie / KI Anbieter Verwendet Jetpack
Texte und Inhalte: Für das Generieren von Blogbeiträgen, das Ändern des Schreibstils (Tonalität) oder das Korrigieren von Grammatik nutzt Jetpack die Schnittstellen (APIs) von OpenAI.
Bilder: Wenn du über den Jetpack Assistant Bilder per Texteingabe erstellst, kommen im Hintergrund ebenfalls etablierte Bildgenerierungsmodelle (wie DALL-E von OpenAI) zum Einsatz
Warum nicht Claude ? Jetpack ist sehr früh auf den KI-Zug aufgesprungen und hat sich fest in das Ökosystem von OpenAI integriert. Es gibt zwar immer wieder Diskussionen darüber, ob Entwickler in Zukunft auch andere Modelle wie Claude (von Anthropic) oder Open-Source-Modelle einbinden können, standardmäßig läuft aber alles über ChatGPT-Technologie.
Als dritte Neuerung gibt es eben auf wordpress.com noch den neuen AI Block. Ich habe oben eben den Pootlepress verlinkt, wenn man sich das tiefer ansehen möchte.
Leider trennt sich jetzt die Spreu vom Weizen, ich möchte sagen, fast seit dem WordPress Automattic Desaster mit WPEngine. Ich glaube da hat es angefangen, das Automattic sein Ding alleine vorangetrieben hat und ja ganz viele Entwickler Stunden für wordpress.org und den Core abgezogen hat.
Zum Glück ist mit der neuen WordPress Major Version 7.0 sozusagen, fast ein wenig Normalität angekommen. 😅😅😅. Es fühlt sich soo gut an, zu sehen, das auch hier etwas weitergeht. Das wordpress.com viele Features hat, die es halt jetzt auf wordpres.org nicht mehr gibt, ja, es ist halt so.
10-Aussicht – was kommt in WordPress 7.1 ?
👉Sichtbare, spektakuläre neue KI-Funktionen für Endnutzer gibt es in WordPress 7.1 tatsächlich nicht. Der Grund dafür ist jedoch strategisch: WordPress 7.0 hat das fundamentale „Unterbau-Gerüst“ geliefert, und Version 7.1 repariert und verfeinert dieses nun im Hintergrund.
Extendify mit AI Assistent
Während ich wirklich total enttäuscht bin, von dem WordPress AI Plugin, welches im Prinzip ein reines Experiment darstellt , sehe ich gerade das das Plugin Extendify wirklich einen AI Assistent integriert hat.
Der auch funktioniert !
Extendify Text erweitern mit AI Assistent
Er erstellt automatisch einen Blogbeitrags Überchrift
🎉Echtzeit Kollaboration
Asynchrone Kollaboration (Enhanced Notes): Die eigentlich geplante Echtzeit-Kollaboration (wie in Google Docs) wurde wegen technischer Hürden kurzfristig auf WordPress 7.1 verschoben.
Allerdings gibt es in WordPress 7.0 ein wirklich tolles neues Feature: Das Admin Design.
1 – Altes Standard Farbschema: Fresh
Altes Farbschema: Fresh
Wenn du in WordPress auf > Benutzer > Profil gehst, dann siehst du dort verschiedene Farbprofile. Das alte Farbprofil war > Fresh.
Das alte Standard-Muster war „Fresh“
💡Vor WordPress 7.0 hieß das klassische Standard-Farbmuster „Fresh“. Es war das bekannte, unaufdringliche Graublau (dunkelgraue/schwarze Seitenleiste mit graublauen Akzenten und Links), das WordPress-Nutzer über ein Jahrzehnt lang begleitet hat
2 – Neues Standard Farschema : “ Modern “
As part of the WordPress 7.0 visual refresh, this ticket proposes changing the default admin color scheme from „Default“ (fresh) to „Modern“ for all users.
Background
The „Default“ color scheme has been the admin default since WordPress 3.8. The „Modern“ color scheme was introduced more recently and better aligns with the WordPress Design System and the visual direction established by the Block Editor and Site Editor.
With the visual reskin effort underway, switching to the „Modern“ scheme as the default provides a more cohesive experience out of the box. https://core.trac.wordpress.org/ticket/64546
An Dem Ticket 64546 siehe oben, kannst du nachlesen, das das neue Farbschema zuerst “ modern “ heißen sollte. Allerdings hat man sich dann später dazu entschieden, es einfach als “ Standard “ zu benennen und das alte Standard heißt nun “ Fresh „.
Du kannst das gesamte Design auf Figma ansehen. Auffallen tut in erster Linie, die blauen Buttons, sowie die blauen Links.
Persönliche Meinung:
Mir gefällt das neue Farbschema sehr gut. Das alte war einfach schon ziemlich altbacken. Das viele es nicht so gut finden und es einfach über alle “ drübergebügelt “ wurde, ja ist halt so. 🤷♀️
This is a visual-only refresh with no functional or architectural changes. The focus is on core components that appear across all admin screens:
Admin Frame: Explore a sidebar navigation pattern similar to the Site Editor (if time and resources permit)
Buttons: Consistent styling for primary, secondary, and link buttons
Input Fields: Unified appearance for text inputs, selects, checkboxes, and radio buttons
Admin Tables: Light refresh of admin tables styles to align with DataViews
Cards: Dashboard widgets and metaboxes with modern styling
Mir war das wichtig, das alles zu erwähnen. In den meisten Beiträgen , auch wie auf https://kinsta.com/de/blog/wordpress-7-0/#verbessertes-adminerlebnis, wird das ein ziemliches Wischi Waschi, wo man als User glaubt, es ist viel mehr dahinter, als nur einfach ein CSS basierte hardcoded Design Erneuerung.
Und sie schreiben selber, Es ist nur Fassade: WordPress 7.0 bringt kein neues Admin-System, sondern verpasst dem uralten Backend lediglich einen starren, blau-weißen CSS-Farbstreich („Coat-of-Paint“)
Was ist eigentlich das Backend ?
💡Dieses neue Farbdesign ist übergreifend und betifft komplett alles , was du bearbeiten kannst, wenn du in deinem WordPress eingeloggt bist !
Highlight am Rande: Jetpack Stats jetzt auch im selbem Standardblau:
Auf Reddit gab es einige Diskussionen über das neue Farbschema. Einigen war es zu grell und ungewohnt. Was ihnen auch missfallen hat, war, dass mit dem Rollout von WordPress Version 7.0 das neue Admin Design für alle aktiviert wurde. Auch für die, die das nicht wollten !
💡 So kannst du aber ganz einfach dein gewohntes altes Farbschema zurückholen: Gehe einfach auf > Benutzer > Profil . Dort wähle das Design : Fresh aus. Gehe unten auf > aktualisieren . Fertig.
🎉 Data Views – Daten Ansichten
Die Daten Ansichten ist eine neue React basierte Probrammierung , die im Laufe der Zeit alles übergreifen wird.
Daten Ansichten – Data Views im Site Editor
Wo findest du diese Datenansichten:
Design >Editor > Seiten – siehe Bild oben
Design >Editor > Vorlagen
Design > Editor > Templates
Wo ist das Problem ?
Das Problem ist, das genau dieses Data View zum Beispiel für > Beiträge > >Alle Beiträge eben überhaupt nicht gibt. Die Beiträge Übersichtsseite ist nach wie vor nur die Alte Tabelle.
Modernisiertes Admin-Design & DataViews: Die alten, statischen Tabellen im Dashboard weichen flexibleren, modernen Daten-Ansichten zur besseren Inhaltsverwaltung.
🎉Neue Core Blöcke und Layouts
1 – Icons Block
Der Icon Block ist ein Starting Point für eine eventuelle spätere Icon Bibliothek. Bis jetzt kannst du fürs Erste die WordPress Core Icon s verwenden .
Icon Block mit Core Info Icon
Unter den Icons, die du wählen kannst, sind nur die WordPress Core Icons vorhanden. Allerdings, geht die Diskussion um diesen Block schon weiter:
Tipp: Bis dahin unbedingt den The Icon Block von Nick Diego verwenden.
2 – Breadcrumbs Block
Keine Sackgassen mehr: Der neue Breadcrumbs-Block
Für die Suchmaschinenoptimierung (SEO) und die Nutzerführung sind Breadcrumbs -Navigationen essenziell. WordPress liefert nun endlich einen eigenen Core-Block dafür. Du kannst die Breadcrumbs überall auf der Seite platzieren und optisch anpassen, ohne dafür extra ein SEO-Plugin bemühen zu müssen.
Der WordPress Breadcrumbs Block wäre an sich nicht schlecht. Allerdings scheitert er an der Spracheinstellung. Wenn die erste Seite einfach nur > Start heist , meine STartseite aber mit > Home bezeichnet wird, wie das halt üblich ist, dann ist das ui inkonsistet.
Allerdings siehe Beitrag unten, git es Breadbrumb Filters mit denen man das beheben kann. Trotzdem, für Normalo User nicht geiegnet.
Schick und flexibel: Anpassbare Navigations-Overlays
Das mobile Menü (Hamburger-Menü) war gestalterisch oft eine Sackgasse. Mit den neuen Navigations-Overlays hast du jetzt die volle Kontrolle darüber, wie das Menü im geöffneten Zustand auf Smartphones aussieht. Farben, Abstände und Animationen lassen sich direkt im Editor an dein Corporate Design anpassen.
Auch beim Navigations Block hat sich etwas getan. Es besteht jetzt die Möglichkeit, selber Overlay Menus zu gestalten. Dabei kann man jeden beliebten Block hinzufügen:
Navigation
Social Media icons
Suchfeld
Website-LOgo
Handlungsaufforderungen – Call to Action Button
Auf Make WordPress Test kannst du mehrere Beispiele ausprobieren, wie man so ein Navigations Overlay selber erstellen kann:
☝️Achtung: Falls du , so wie ich schon mit CSS dein eigens Overlay Menu estellt hast, die gute Nachricht: es bleibt als “ Standard „ einfach erhalten.
Custom CSS Navigaton Overlay
/*responsive*/
/* bringt den text nach links he he */
.wp-block-navigation.items-justified-right {
--navigation-layout-justification-setting: ;
--navigation-layout-justify: ;
}
.has-modal-open{background:
#998B91 !important;}
/*hintergrund in responsive bestimmen jesss */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
/* background-color: #fff; */
color: #913361;
}
/*titel linke von submenü ... wenn klickbar, ist nicht anklickbar auch responsive nicht*/
/* Responsive Navigation ändern !!!!! */
@media screen and (max-width: 1000px) {
/* hamburger button */
.wp-block-navigation__responsive-container-open {
display: block !important;
}
/* full menu */
.wp-block-navigation__responsive-container:not(.is-menu-open.has-modal-open) {
display: none !important;
}
}
Damals, war die mobile Ansicht in WordPress noch sehr rudimentär. Das Menü wurde vertikal dargestellt und war rechts 🤦♀️ angeordnet.
Aus dem Grund habe ich mit ein wenig CSS – siehe Code oben – das Overlay etwas ausgebessert. Im Prinzip reicht mir das bis heute.
Der Geheimtipp für mich is nämlich:
Ich hatte ja, meinen eigenen Style, siehe oben mit dem eigenen CSS . Dieser ist ja im Block Theme schon integriert und wird von WordPress als “ Standard “ abgelegt.
💡Das “ Standard “ sieht man ja aber erst, wenn man ein neues Custom Overlay Navigation angelegt hat. Dann verschwindet der Button – Neues Overlay erstellen, und stattdessen, hast du ein Drop Down, mit
Standarrd — das ist mein obiges braunes CSS Overlay
neu erstelltes Custom Overly mit Editor
Und jetzt kommt der wichtige Punkt, ich kann jetzt einfach ein neues Overlay erstellen, dann erscheint der neue Menüpunkt > Navigation Overlay. Alle weiteren Overlays erstelle ich dann dort. Anleitung unten !
Kurzanleitung Vorschau:
Ich habe 3 Header Vorlagen. Wenn ich jetzt ein neues Custom Navigation Overlay erstellt habe, wähle ich meine Header Vorlage, wähle den Navigations Block und dort klicke ich dann nicht auf Standard sondern auf das neu erstellte Navigatoin Overlay.
Was passiert dann im Frontend ? Dann habe ich für die eine Header Vorlage genau das neu erstellte Navigation Overlay . Für die andern beiden Header welche ich noch nicht geändert habe, greift das Custom CCS Standard Overlay.
💡Das heißt : WordPress überschreibt hier nichts. Ich selber kann zuordnen was ich haben möchte. 🎉
Custom Navigation Overlay wo wird es gepseichert ?
☝️Achtung !!! Das ist wichtig, jedes neu erstellte Naivgation Overlay das du erstellt hast, ist nur in der WordPress Datenbank gepeichert nicht in deinem Block Theme ! Das heisst, du musst es noch mit dem Create Block Theme Plugin speichern dann hast du es in deinem Custom Block Theme drinnen.
Egal, welches Block Theme du hast, eine header.html Datei gibt es immer.
Klicke im Header auf den > Navigations Block an
Rechs in der Sidebar is jezt der Navigations Block angzeeigt
Navigtions Block
Klicke auf das > Zahnradsymbol . Dort kannst du nun ein Overleay erstellen:
Sidebar vom Navigations Block mit Button: Overlay erstellen
☝️Achtung ! Nur wenn du noch nie ein Overlay erstellt hast siehst du diesen blauen Button !! Später kommt er nie mehr wieder !!
Wenn du einmal ein Overlay über den Button erstellt hast, passiert folgendes:
Neuer Menüpunkt: Navigatios-Overlay
In dem Moment wo du über den Button dein erstes Overlay Menu erstellst, erhälts du im Editor Menü einen neuen Menüpunkt: Navigations-Overlay.
Und alle weiteren Overlays, die du erstellst, erstellst du dann nur mehr darüber.
☝️ Wichtig: Dein erstes erstelltes Overlay Menü wird dann aber in der Sidebar dort wo der blaue Button Overlay erstellen war, zum Anklicken angezeigt.
Sidebar mit Overlay Auswahl Button
Wenn ich dann auf > bearbeiten klicke, kommt unteres Fenster, wo du es halt weiter bearbeiten könntest.
Erstes Custom Overlay mit rechts Design Patterns zur Auswahl
Verlauf beim Erstellen einesn Overlay Navigation Menus:
Custom Navigation Overlay
Fazit:Erste Verwirrung für mich. Wirklich nirgendwo wird das erklärt. Ich finde es nicht unbedingt selbstredend, wenn zuerst dort ein Button mit > Overlay erstellen steht. Der dann nie wieder dort erscheint.
Verlauf / Procedere
Stattdessen erscheint danach dort nur mehr ein Button mit
Standard Overlay
deine erstellten Overlays
und das dann auf einmal ein neuer Menüpunkt mit > Overlay Navigation aufpoppt von wo man dann alles weitere erstellen kann.
4 – Theme Entwicklung : Overlays im Custom Block Theme
Es gibt Template Parts und Block Pattenrs. Wenn man denUnterschied kennt, fällt es einem leichter, ein Overlay zu strukturieren:
👉Ein Template Part ist das Overlay selber. Ein Template Part bereitstellen bedeutet, ein fertiges Overlay ist verfügbar ab dem Moment wo das Block Theme aktiviert wurde.
👉Patterns sind Optionen. Sie erscheinen im Design Tab rechts , wenn man ds Navigation Overlay im Editor bearbeitet. Das ausgewählte Pattern ersetzt den aktiven Overlay Inhalt mit dem Pattern Block Markup. Dadurch können User zwischen unterschiedlichen Overlay Designs switchen.
Conclusion:
Wenn du selbst ein Custom Block Theme hast, dann vewrende auf jeden Fall immer das Overlay als Template Part.
Wenn du verschienden Deseing Overlays anbieten möchtest zusätlcih, dann wähle Patterns.
Der Grid Block ist wirklich die Zukunft von WordPress. Bis jetzt hat man immer noch den Spaltenblock verwendet. Allerdings kann man sagen, das der schon bald obsolet sein wird. Nach acht Jahren Grid Block wird’s aber auch Zeit 😂.
Warum bis jetzt alle den Spaltenblock verwenden:
Er wurde deswegen so ein Renner in WordPress , weil der der Einzige war, der zuverlässig responsive war. 😅 Aber jetzt kommt eben der Grid Block ins Spiel. Für einfachere Sachen funktioniert er einfach perfekt und ersetzt total den Spalte block genauso wie den Media & Text Block.
Was hat sich am Grid Block verändert ?
Es ist typisch WordPress, es wird jetzt eine Sache gefeiert als Neuerung, die ja eigentlich schon mal da war, dann wieder weg und jetzt wieder da .. Als Neuerung 😂
Grid / Raster Block NEU
Wenn du auf da Bild klickst siehst du in der Vergrösserung rechts in de Sidebar die neue Grid Funktion:
Neue Raster Funktion
NEU ist wieder zurück auf :
Automatsich
Manuell
✨ An der Funktion ändert sich eigentlich nix. Wer wirklich den Raster Block ordentlich verwenden will er kommt natürlich um das Zählen, in Pixel oder Rem nicht herum.
6 – Cover Block mit You Tube Video per URL
High ich bin ein You Tube Video in einem Cover Block
Video per URL inbettenCover Block You Tube Video hinzfügen
Probleme mit dem Video per URL einbetten im Cover Block
Wie man sehen kann, gibt es halt trotzdem ein paar Dinge, welche manbedenken sollte:
Sichtbarkeit der Stopp , Vor und Zurück Buttons Diese verschwinden zwar, nachträgich, aber trotzdem
Lade Verzögerung Videos müssen zuerst geladen werden Bevor man das Video sieht sieht man nur eine graue Fläche, bis dann ds Video geladen ist
Core Web Vitals : Es gibt auf jeden Fall einen Punkteabzug, wenn so ein Core Block mit Video als Hero Header eingebunden wird.
Fazit : Ich finde dies Neurungen echt cool. Funktionier ja auch tadellos. Bis eben auf diese paar Punkte , warum ich es doch nicht eingebunden habe. Ich habe die Core WebVitals und die Felddaten in den Page Speed Insights bestanden. Das möchte ich mir ungern zerstören. PSI geht leider vor Design .😅
Weitere Verbesserungen:
Bessere Lesbarkeit: Verbesserungen für den Absatz-Block
Der am häufigsten genutzte Block hat ein dezentes, aber wichtiges Upgrade erhalten. Die Steuerung von Textfluss, feinen Abständen (Margin/Padding) und typografischen Details wurde spürbar verbessert. Das Schreiben und Formatieren fühlt sich dadurch flüssiger an.
Medien im Fokus: Verbesserungen am Bildblock
Der Bildblock wurde intelligenter. Verbesserte Optionen für das automatische Zuschneiden (Aspect Ratio), schnellere Ladezeiten durch optimiertes Lazy Loading im Core und einfachere Filtermöglichkeiten machen die Arbeit mit Grafiken im Editor deutlich komfortabler.
Sicherer Code: Aktualisierungen des HTML-Blocks
Für alle, die externe Skripte oder Widgets einbinden müssen, bietet der HTML-Block nun eine bessere Syntax-Hervorhebung und integrierte Fehlerprüfungen. Das verhindert, dass ein vergessener Tag das gesamte Layout zerschießt.
🎉PHP 7.4 neue Mindestvoraussetzung
PHP 7.4 ist die neue Mindestvoraussetzung: Wer noch auf PHP 7.2 oder 7.3 läuft, erhält das Update nicht. Empfohlen wird für die optimale Performance der KI-Schnittstellen ausdrücklich PHP 8.3 oder höher.
🎉Block Api v3 – I Frame Modus
Früher lief der Editor ungeschützt direkt im WordPress-Admin-Bereich. Das hatte für Theme-Entwickler zwei massive, nervige Nachteile:
Das CSS-Chaos: Die Styles vom WordPress-Admin-Menü (die linke schwarze Leiste, die Admin-Schriften und Boxen) sind unkontrolliert in den Editor hineingeflossen. Gleichzeitig haben die Styles von Themes oft das WordPress-Backend zerschossen. Entwickler mussten tonnenweise CSS-Code schreiben, nur um diese gegenseitigen Störungen mühsam wieder glattzubügeln.
Kein echtes WYSIWYG: Weil die Admin-Styles dazwischengepfuscht haben, sah das Layout beim Schreiben im Backend fast nie exakt so aus wie später für den Besucher auf der echten Website.
Persönliche Erfahrung:
Mir ist das bei meinen Custom Classic Themes und auch zu den Anfängen mit den Block Themes noch auch passiert. Ich hatte dann oft im Admin Bereich meine roten H3 Überschriften mit der Lora Serifen Schrift.
Das ging ganz schnell und ich wusste oft gar nicht, wie ich das wieder rausbringe. Leider hab ich kein Bild mehr davon, ist schon zu lange her.
Warum löst das iFrame in WordPress 7.0 dieses Problem? 💡Das iFrame zieht eine absolute, saubere Grenze um den Block-Editor. Es sperrt alle Admin-Styles von außen komplett aus.
💡Wenn du ein WordPress Block Theme verwendest, mit theme.json, wo bereits das Style im Backend und Frontend sychron laufen, betrifft dich das überhaupt nicht.
🎉Fazit
Fazit: WordPress 7.0 modernisiert den Code im Hintergrund und macht das System fit für künstliche Intelligenz.
Wichtiger Tipp: Teste das Update wegen der großen technischen Änderungen zuerst auf einer Testseite (Staging-Umgebung), bevor du es live schaltest.
Du muss angemeldet sein, um einen Kommentar zu veröffentlichen.