Der Post-Editor in WordPress soll, wie der Name schon sagt, Posts und Inhalte bearbeiten können. Standardmäßig können Sie keine benutzerdefinierten CSS-Klassen hinzufügen. Wenn Sie benutzerdefinierte CSS-Stile oder -Klassen hinzufügen möchten, können Sie nur zum Modus "Text" wechseln und ihn zum HTML-Code hinzufügen.

Da WordPress so anpassbar ist, gibt es Wege, um Ihr Leben einfacher zu machen, indem Sie dem WordPress-Post-Editor benutzerdefinierte Stiloptionen hinzufügen. Mit diesen benutzerdefinierten Optionen können Sie die CSS-Stile mit nur wenigen Mausklicks anwenden. Sie müssen nicht mehr in den Textmodus wechseln oder sich an alle CSS-Klassen erinnern, die in Ihren Posts enthalten sind, damit sie schöner aussehen.

Es gibt eine Reihe von Möglichkeiten, wie Sie dem WordPress-Post-Editor benutzerdefinierte Stiloptionen hinzufügen können. Die erste besteht darin, ein kostenloses Plugin zu verwenden, und die zweite besteht darin, ein Code-Snippet hinzuzufügen. Beide Methoden funktionieren sehr ähnlich, also folgen Sie dem, mit dem Sie sich wohl fühlen.

Hinweis : Bevor Sie fortfahren, gehe ich davon aus, dass Sie grundlegendes HTML und CSS beherrschen und Dinge wie CSS-Klassen, Elemente auf Blockebene, HTML-Elemente, Attribute usw. verstehen können.

1. Verwenden eines Plugins

Die einfachste Möglichkeit, benutzerdefinierte Stiloptionen im WordPress-Post-Editor hinzuzufügen, ist die Verwendung eines Plugins namens TinyMCE Custom Styles.

Das Gute an diesem Plugin ist, dass es automatisch ein Editor-Stylesheet erstellt, in dem Sie benutzerdefinierte CSS-Stile hinzufügen können. Dies ist sehr nützlich, wenn Sie die Front-End-Stile für Links, Bilder, Formulare, Schaltflächen usw. im Post-Editor anzeigen möchten.

1. Laden Sie TinyMCE Custom Styles wie jedes andere WordPress-Plugin herunter, installieren und aktivieren Sie es. Wechseln Sie nach der Aktivierung zur Seite mit den Plugin-Einstellungen, indem Sie zu "Einstellungen -> TinyMCE Custom Styles" navigieren.

2. Auf Anhieb wird das Plugin eine Fehlermeldung anzeigen, in der Sie gefragt werden, wo Sie die Editor-Stylesheet-Datei platzieren möchten. Abhängig von Ihrem Thema können Sie zwischen drei Optionen wählen. Lesen Sie diese Optionen sorgfältig durch und wählen Sie diejenige aus, die für Sie geeignet ist. In meinem Fall wählte ich die zweite Option, weil ich ein eigenes Genesis-Kinderthema verwende. Klicken Sie auf die Schaltfläche "Alle Einstellungen speichern", um die Änderungen zu speichern.

3. Scrollen Sie nach unten und klicken Sie auf die Schaltfläche "Neuen Stil hinzufügen". Geben Sie nun den Namen des Stils ein, wählen Sie einen Typ (z. B. Inline, Block oder Selektor), geben Sie den Typwert und dann die CSS-Klasse ein.

4. Auf der rechten Seite vergessen Sie nicht zu wählen, ob das Element ein "Wrapper" ist oder nicht. Wenn Sie diese Option auswählen, erstellt der Stil ein neues Element auf Blockebene um das ausgewählte Element auf Blockebene im Post-Editor.

5. Wenn Sie möchten, können Sie sogar direkt benutzerdefinierte CSS-Stile hinzufügen, indem Sie auf "Neuen Stil hinzufügen" klicken, der unter der Kategorie "CSS-Stile" angezeigt wird. Ich empfehle jedoch, diese Stile in der Datei "editor-style.css" hinzuzufügen, die sich in Ihrem Themenverzeichnis befindet (wenn Sie die zweite Option wie mich im zweiten Schritt ausgewählt haben). Es macht es einfach zu verwalten.

6. Sobald Sie fertig sind, klicken Sie auf die Schaltfläche "Alle Einstellungen speichern", die am Ende der Seite erscheint.

7. Das ist es. Von nun an sehen Sie im Post-Editor ein neues Dropdown-Menü mit dem Namen "Formate". In diesem Dropdown-Menü können Sie die neu hinzugefügte benutzerdefinierte Stiloption zusammen mit anderen vorkonfigurierten Optionen finden. Um den Style zu verwenden, klicken Sie einfach darauf und der notwendige CSS-Code wird automatisch zum Post-Editor hinzugefügt. Sie sehen diesen Code im Textmodus.

