{"id":80805,"date":"2020-07-23T13:46:43","date_gmt":"2020-07-23T11:46:43","guid":{"rendered":"https:\/\/strato.de\/blog\/?p=80805"},"modified":"2020-07-23T13:46:46","modified_gmt":"2020-07-23T11:46:46","slug":"gutenberg-tweaks","status":"publish","type":"post","link":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/gutenberg-tweaks\/","title":{"rendered":"Gutenberg-Tweaks: Im WordPress Backend schon die Live-Vorschau erhalten"},"content":{"rendered":"\n

Je individueller das Design Deines Blogs ist, desto st\u00e4rker weicht das Aussehen eines Beitrags im WordPress-Editor von dem ab, was Deine Leser tats\u00e4chlich sehen. Der Workshop zeigt, wie Du den neuen Gutenberg-Editor so anpasst, dass er der Blog-Optik deutlich n\u00e4her kommt.<\/p>\n\n\n\n

WordPress erlaubt, dass Du eigene CSS-Stylesheets f\u00fcrs Backend definierst, sogenannte \u201eEditor Styles\u201c. Damit kannst Du mit ein paar Tricks beispielsweise Schriftarten, Farben, Spaltenbreite und \u00c4hnliches vom Frontend ins Backend \u00fcbernehmen. <\/p>\n\n\n\n

\"\"
Zum Vergleich (von links): das Backend urspr\u00fcnglich, angepasst und im Frontend-Design.
<\/figcaption><\/figure>\n\n\n\n

Editor-Styles haben oft bezahlte Premium-Themes integriert. Setzt Du ein solches Theme ein,  brauchst Du diesen Workshop wahrscheinlich nicht oder kannst Dir zumindest die ersten Schritte zur Einrichtung der Editor Styles sparen.<\/p>\n\n\n\n

Kann Dein Theme Editor Styles,\nnimmst Du die ben\u00f6tigten \u00c4nderungen gleich direkt in der CSS-Datei vor, die f\u00fcr\nden Editor im Backend zust\u00e4ndig ist. Das kann je nach Themen unterschiedlich\nsein. Typischerweise ist die Datei aber im Theme-Hauptverzeichnis oder in einem\nUnterverzeichnis namens css<\/em> oder css\/admin<\/em> abgelegt und hat einen Namen\nwie beispielsweise editor-style.css<\/em>\noder custom-editor-style.css<\/em>. Im\nZweifel ziehst Du die Dokumentation Deines Themes zu Rate.<\/p>\n\n\n\n

Hast Du die passenden Dateien identifiziert,\nkannst Du direkt im Kapitel \u201eBackend-Formatierungen anpassen\u201c weitermachen und\ndie im Folgenden beschriebenen Vorbereitungen auslassen.<\/p>\n\n\n\n

Vorbereitungen<\/h2>\n\n\n\n

Dieser Workshop geht davon aus,\ndass Du mit dem neuen Gutenberg-Editor arbeitest und Dein Theme nicht bereits\neine Vorkonfiguration f\u00fcr Editor-Styles mitbringt.<\/p>\n\n\n\n

Bevor Du Ver\u00e4nderungen an Deinem Theme vornimmst, solltest Du, wenn nicht schon vorhanden, ein Child-Theme anlegen<\/a>. So bleiben die Anpassungen auch beim n\u00e4chsten Theme-Update bestehen.<\/p>\n\n\n\n

Editor Styles in WordPress anlegen<\/h3>\n\n\n\n

In der Datei functions.php<\/em> Deines Child Themes f\u00fcgst Du folgende Zeilen hinzu:<\/p>\n\n\n\n

\/* Editor CSS *\/\n add_theme_support('editor-styles');\n add_editor_style( 'mein-editor-style.css' );\ufeff<\/code><\/pre>\n\n\n\n
Das bindet die Editor Styles in\ndas WordPress-System ein. Im Stammverzeichnis Deines Child-Theme, dort wo Du\nauch die style.css<\/em> findest, legst Du eine\nneue Datei namens mein-editor-style.css<\/em>\nan. Dieser Datei f\u00fcgst Du nun alle CSS-Anweisungen hinzu, die im Beitragseditor\nzur Anwendung kommen sollen.<\/p>\n\n\n\n
Zum Testen, ob alles\nfunktioniert, tr\u00e4gst Du hier beispielsweise ein:<\/p>\n\n\n\n
p { color: red; }\ufeff<\/code><\/pre>\n\n\n\n
Wird der Flie\u00dftext eines Beitrags im Gutenberg-Editor nun in Rot dargestellt, hast Du alles richtig gemacht. <\/p>\n\n\n\n
\"\"
Der Test ist erfolgreich, wenn der Text rot angezeigt wird.<\/figcaption><\/figure>\n\n\n\n
Beachte: Um diese Ver\u00e4nderung im\nGutenberg-Editor zu sehen, musst Du die Seite im Browser komplett neu laden,\nnicht nur den Beitrag speichern. Das funktioniert \u00fcber den Reload-Button des\nBrowsers oder unter Windows mit der Tastenkombination Shift \u2013 F5<\/em>.<\/p>\n\n\n\n
Jetzt kannst an die eigentlichen\nModifikationen gehen. L\u00f6sche dazu nat\u00fcrlich zun\u00e4chst den eben gemachten Test-Eintrag\nwieder \u2013 au\u00dfer Du willst den Text wirklich in Rot sehen.<\/p>\n\n\n\n
Editor-Formatierungen anpassen<\/h2>\n\n\n\n
Es w\u00e4re nat\u00fcrlich sch\u00f6n, wenn Du lediglich\ndie Formatierungsanweisungen aus der style.css<\/em>\nkopieren m\u00fcsstest, in der das Design f\u00fcrs Frontend festgelegt ist. Leider ist das\nso direkt nicht m\u00f6glich, denn der Gutenberg-Editor verwendet andere CSS-Klassen\nals das Frontend.<\/p>\n\n\n\n
Stattdessen gehen wir f\u00fcr jede der\nFormatierungen in drei Schritten vor:<\/p>\n\n\n\n
  1. Ermittle im Frontend die korrekte Formatierung\nf\u00fcr die Elemente, die Du auch im Backend so dargestellt sehen willst \u2013 also vor\nallem \u00dcberschriften und Absatzformate.<\/li>
  2. Identifiziere die entsprechenden Klassen-Namen\nim Backend.<\/li>
  3. F\u00fcge die unter 1. ermittelten\nFormatierungsanweisung mit den in 2. ermittelten Klassennamen in die Editor-Style-Datei\n(in unserem Beispiel: mein-editor-style.css)<\/em>\nein.<\/li><\/ol>\n\n\n\n
    1. Formatierung ermitteln<\/h2>\n\n\n\n
    Um die ben\u00f6tigten\nFormatierungsanweisungen zu ermitteln, nutzen wir die Inspektor-Funktion des\nBrowsers. Google Chrome ist hier ein wenig intuitiver zu nutzen, aber Firefox\nfunktioniert ganz \u00e4hnlich. In diesem Workshop nutzen wir Google Chrome. Den\nInspektor findest Du \u2026<\/p>\n\n\n\n