So passen Sie Text im WordPress Gutenberg-Editor an (Back-End-Bereich)

Veröffentlicht: 2024-12-09

Der WordPress-Gutenberg-Editor ist ein leistungsstarkes Tool zur Inhaltserstellung, seine standardmäßige Back-End-Schnittstelle erfüllt jedoch nicht immer die spezifischen Anforderungen jedes Benutzers.

Während sich viele WordPress-Benutzer auf das Front-End-Design konzentrieren, bietet der Back-End-Bereich – der Editor selbst – auch Möglichkeiten zur Anpassung, um den Arbeitsablauf zu optimieren und das Bearbeitungserlebnis zu verbessern.

In diesem Artikel erfahren Sie, wie Sie den Text im Backend des Gutenberg-Editors anpassen, indem Sie benutzerdefinierte PHP-Snippets und CSS-Änderungen hinzufügen, die Sie auf jedes von Ihnen verwendete WordPress-Theme anwenden können.

Egal, ob Sie Entwickler oder WordPress-Enthusiast sind, dieser Leitfaden hilft Ihnen dabei, eine maßgeschneiderte Bearbeitungsumgebung zu erstellen, die für Sie funktioniert.

Schritte zum Anpassen des Textes im Back-End-Bereich des WordPress Gutenberg Editors

Schritt 1: Fügen Sie den benutzerdefinierten Code zur Datei „functions.php“ hinzu

Zunächst müssen Sie benutzerdefinierten Code hinzufügen, um den WordPress-Blockeditor (Gutenberg) für eine bessere visuelle Ausrichtung zwischen dem Editor (Backend) und dem Frontend der Website zu ändern.

Gehen Sie in Ihrem WordPress-Dashboard zu „Darstellung“ > „Designdatei-Editor“ . Sie finden den Theme-Datei-Editor im Menü „Extras“, wenn Sie ein Block-Theme verwenden.

Sobald Sie die Seite „Designdatei-Editor“ aufgerufen haben, wählen Sie die aus Datei „functions.php“ . Fügen Sie anschließend das folgende PHP-Snippet am Ende des Inhalts der Datei „function.php“ ein. Aktualisieren Sie als Nächstes die Designdatei, indem Sie auf die Schaltfläche „Datei aktualisieren“ klicken.

 // Benutzerdefiniertes CSS zum Gutenberg-Editor hinzufügen
