Post navigation

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

WordPress Snippets · · Keine Kommentare

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.

Abonniere meinen Newsletter

Melde Dich für meinen Newsletter "WordPress & Bloggen" an und verpasse keinen Artikel. Als Dankeschön bekommst Du Gratis meine nützliche Checkliste:
»12 Dinge, die Du vor einem Theme-Wechsel beachten solltest«.

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er WooCommerce Shops mit Ladezeiten von unter einer Sekunde. Er ist ebenfalls Autor von drei richtig guten WordPress E-Books.

Schreibe einen Kommentar

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