Lassen Sie den WordPress -Block -Editor so aussehen wie das Front -End -Design

Machen Sie das Erscheinen des WordPress-Block-Editors im Einklang mit dem Front-End-Design!

Müssen Sie als WordPress -Benutzer häufig zwei Registerkarten gleichzeitig für die Bearbeitung von Artikeln öffnen? Eine Registerkarte zeigt den neuen Gutenberg-Block-Editor, und der andere sorgt für den Front-End-Effekt des Artikels vor, um sicherzustellen, dass das endgültige Rendering nicht falsch ist?

WordPress -Themenstile beeinflussen nur das Frontend der Website, und die Backend -Redakteure unterscheiden sich normalerweise sehr vom Frontend. Aber das ist nicht unveränderlich! Mit einem benutzerdefinierten Stylesheet können Sie den WordPress-Editor zum Front-End-Spiegel fast perfekt aussehen lassen.

Dies erfordert nur zwei einfache Schritte:

1. Fügen Sie der Datei der functions.php des Themas ein paar Zeilen von PHP -Code hinzu, um den Editor zu informieren, um das benutzerdefinierte Stylesheet zu laden.
2. Erstellen und konfigurieren Sie dieses benutzerdefinierte Stilblatt.

Fangen wir an!

Schritt 1: Ändern Sie functions.php

Wenn Sie ein nicht selbst entwickeltes WordPress-Thema verwenden, wird dringend empfohlen, ein Unterthema zu erstellen, bevor Sie Änderungen am Hauptthema vornehmen.

Öffnen Sie die Datei der functions.php des Themas (normalerweise im Stammverzeichnis des Themasordners) und fügen Sie den folgenden Code am Ende der Datei hinzu:

 // Gutenberg benutzerdefinierte Stylesheet add_theme_support ('Editor-Styles');
add_editor_style ('editor-style.css'); // Stellen Sie sicher, dass der Pfad korrekt auf die Stylesheet -Datei zeigt

Dieser Code teilt WordPress mit, dass Sie benutzerdefinierte Stylesheets verwenden, um mit Gutenberg zu arbeiten, und gibt den Ort der Stylesheet-Datei ( editor-style.css ) an.

Schritt 2: Schreiben Sie den CSS -Stil

Jetzt geben wir den CSS -Schreibprozess ein.

Aufgrund der Vielzahl von WordPress -Themen ist es unmöglich, ein Stylesheet zu schreiben, das für alle Themen funktioniert. Das folgende Beispiel basiert auf den von meiner Website verwendeten Themen und hilft Ihnen hoffentlich zu verstehen, wie Sie Stilblätter für Ihre Website erstellen. Am Ende des Artikels wird eine Vorlage bereitgestellt, mit der Sie schnell beginnen können.

Erstellen Sie eine neue Datei namens editor-style.css und platzieren Sie sie in das Root-Verzeichnis des Themas (oder ein Kinderthema-Verzeichnis).

Der CSS -Stil des Blockeditors unterscheidet sich geringfügig vom Standard -CSS. Beispielsweise kann der folgende Code in einem Artikel die Textgröße nicht korrekt anwenden:

 H2 {
  Schriftgröße: 1.75em;
}

Um den Stil korrekt festzulegen, müssen Sie die Blöcke im Blockeditor suchen. Das heisst<h2></h2> Elemente müssen mit .rich-text.block-editor-rich-text__editable Klasse abgebildet werden:

 h2.rich-text.block-editor-roch-text__editable {
  Schriftgröße: 1.75em;
}

Ich habe eine Basis -CSS -Datei erstellt, die diesem Muster folgt, um gemeinsame Block -Editor -Elemente zu stylen. Sie können die Datei von GitHub erhalten und den Stil ersetzen, der Ihrem Thema entspricht.

Ich werde den Stylesheet -Erstellungsprozess hier nicht ausführlich erweitern, aber die Vorlage sollte Ihnen eine klare Idee geben. Ein guter Ausgangspunkt besteht darin, Elemente aus Ihrem Front-End-Stylesheet zu kopieren. Möglicherweise müssen Sie möglicherweise einige Elementklassen ändern, damit sie sich für das Block-Editor-Fenster bewerben.

Verwenden Sie im Zweifelsfall das Browser -Entwickler -Tool, um Elemente zu überprüfen und ihren entsprechenden Klassennamen zu bestimmen. Die Vorlagen für die obigen Links sollten die meisten Elemente abdecken.

Effektanzeige

Schauen wir uns zunächst den WordPress -Editor ohne benutzerdefinierten Stylesheet an:

Vergleichen Sie dann meine Testwebsite Front-End:

Der Unterschied zwischen den beiden ist signifikant, oder? Meine Testseite verwendet viele Gradienten, benutzerdefinierte Schriftarten, Knopfstile und Referenzblöcke, und der Container ist kein einfaches Quadrat.

Ob es Ihnen gefällt oder nicht, werden Sie zustimmen, dass dies ein großer Unterschied zu der Standard -Benutzeroberfläche von Gutenberg Editor ist. Aus diesem Grund muss ich eine Registerkartenseite separat öffnen, um den Artikel vorschau zu machen.

Lassen Sie uns nun den benutzerdefinierten Stil laden und den Effekt sehen:

Sehen! Die Editor -Benutzeroberfläche sieht jetzt fast genau so aus wie das Frontend meiner Website. Inhaltsbreite, Schriftart, Farbe und verschiedene Elemente stimmen mit dem vorderen Ende überein. Ich habe sogar den gleichen schönen Hintergrund wie der Titel des Artikels!

Dies bedeutet - müssen keine Vorschau mehr in einer anderen Registerkarte mehr vorschauen. Ist es nicht cool?

Wenn Sie den WordPress-Editor im Einklang mit dem Erscheinungsbild Front-End-Erscheinungsbilds in Übereinstimmung haben, kann die Effizienz erheblich verbessern. Für mich wird das häufigste Schalten von Registerkarten, um Front-End-Effekte beim Bearbeiten von Artikeln anzuzeigen, mein Denken unterbrechen. Daher vermeide ich dies.

Hoffe, die obigen Schritte können Ihnen helfen, den gleichen Effekt zu erzielen!

Das obige ist der detaillierte Inhalt vonLassen Sie den WordPress -Block -Editor so aussehen wie das Front -End -Design. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!