Funktion custom_gutenberg_editor_styles() {
    add_theme_support('editor-styles'); // Editor-Stile aktivieren
    add_editor_style('custom-editor-style.css'); // Benutzerdefinierte CSS-Datei in die Warteschlange stellen
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

// Benutzerdefinierte Editor-Stile direkt in die Warteschlange stellen
Funktion enqueue_custom_editor_css() {
    wp_enqueue_style(
        'custom-editor-styles', 
        get_template_directory_uri() . '/custom-editor-style.css',
        array(),
        '1,0'
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

Schritt 2: Fügen Sie die CSS-Datei in Ihrem Theme-Verzeichnis hinzu ( custom-editor-style.css ).

Als Nächstes müssen Sie eine CSS-Datei mit dem Namen „custom-editor-style.css“ in Ihrem Theme-Verzeichnis erstellen (z. B. wp-content/themes/your-theme/).

1: Installieren Sie einen Dateimanager für WordPress

Um einen CSS-Dateinamen in Ihrem Theme-Verzeichnis zu erstellen, können Sie einen beliebigen Dateimanager für WordPress verwenden, der im WordPress-Plugin-Verzeichnis verfügbar ist.

Bitte installieren und aktivieren Sie es und beginnen Sie dann mit der Erstellung einer neuen CSS-Datei mit dem Namen „custom-editor-style.css“ in Ihrem Theme-Verzeichnis. Für dieses Beispiel verwenden wir das Advanced File Manager-Plugin und unser aktuelles WordPress-Theme ist Astra, daher sieht der Pfad wie folgt aus: wp-content/themes/astra/custom-editor-style.css

2: Fügen Sie das CSS-Snippet zur Datei „custom-editor-style.css“ hinzu

Fügen Sie als Nächstes die benutzerdefinierten Stile zu dieser Datei hinzu, um den Text im Back-End-Bereich von Gutenberg zu ändern. Kopieren Sie das CSS-Snippet unten und fügen Sie es in das Eingabefeld ein.

Hier ist das CSS-Snippet, das Sie verwenden können:

 /* Absatzschriftgröße und Zeilenhöhe anpassen */
.editor-styles-wrapper p {
    Schriftgröße: 18px !important;
    Zeilenhöhe: 1,6 !important;
    Farbe: #000000 !important;
    Schriftstärke: 400 !important;
}



/* Editor-Beitragstitel anpassen (H1) */
.editor-post-title__input {
    Schriftfamilie: 'Arial', serifenlos !important;
    Schriftgröße: 40px !important;
    Farbe: #000000 !important;
    Schriftstärke: 700 !important;
    Zeilenhöhe: 1,6 !important;
}

/* Überschriftenblöcke anpassen (H2, H3, H4, H5) */

.editor-styles-wrapper h2{
    Schriftfamilie: 'Arial', serifenlos !important;
    Schriftgröße: 36px !important;
    Farbe: #000000 !important;
    Schriftstärke: 700 !important;
    Zeilenhöhe: 1,6 !important;
}

.editor-styles-wrapper h3{
    Schriftfamilie: 'Arial', serifenlos !important;
    Schriftgröße: 32px !important;
    Farbe: #000000 !important;
    Schriftstärke: 700 !important;
    Zeilenhöhe: 1,6 !important;
}

.editor-styles-wrapper h4{
    Schriftfamilie: 'Arial', serifenlos !important;
    Schriftgröße: 30px !important;
    Farbe: #000000 !important;
    Schriftstärke: 700 !important;
    Zeilenhöhe: 1,6 !important;
}

.editor-styles-wrapper h5{
    Schriftfamilie: 'Arial', serifenlos !important;
    Schriftgröße: 28px !important;
    Farbe: #000000 !important;
    Schriftstärke: 700 !important;
    Zeilenhöhe: 1,6 !important;
}


/* Stil für ungeordnete Listen */
.editor-styles-wrapper ul {
    Rand links: 20px;
    padding-left: 20px;
    Listenstiltyp: Disc;
    Schriftgröße: 18px !important;
    Zeilenhöhe: 1,6 !important;
    Schriftfamilie: 'Arial', serifenlos !important;
    Farbe: #000000 !important;
    Schriftstärke: 400 !important;
}

/* Stil für Listenelemente */
.editor-styles-wrapper ul li {
    Rand unten: 10px;
    Schriftgröße: 18px !important;
    Farbe: #000000 !important;
    Schriftstärke: 400 !important;
}

/* Verschachtelte Listenstile */
.editor-styles-wrapper ul ul {
    Rand links: 20px;
    Listenstiltyp: Kreis;
}

/* Zusätzliche Stile für geordnete Listen, falls erforderlich */
.editor-styles-wrapper ol {
    Rand links: 20px;
    padding-left: 20px;
    Listenstiltyp: dezimal;
    Schriftgröße: 18px !important;
    Zeilenhöhe: 1,6 !important;
    Schriftfamilie: 'Arial', serifenlos !important;
    Farbe: #000000 !important;
    Schriftstärke: 400 !important;
}

Nachdem Sie das CSS-Snippet zur Datei „custom-editor-style.css“ hinzugefügt haben, können Sie überprüfen, ob Ihre Anpassungen im Backend-Bereich des Gutenberg-Editors erfolgreich angewendet werden.

Gehen Sie zum WordPress Gutenberg-Editor, indem Sie einen neuen Beitragstyp (Seite oder Beitrag) erstellen oder den vorhandenen auswählen.

Was hat der Code bewirkt?

1: Benutzerdefinierter Code in der Datei „functions.php“.

Erste Funktion

 Funktion custom_gutenberg_editor_styles() {
    add_theme_support('editor-styles'); // Editor-Stile aktivieren
    add_editor_style('custom-editor-style.css'); // Benutzerdefinierte CSS-Datei in die Warteschlange stellen
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

Diese Funktion weist WordPress an, eine benutzerdefinierte CSS-Datei ( custom-editor-style.css ) im Gutenberg-Editor zu verwenden.

Zweite Funktion

 Funktion enqueue_custom_editor_css() {
    wp_enqueue_style(
        'custom-editor-styles', // Eindeutiger Name für das Stylesheet.
        get_template_directory_uri() . '/custom-editor-style.css', // Pfad zu Ihrer CSS-Datei.
        array(), // Keine Abhängigkeiten.
        '1.0' // Version der CSS-Datei.
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

Diese Funktion lädt die Datei „custom-editor-style.css“ direkt in den Editor.

Warum zwei Funktionen?

Die erste Funktion fügt grundlegende Theme-Unterstützung für die Gestaltung des WordPress-Gutenberg-Editors hinzu.
Die zweite Funktion steuert, wie und wann die CSS-Datei geladen wird.

2: CSS-Snippet in der Datei „custom-editor-style.css“.

Absatztext anpassen (p)

 .editor-styles-wrapper p {
    Schriftgröße: 18px !important;
    Zeilenhöhe: 1,6 !important;
    Farbe: #000000 !important;
    Schriftstärke: 400 !important;
}

Was es tut:

Ändert die Schriftgröße von Absätzen auf 18 Pixel.
Setzt die Zeilenhöhe zur besseren Lesbarkeit auf 1,6.
Wendet die schwarze Textfarbe #000000 an.
Verwendet eine normale Schriftstärke (400).
!important : Stellt sicher, dass diese Stile alle widersprüchlichen Stile überschreiben.

Beitragstitel anpassen (H1)

 .editor-post-title__input {
    Schriftfamilie: 'Arial', serifenlos !important;
    Schriftgröße: 40px !important;
    Farbe: #000000 !important;
    Schriftstärke: 700;
    Zeilenhöhe: 1,6;
}

Was es tut:

Ändert die Schriftart des Beitragstitels in Arial mit einem serifenlosen Fallback.
Legt eine große Schriftgröße von 40 Pixel fest.
Stellt sicher, dass der Text fett ist (Schriftstärke: 700) und die Farbe Schwarz verwendet wird.
Behält eine konsistente Zeilenhöhe bei.

Überschriftenblöcke anpassen (H2, H3, H4, H5)

 .editor-styles-wrapper h2 {
    Schriftfamilie: 'Arial', serifenlos !important;
    Schriftgröße: 36px !important;
    Farbe: #000000 !important;
    Schriftstärke: 700;
    Zeilenhöhe: 1,6;
}

Ähnliche Stile werden für H3, H4 und H5 mit abnehmenden Schriftgrößen angewendet:

H2: 36px
H3: 32px
H4: 30px
H5: 28px

Was es tut:

Standardisiert die Schriftfamilie, Farbe, Stärke und Zeilenhöhe auf allen Überschriftenebenen.
Sorgt durch die Anpassung der Schriftgrößen für eine klare Hierarchie.

Stil für ungeordnete Listen (ul)

 .editor-styles-wrapper ul {
    Rand links: 20px;
    padding-left: 20px;
    Listenstiltyp: Disc;
    Schriftgröße: 18px !important;
    Zeilenhöhe: 1,6 !important;
    Schriftfamilie: 'Arial', serifenlos !important;
    Farbe: #000000 !important;
    Schriftstärke: 400 !important;
}

Was es tut:

Fügt links von ungeordneten Listen einen Abstand hinzu (Einrückung).
Stellt sicher, dass Listenelemente den Disc-Bullet-Stil verwenden.
Wendet einheitliche Schriftgröße, Farbe und Zeilenhöhe an, um sie an den Absatztext anzupassen.

Stil für Listenelemente (ul li)

 .editor-styles-wrapper ul li {
    Rand unten: 10px;
    Schriftgröße: 18px !important;
    Farbe: #000000 !important;
    Schriftstärke: 400 !important;
}

Was es tut:

Fügt zur besseren Lesbarkeit einen Abstand zwischen den Listenelementen hinzu (Rand unten: 10 Pixel).
Stellt sicher, dass die Textstile zum Gesamtdesign passen.

Verschachtelte Listenstile s

 .editor-styles-wrapper ul ul {
    Rand links: 20px;
    Listenstiltyp: Kreis;
}

Was es tut:

Passt die Einrückung für verschachtelte ungeordnete Listen an.
Ändert den Aufzählungsstil für verschachtelte Listen in Kreis.

Stil für geordnete Listen (ol)

 .editor-styles-wrapper ol {
    Rand links: 20px;
    padding-left: 20px;
    Listenstiltyp: dezimal;
    Schriftgröße: 18px !important;
    Zeilenhöhe: 1,6 !important;
    Schriftfamilie: 'Arial', serifenlos !important;
    Farbe: #000000 !important;
    Schriftstärke: 400 !important;
}

Was es tut:

Fügt Abstände hinzu und verwendet eine Dezimalnummerierung für geordnete Listen.
Stellt sicher, dass geordnete Listen der gleichen Typografie folgen wie Absätze und ungeordnete Listen.

Das Fazit

Dieser Artikel zeigt, wie einfach Sie den Text im Backend-Bereich des WordPress Gutenberg-Editors anpassen können. Wie wir am Anfang dieses Artikels erwähnt haben, wird die Anpassung des Textes im Back-End-Bereich von Gutenberg Ihr Bearbeitungserlebnis verbessern. Die Verbesserung des Bearbeitungserlebnisses in WordPress ist von entscheidender Bedeutung, da es sich direkt auf unsere Effizienz, Kreativität und Zufriedenheit als Inhaltsersteller auswirkt.

Durch die Implementierung der Methode in diesem Artikel (fügen Sie den benutzerdefinierten Code zur Datei „functions.php“ hinzu und fügen Sie die CSS-Datei in Ihrem Theme-Verzeichnis hinzu) können Sie den Text im Back-End-Bereich von Gutenberg anpassen, unabhängig davon, welches WordPress-Theme Sie verwenden. Dieser Ansatz stellt sicher, dass Ihre Änderungen über verschiedene Themes und Updates hinweg konsistent bleiben.

Passen Sie gerne Werte im CSS-Snippet an, um die beste Darstellung Ihres Textes im Backend-Bereich von Gutenberg zu erreichen. Sie können Eigenschaftswerte wie Schriftgröße, Zeilenhöhe, Farbe und Ränder ändern, um sicherzustellen, dass der Inhalt lesbar und optisch ansprechend ist. Wenn Sie beispielsweise die Schriftfamilie auf eine besser lesbare Schriftart ändern oder eine Zeilenhöhe festlegen, die die Lesbarkeit verbessert, kann das Bearbeitungserlebnis verbessert werden. Darüber hinaus kann die Anpassung der Abstands- und Randeigenschaften dazu beitragen, Elemente effektiver zu platzieren und so zu verhindern, dass das Layout zu überfüllt wirkt.