So bereiten Sie Ihre Website auf WordPress Gutenberg vor

Gutenberg kommt bald zu WordPress. Ist Ihre Website fertig? Obwohl wir immer noch nicht genau wissen, in welcher Form dies geschehen wird, wird dieses neue Content-System in Zukunft zu WordPress Core hinzugefügt. Werfen wir einen Blick auf die möglichen Auswirkungen auf Ihre Website und auf Möglichkeiten, wie Sie Problembereiche frühzeitig ermitteln und beheben können.

Was ist Gutenberg??

Gutenberg ist ein WordPress-Projekt, das den Nutzern mehr Flexibilität bei der Gestaltung ihrer Inhalte bieten soll. Das Projekt zielt im Wesentlichen darauf ab, den aktuellen Editor, der hauptsächlich als Textverarbeitungsprogramm fungiert, durch eine visuellere und strukturiertere Schnittstelle zu ersetzen. Derzeit ist Gutenberg ein Plugin, das Benutzern die Möglichkeit gibt, ihren Inhalt ähnlich wie Visual Composer oder andere Drag-and-Drop-Editoren zu ändern, wenn auch in vereinfachter und intuitiver Weise.

Wenn Sie mehr über Gutenberg erfahren möchten, werfen Sie einen Blick auf meinen früheren Beitrag "Was ist WordPress Gutenberg?".

Die Stücke Ihrer Site

Gutenberg ist ein enormes Unterfangen und wird wahrscheinlich eine Vielzahl von Endpunkten auf Ihrer Website betreffen. Dies sind die drei Bereiche, in denen wir nach Themen suchen:

  • Dein Thema: Gutenberg verfügt über einen eigenen Satz von Inhalten. Ist dein Thema kompatibel? Wie wird es mit Gutenberg aktiv aussehen??

  • Ihre Plugins: Es ist möglich, dass Gutenberg auf unerwartete Weise mit Ihren anderen Plugins interagiert. Wir werden uns ansehen, was das sein könnte und was bei auftretenden Problemen zu tun ist.

  • Ihr Inhalt: Gutenberg beeinflusst, wie Ihr Inhalt angezeigt wird. Wir werden untersuchen, wie sich dies möglicherweise auf Ihre Seiten auswirkt, und bei Problemen werden mögliche Korrekturen besprochen.

Einrichten eines Testbereichs

Bevor wir loslegen, sollten Sie einen Testbereich einrichten, in dem Sie mit Gutenberg experimentieren können, ohne Ihre Live-Site zu beschädigen. Idealerweise sollten Sie einen eigenen Testbereich einrichten oder eine lokale Kopie Ihrer Site erstellen. Weitere Informationen zum Ausführen einer dieser Aufgaben finden Sie im folgenden Tutorial:

Wenn keine dieser Möglichkeiten möglich ist, können Sie die Tests direkt auf Ihrer Site durchführen. Beachten Sie, dass dies riskant sein kann, da wir einige Teile Ihrer Website aktivieren und deaktivieren werden. Wenn Sie den Test live durchführen, stellen Sie sicher, dass Sie ein Backup Ihrer Site erstellen, bevor Sie beginnen.

Wenn Sie wissen, wo Sie testen, gehen Sie zum Plugins-Verzeichnis und suchen Sie nach Gutenberg. Sobald es installiert und aktiviert ist, lesen Sie weiter.

Setzen Sie Ihr Thema auf Herz und Nieren

Nun, da Sie Gutenberg installiert haben, werfen wir einen Blick auf den ersten Abschnitt Ihrer Website, der möglicherweise betroffen ist: das Thema. Wenn an dieser Stelle bereits größere Probleme aufgetreten sind, wie Datenbankfehler oder Probleme mit dem WordPress-Administrator, fahren Sie mit dem Was tun, wenn es zu viele Probleme gibt Sektion.

Da Gutenberg hauptsächlich mit den Inhalten der Site interagiert, müssen wir nur ein paar Dinge prüfen - zum Glück für uns.

Die erste ist, dass Gutenberg mit einem eigenen Stylesheet und einer Reihe von Styles kommt. Überprüfen Sie die verschiedenen Seitentypen und Vorlagen, die auf Ihrer Website verwendet werden, um sicherzustellen, dass sie noch ordnungsgemäß angezeigt werden. Im Vordergrund stehen dabei Elemente im Hauptinhaltsbereich Ihrer Seiten - insbesondere Inhalts- und Bildblöcke. Wenn Sie Probleme sehen, hat Gutenbergs Stile wahrscheinlich Vorrang vor den Ihrer Website.

Um dies zu korrigieren, müssen Sie ermitteln, woher das Problem kommt. Normalerweise handelt es sich dabei um einen CSS-Selektor, der sich auf ein HTML-Element konzentriert, oder es kann eine Priorität der Gutenberg-Stile gegenüber den eigenen Klassen sein. Versuchen Sie in jedem Fall herauszufinden, wo der Fehler auftritt. Bestimmen Sie als nächstes, warum die Gutenberg-Stile Ihre überschreiben, und korrigieren Sie Ihren Code, damit er Vorrang hat.

Versuchen Sie, Korrekturen in Ihrem eigenen Thema (oder besser noch in einem untergeordneten Thema oder einem für CSS definierten Bereich in Ihrem Design) vorzunehmen, anstatt Gutenberg zu ändern. Wenn Sie eine der Dateien in Gutenberg direkt ändern, wird sie wahrscheinlich überschrieben, wenn das Plugin aktualisiert wird.

