WordPress – Eigenes CSS für den Editor

Einen Texteditor im Backend eines CMS 1:1 anzupassen ist nach meiner Erfahrung nahezu unmöglich. In TYPO3 lässt sich der RTE sehr gut via YAML Konfiguration anpassen, was einem die Möglichkeit gibt Anweisungen wie etwas die Formatierung von Links usw. anzupassen. In der Tat ist das recht komfortabel, wenn man keine Fehler in der YAML Datei hat. Aber das ist ein anderes Thema.

In WordPress ist es auch möglich Stylesheets des Themes oder gänzlich eigene aufzunehmen. Das kann gerade dann interessant sein, wenn Daten bzw. Inhalte aus eine alten Seite übernommen werden, die CSS Anweisungen beinhalten.

Eine komplett eigene CSS Datei aufnehmen, wie hier im Beispiel das Bootstrap Framework ist leicht realisiert. Hierzu muss folgende Anweisung in die functions.php aufgenommen werden. Wichtig hierbei ist, dass die Angabe es Pfades zu der CSS Datei relativ zum Root Verzeichnis des Theme angegeben wird – bzw. zur functions.php.

// Bootstrap CSS in Backendend Editor

add_action( 'init', 'add_theme_editor_styles' );

function add_theme_editor_styles() {
    add_editor_style( '/resources/bootstrap-5.2.3-dist/css/bootstrap.min.css' );
}

Es ist darüberhinaus auch möglich das Theme eigene CSS einzubinden. Wie eingangs angedeutet ist das auch meiner Erfahrung nicht vollumfänglich möglich und auch nicht notwendig. Möglich ist es dennoch.

// Bootstrap CSS in Backendend Editor

add_action( 'init', 'add_theme_editor_styles' );

function add_theme_editor_styles() {
        add_editor_style( get_stylesheet_uri() );
}

Bei Bedarf können auch mehrere Stylesheets aufgenommen werden.

Verfasst am 02.01.23, durch Jens.