Post navigation

So einfach: Ein eigenes CSS für den WordPress Editor erstellen

Das Problem ist altbekannt: Du hast Dir tolle Buttons oder anderes mit etwas CSS erstellt und willst das im visuellen Editor Deines WordPress verwenden. Doch im Editor sind Deine Styles nicht zu sehen. Die Lösung ist ein eigenes Stylesheet für den visuellen Editor.

Der visuelle Schreib-Editor der »Beitrag erstellen«-Seite Deines WordPress lässt sich hervorragend anpassen. Du kannst dort Deine eigenen Styles anzeigen lassen. Wenn Du möchtest, dann kann der Inhalt des Editors fast genauso wie Dein Blog aussehen.

Ein eigenes CSS für den visuellen Editor von WordPress

Schritt 1: Erstelle eine Datei namens custom-editor-style.css, und kopiere dort das CSS hinein, das im Editor angezeigt werden soll. Danach verschiebe die Datei in den CSS-Ordner Deines Themes. Sollte dort keiner vorhanden sein, dann lege ihn entweder an oder passe den Code für die functions.php an.

Schritt 2: Damit Du ein Gefühl dafür bekommst, wie Du ein Editor-Style-CSS speziell für Dein Theme gestalten kannst, schau Dir einfach mal das editor-style.css vom neuen Twenty Seventeen Theme an.

Der Code für die functions.php:

Damit Dein neues CSS auch geladen und im Editor verwendet werden kann, muss es registriert und verlinkt werden.

  • WordPress Version: inkl. 4.7
  • PHP-Version: inkl. PHP 7

Schritt 3: Folgenden Code kopierst Du in die functions.php Deines Themes:

<?php

/**
 * Registriert ein Editor-Style.css für Dein Theme
 */
function ah_theme_add_editor_styles() {
    add_editor_style( 'css/custom-editor-style.css' );
}
add_action( 'admin_init', 'ah_theme_add_editor_styles' );

Wenn Du jetzt alles richtig gemacht hast, dann gibt Dein neues custom-editor-style.css die wichtigsten Formatierungen Deines Theme auch im Editor aus.

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich stimme zu.