8. Wenn Sie der Datei editor-style.css erforderliche Stile hinzugefügt haben, werden diese Stile im Post-Editor angezeigt, wenn Sie die Stiloption aus dem Dropdown-Menü verwenden.

Wenn Sie das Plugin in Zukunft deaktivieren oder entfernen, wird das Editor-Stylesheet nicht gelöscht. Sie können jedoch nicht mehr auf die benutzerdefinierten Optionen im Post-Editor zugreifen.

Related : So löschen Sie nicht verwendete Datenbanktabellen in WordPress

2. Manuelle Methode

Wenn Sie kein Plugin verwenden möchten, können Sie dasselbe erreichen, indem Sie Ihrer Datei "functions.php" ein einfaches Code-Snippet hinzufügen. Es besteht aus zwei Teilen: Der eine ist das Hinzufügen der Schaltfläche zur Symbolleiste, um CSS-Code einzufügen, und der zweite, um den CSS-Stil im Post-Editor live zu gestalten.

Fügen Sie der Symbolleiste benutzerdefinierte CSS-Stilschaltflächen hinzu

Fügen Sie am Ende Ihrer Datei "functions.php" Folgendes hinzu: Dieser Code wird tatsächlich von WordPress selbst bereitgestellt.

 // Callback-Funktion zum Einfügen von 'styleselect' in die $ buttons-Array-Funktion my_mce_buttons_2 ($ buttons) {array_unshift ($ buttons, 'styleselect'); zurückgeben $ buttons; } // Registrieren Sie unseren Rückruf zum passenden Filter add_filter ('mce_buttons_2', 'my_mce_buttons_2'); // Callback-Funktion zum Filtern der MCE-Einstellungsfunktion my_mce_before_init_insert_formats ($ init_array) {// Definiere das style_formats-Array $ style_formats = array (// Jedes Array-Kind ist ein Format mit eigenem Einstellungs-Array ('title' => '.translation'), 'Block' => 'Blockquote', 'Klassen' => 'Übersetzung', 'Wrapper' => Wahr, ), Array ('Titel' => '⇠.rtl', 'Block' => 'Blockquote', 'classes' => 'rtl', 'wrapper' => true, ), array ('titel' => '.ltr⇢', 'block' => 'blockquote', 'classes' => 'ltr', ' wrapper '=> wahr, ), ); // Füge das Array JSON ENCODED in 'style_formats' ein $ init_array ['style_formats'] = json_encode ($ style_formats); Rückgabe $ init_array; } // Callback an 'tiny_mce_before_init' anfügen add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');

Sie müssen den Code Ihren Stiloptionen anpassen. Im obigen Code ist jedes Array eine separate Stiloption. Geben Sie Ihren Stiltitel neben "title", den Blocktyp neben "block" und die CSS-Klasse neben "classes" ein. Wenn das Element ein Wrapper ist, geben Sie "true" neben "wrapper" ein "falsch."

Immer wenn Sie eine neue Stiloption hinzufügen möchten, duplizieren Sie einfach das Array und ändern Sie die Felder. In meinem Fall habe ich das erste Array ausgefüllt, um meine "Blue Button" Option widerzuspiegeln.

Sobald Sie mit der Anpassung fertig sind, speichern Sie die geänderte Datei "functions.php" und laden Sie sie auf Ihren Server hoch.

Erstellen Sie ein Editor Stylesheet

Erstellen Sie eine Datei mit dem Namen "editor-style.css". Fügen Sie nun relevante CSS-Stile hinzu, die Sie im Post-Editor sehen möchten. Vergessen Sie nicht, dass die CSS-Klassen, die Sie in der Datei "editor-style.css" erstellen, mit den CSS-Klassen im obigen Stiloptionscode übereinstimmen sollten.

Öffnen Sie nun die Datei "functions.php" Ihres Themes und fügen Sie den folgenden Code hinzu.

 // Füge benutzerdefinierte Stylesheet-Funktion hinzu mte_add_editor_styles () {add_editor_style ('editor-style.css'); } add_action ('init', 'mte_add_editor_styles');

Laden Sie die Dateien "editor-style.css" und "functions.php" auf Ihren Server hoch. Das ist alles, was es zu tun gibt. Ab jetzt können Sie die benutzerdefinierten Stiloptionen aus dem WordPress-Post-Editor verwenden.

Sie können die angewendeten Stile in Echtzeit sehen.

Kommentieren Sie unten Ihre Gedanken und Erfahrungen bezüglich der Verwendung der oben genannten Methoden zum Hinzufügen von benutzerdefinierten Stiloptionen im WordPress-Post-Editor.