WordPress Snippets

So einfach: Editor Style CSS für Dein WordPress erstellen

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

Editor Style CSS: 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 Editor Style CSS für den visuellen Editor

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. Am Ende des Beitrags habe ich ein Gist verlinkt.

Editor Style CSS: 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.

Das Editor Style CSS vom Twenty Seventeen Theme

Andreas Hecht

Andreas Hecht

Er 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.

Das könnte auch interessant sein...

Das Perfmatters WordPress Performance Plugin macht dein WordPress raketenschnell

Auch Laien machen Ihre Website damit raketenschnell! Lies den Artikel dazu...

Schreibe einen Kommentar

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

Do NOT follow this link or you will be banned from the site!
Teilen
Teilen