Auf ähnliche Weise möchten Sie Ihrem Admin-Bereich einmalig alle Styling-Probleme zuweisen. Theme-Optionen und andere von Ihrem Theme generierte benutzerdefinierte Bereiche scheinen die größten Schuldigen zu sein. Wenn Sie in diesen Bereichen Stilprobleme erkannt haben, können Sie diese normalerweise korrigieren, indem Sie ein untergeordnetes Design ändern oder erstellen und dort das CSS anpassen.

Funktionieren Ihre Plugins??

Nachdem Ihr Thema entfernt ist, werden als Nächstes die Plugins Ihrer Website angezeigt. Behalten Sie insbesondere alle Plugins im Auge, die Shortcodes bereitstellen, die Sie in Ihrem Inhalt verwenden (z. B. Gravity Forms), Plugins, die das Erscheinungsbild Ihres Inhalts beeinflussen (z. B. Plugins für Barrierefreiheit, die die Textgröße beeinflussen) und Plugins, die Elemente direkt in Ihre Seite einfügen (wie erweiterte benutzerdefinierte Felder).

Shortcodes betrachten

Um diesen Bereich zu prüfen, müssen Sie zunächst eine Liste aller von Ihnen verwendeten Kurzwahlen zusammenstellen und angeben, auf welchen Seiten sie vorhanden sind. Mit Ihrer Liste in der Hand, besuchen Sie jede dieser Seiten, um zu sehen, ob sie wie beabsichtigt funktionieren. Wenn Sie auf Stilprobleme stoßen, ist es wahrscheinlich, dass Sie das gleiche Problem wie oben haben und Ihre Stile anpassen müssen.

Wenn Sie jedoch den gefürchteten gerenderten Shortcode erhalten, heißt das, dass auf Ihrer Seite der angezeigt wird [shortcode] Anstatt zu tun, was es soll, gibt es eine andere Lösung. In diesem Fall können Sie den Block anzeigen, in dem sich der Kurzcode befindet, und bestätigen, dass er nicht als Text betrachtet wird (unerwünschte Tags um den Kurzcode suchen und entfernen). Wenn das Problem weiterhin besteht, sollte der Shortcode auf einen geeigneteren Blocktyp verschoben werden, damit alles wieder betriebsbereit ist.

Inhaltsdarstellung

Dieses Problem ergibt sich aus dem gleichen Problem, das wir zuvor behandelt haben: Stilüberschreibungen. Identifizieren Sie die betroffenen Elemente und korrigieren Sie das CSS.

Elementerstellung

Der letzte Bereich, in dem wir uns mit widersprüchlichen Themen befassen, betrifft die Elementerstellung. Jedes Plugin, das HTML-Elemente in eine Seite einfügt, ohne Shortcodes zu verwenden, ist hier verdächtig - zum Beispiel, wenn PHP benutzerdefinierte Felder aus dem Plugin für erweiterte benutzerdefinierte Felder zieht.

Der häufigste Ausrutscher bei der Elementerstellung dreht sich um Blöcke, die nicht übereinstimmen. Da Gutenberg seine eigenen Stile bereitstellt, besteht die Möglichkeit, dass Ihre Elemente in einem nicht beabsichtigten Block falsch dargestellt werden, wenn sie erstellt werden. Um dieses Problem zu beheben, müssen Sie sicherstellen, dass Ihr Code dem Block Elemente hinzufügt, an denen Sie sie haben möchten.

Wird Ihr Inhalt als notwendig angezeigt??

Dies ist nicht ganz so dringlich wie die anderen Probleme, die wir besprochen haben. Es kann jedoch zu Komplikationen bei der Darstellung Ihres Inhalts kommen. Die meisten dieser Probleme werden durch geringfügige Änderungen am Stil oder durch die Anordnung der Blöcke verursacht. Um dies zu korrigieren, müssen Sie mit dem Blocksystem herumspielen, bis Sie Ihre Seite so erhalten, wie Sie es möchten.

Was tun, wenn es zu viele Probleme gibt

Sind Sie auf ein Problem gestoßen, das Sie mit den Vorschlägen in diesem Artikel nicht lösen konnten? Keine Panik! Es gibt noch einige Zeit, bis Gutenberg WordPress Core erreicht.

Notieren Sie sich zunächst, was der Fehler ist und welche Schritte zum Fehler geführt haben. Je mehr Informationen Sie sammeln können, desto besser. Geben Sie all diese Informationen an das Gutenberg-Team weiter. Mit etwas Glück können sie das Problem feststellen und in einer zukünftigen Version beheben.

Wenn Sie an einer Staging-Site gearbeitet haben, können Sie jetzt alles tun. Lesen Sie in den Versionshinweisen nach, ob Ihr Problem gelöst ist, oder arbeiten Sie möglicherweise selbst an der Lösung.

Wenn Sie an Ihrer Live-Site gearbeitet haben, sollte die Deaktivierung von Gutenberg die Normalität wiederherstellen. Wenn nicht, ist es jetzt an der Zeit, zu der von Ihnen erstellten Sicherung zurückzukehren!

Viel Glück bei der Installation!

Gutenberg möchte eine massive Änderung der WordPress-Umgebung sein, die den Inhalt zum Besseren verändern will. Stellen Sie sicher, dass Ihre Website mit den neuen Änderungen funktioniert, bevor sie auf den Hauptzweig trifft. Wenn Sie andere als die hier aufgeführten Probleme, bessere Lösungen oder Korrekturen für irgendetwas in diesem Artikel haben, hinterlassen Sie bitte einen Kommentar!