{"id":9749,"date":"2016-01-06T12:22:56","date_gmt":"2016-01-06T11:22:56","guid":{"rendered":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?p=9749"},"modified":"2019-12-24T11:14:37","modified_gmt":"2019-12-24T10:14:37","slug":"echtes-wysiwyg-im-wordpress-editor","status":"publish","type":"post","link":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/echtes-wysiwyg-im-wordpress-editor\/","title":{"rendered":"Echtes WYSIWYG im WordPress-Editor"},"content":{"rendered":"

Willst Du direkt im WordPress-Editor sehen, wie Dein Blog-Post f\u00fcr die Leser aussieht? Mit ein paar Tricks bringst Du WordPress dazu, Text und Formatierungen schon beim Schreiben weitgehend authentisch anzuzeigen.<\/p>\n

<\/p>\n

Die meisten WordPress-Themes verwenden besondere Formatierungen, zum Beispiel f\u00fcr den ersten Absatz eines Beitrags, hervorgehobene Zitate oder attraktiv gestaltete Aufz\u00e4hlungen. Von all dem siehst Du aber beim Schreiben und Bearbeiten Deiner Beitr\u00e4ge nichts.<\/p>\n

\"Im
Im WordPress-Editor (links) sieht Dein Beitrag ganz anders aus als f\u00fcr Deine Leser (rechts).<\/figcaption><\/figure>\n

Um das zu \u00e4ndern, musst Du lediglich ein paar Kleinigkeiten in Deinem WordPress-Theme anpassen: Dann siehst Du schon beim Schreiben beinahe perfekt, wie der Beitrag f\u00fcr den Leser aussehen wird \u2013 also \u201eWYSIWYG\u201c, what you see is what you get.<\/p>\n

Bei solchen Anpassungen ist es sinnvoll, \u00c4nderungen nicht im Original-Theme vorzunehmen, sondern daf\u00fcr ein Child-Theme<\/a> zu nutzen.<\/p>\n

1. CSS-Definitionen aus dem Theme \u00fcbernehmen<\/h2>\n

Zuerst \u00fcbernimmst Du alle Formatierungen Deines Themes f\u00fcr die Darstellung im WordPress-Editor. Meist stehen diese Formatierungen in der Datei style.css<\/em> Deines Themes. F\u00fcr die \u00dcbernahme erg\u00e4nzt Du die functions.php<\/em> Deines (Child-)Themes um folgende Zeilen:<\/p>\n

function custom_editor_styles() {
\n<\/em>  add_editor_style(’style.css‘);
\n<\/em>}
\n<\/em>add_action( ‚admin_init‘, ‚custom_editor_styles‘ );<\/em><\/p>\n

\"Code<\/a>
Ein paar Zeilen in der functions.php gen\u00fcgen, um CSS-Definitionen f\u00fcrs Backend zu \u00fcbernehmen.<\/figcaption><\/figure>\n

Liegt die style.css<\/em> bei Deinem Theme in einem anderen Verzeichnis als die functions.php<\/em> oder hei\u00dft die Datei anders, musst Du den Dateipfad im Code entsprechend anpassen.<\/p>\n

2. CSS-Definitionen speziell f\u00fcrs Backend<\/h2>\n

Allerdings werden damit nicht zwangsl\u00e4ufig alle Formatierungen auf den Beitragstext im Editor angewendet. Denn der Editor zeigt nicht die komplette Website an, sondern lediglich den Teilbereich des eigentlichen Beitragsinhalts. Deshalb fehlen im Editor alle Formatierungen aus \u00fcbergeordneten Elementen, also beispielsweise dem DIV-Element, das den gesamten Content-Bereich umschlie\u00dft.<\/p>\n

Deshalb musst Du solche Formatierungen \u00fcber eine zus\u00e4tzliche CSS-Datei erg\u00e4nzen. Diese Datei legst Du mit beliebigem Namen im gleichen Verzeichnis an wie die style.css<\/em> Deines Themes. F\u00fcr unser Beispiel nennen wir die Datei backend.css<\/em> und binden sie \u2013 wie zuvor die style.css<\/em> \u2013 \u00fcber die functions.php<\/em> mit ein. Du erweiterst also lediglich den eben schon eingef\u00fcgten Code:<\/p>\n

function custom_editor_styles() {
\n<\/em>  <\/em>add_editor_style(’style.css‘);
\n<\/em>  add_editor_style(‚backend.css‘);
\n<\/em>}
\n<\/em>add_action( ‚admin_init‘, ‚custom_editor_styles‘ );<\/em><\/p>\n

\"Code<\/a>
Zus\u00e4tzliche Formatierungen bindest Du \u00fcber eine eigene CSS-Datei f\u00fcrs Backend ein.<\/figcaption><\/figure>\n

3. Grund-Formatierung f\u00fcr die backend.css<\/h2>\n

\u00dcber die backend.css<\/em> entfernst Du zun\u00e4chst den standardm\u00e4\u00dfig grauen Hintergrund im WordPress-Editor und definierst f\u00fcr die bessere Optik einen Abstand des Inhalts zum Rand. Die folgenden CSS-Definitionen kommen in die backend.css<\/em>, so wie auch alle weiteren CSS-Definitionen in den folgenden Schritten.<\/p>\n

\/** Hintergrundfarbe und Randabstand *\/
\n<\/em>#tinymce {
\n<\/em>  background: none;
\n<\/em>  margin: 10px;
\n<\/em>}<\/em><\/p>\n

\"Code<\/a>
Damit es ordentlich aussieht:10 Pixel Randabstand und weg mit dem grauen Hintergrund.<\/figcaption><\/figure>\n

Jetzt hast Du schon einmal einen Teilerfolg und der Beitrag in unserem Beispiel sieht im Editor so aus:<\/p>\n

\"Zwischenergebnis:
Zwischenergebnis: Teile der Formatierungen werden bereits angezeigt.<\/figcaption><\/figure>\n

4. Grunds\u00e4tzliches zum WordPress-Editor<\/h2>\n

Um das weitere Vorgehen besser zu verstehen, ist es wichtig zu wissen, wie der WordPress-Editor funktioniert. Der Editor holt sich den inhaltlichen Teil Deines Blog-Beitrags aus der Datenbank und stellt ihn im Editor quasi als eigene Webseite dar \u2013 n\u00e4mlich in einem Iframe (Inlineframe). Das ist nichts anderes als eine eigenst\u00e4ndige HTML-Datei, die in eine andere HTML-Datei (n\u00e4mlich der Editor-Bereich in WordPress) eingebettet wird.<\/p>\n

Mit Schritt 1 und 2 hast Du zwar alle Formatierungen in dieses Iframe \u00fcbernommen. Ins Leere laufen aber Formatierungen, die von \u00fcbergeordneten Elementen vererbt wurden. Da diese Elemente in dem Iframe nicht vorkommen, k\u00f6nnen sie ihre Formatierungen aber auch nicht vererben.<\/p>\n

Anschaulicher wird das in unserem Beispiel: Der Content-Bereich ist hier von einem DIV-Container mit der Klasse .article-content<\/em> umrahmt. Dort sind Schriftgr\u00f6\u00dfe, Farbe und Textbreite festgelegt, was im Editor keine Auswirkung hat, weil dort eben nur der reine Content \u00fcbernommen wird, aber nicht der \u00fcbergeordnete DIV-Container mit der Klasse .article-content<\/em>.<\/p>\n

\"Browser-Erweiterungen
Browser-Erweiterungen wie beispielsweise Google Chromes Entwicklertools machen sichtbar, wie der Editor von WordPress den Inhalt eines Beitrags mit Hilfe eines Iframes einbettet.<\/figcaption><\/figure>\n

Wie der Screenshot zeigt, ist das \u00fcbergeordnete Element des Blog-Beitrags, den Du bearbeiten willst, nicht mit dem DIV-Container mit der Klasse .article-content<\/em> umgeben, sondern mit einem body-<\/em>Tag mit der ID #tinymce<\/em>.<\/p>\n

Das wird in Schritt 6 noch wichtig. Dort erg\u00e4nzen wir n\u00e4mlich in der backend.css<\/em> diejenigen Formatierungen aus der style.css<\/em>, die aus dem eben genannten Grund nicht greifen.<\/p>\n

5. Exkurs: Die Entwicklertools Deines Webbrowsers<\/h2>\n

Daf\u00fcr ist nun Deine Sp\u00fcrnase gefragt. Denn je nach Theme musst Du unterschiedlich viele Formatierungsanweisungen in der backend.css<\/em> einf\u00fcgen. Vergleiche dazu erst einmal optisch auf der Webseite und im Editor, welche Formatierungen im Editor noch fehlen.<\/p>\n

Mit Hilfe der Entwicklertools Deines Browsers kannst Du identifizieren, woher die jeweilige Formatierung stammt, um sie dann gezielt in der style.css<\/em> zu suchen und angepasst in die backend.css<\/em> zu \u00fcbernehmen. Wie geht das konkret?<\/p>\n

Im Beispiel arbeiten wir mit den Entwicklertools von Google Chrome, aberbeispielsweise auch in Firefox und anderen Browsern gibt es vergleichbare Hilfsmittel.<\/p>\n