Eigene WP-Editor Styles

Wer WordPress im Einsatz benutzt, wir evtl. auch schon darüber gestolpert sein, dass ein Artikel, oder eine Seite im Editor des Beitrages ganz anders aussieht, wie auf der Website selbst. Hier werden die Überschriften einfach nur in unterschiedlichen Größen dargestellt und alle Textbreiten, -höhen und -eigenheiten, die es in der Website zu etwas ganz eigenem machen, sind verloren. Schwer, wenn der Verfasser dann auch noch auf Optik achten möchte, die Rolle eines Zeilenumbruchs plötzlich wichtig, die Länge eines Absatzes zu beachten wäre. Im Editor-Modus sieht das alles zunächst mal sehr „bereinigt“ aus und reduziert sich auf ein Minimum an Unterscheidungen.

Im Grunde liegt das an der technischen Notwenigkeit zweierlei CSS-Dateien, die für das DashBoard und s.g. BackEnd ja eine ganze andere Optik vorschreibt, als für das eigene Theme der Website an sich. Während das Backend „technisch clean“ gehalten werden sollte, und eine sehr sachlich nüchterne Optik haben muss, kann es aber auf der Website völlig anders hergehen und dem Designer sind kaum Grenzen gesetzt. Eine styles.css, wie sie im BackEnd (also unter ihreDomain.de/wp-admin) eingesetzt wird, hat also völlig andere Einstellungen, wie die styles.css aus dem eigenen Theme-Ordner.

Unterschiedliche Ansicht in Front- und Backend bei WordPress

Was früher nur sehr umständlich lösbar schien, geht heute (im WordPress 3.x oder höher) dank der s.g. Hooks ziemlich simpel – auch dann, wenn es noch immer „ein wenig“ Grundkenntnisse dazu braucht. Doch, wie gesagt, es sind schon „geringe“ Grundkenntnisse ausreichend, um nun auch im eigenen WordPress-Editor solche wichtigen Eigenschaften, wie z.B. die Standard-Textbreite, den Schriftschnitt (in Font und Größe) an die eigenen Werte anzugleichen und z.B. einen farblichen Hintergrund, passend zu den Schriftfarben einzustellen.

Hier also schnell mal eine „kurze“ Erklärung wie man sich dies auf seinen eigenen WordPress-Seiten einstellen kann …

functions.php

Wie es der Dateiname schon verrät werden einige Funktionen in der s.g. functions.php hinterlegt. Je nach eingesetztem Template ist diese zwar unterschiedlich groß, aber immer an der gleichen Stelle ihrer WordPress-Ordner-Architektur zu finden. Nämlich direkt im ersten Ordner ihres Templates. Um also auf die Datei functions.php des von Ihnen eingesetzten Templates zugreifen zu können, sollten Sie entweder einen FTP Zugriff auf ihre WordPress-Ordner haben, oder eine lokale Kopie dessen, die wir nach unseren Änderungen wieder in den richtige Pfad einkopieren, bzw. hochladen können.

Der richtige Ordner

Grundsätzlich liegen die WordPress-Templates im Unterordner ihreDomain.de/wp-content/themes und sind dann ähnlich der Themenamen bezeichnet. Meistens finden Sie in diesem Theme-Ordner eine ihreDomain.de/wp-content/themes/default und eine ihreDomain.de/wp-content/themes/twentyten und/oder im Unterordner ihreDomain.de/wp-content/themes/twentyeleven. Um nun herauszufinden welcher bei Ihrer WordPress-Installation der richtige Pfad ist, kann man sich eines kleinen Tricks bedienen. Gehen sie auf die gewünschte Website, mit der Maus über eine typische Grafik für Ihr gewähltes Templateund lassen Sie sich mittels der rechten Maustaste entweder „Grafik anzeigen“, oder „Hintergrundgrafik anzeigen“,  oder „Grafikadresse kopieren“ – also den Pfad zu dieser Grafik raussuchen. Für den Blog „mein-wunscherbe.de“ wäre das nach augenblicklichem Stand dann der Pfad http://www.mein-wunscherbe.de/wp-content/themes/fcr01_template/img/headers/header_003.jpg wobei wir nun diesen bis zum …/wp-content/themes/ verfolgen können und dann sehen, dass unser hiesiger /fcr01_template/ heißen muss.

Änderungen/Anhängen

In diesem Ordner befindet sich also nun unsere gesuchte functions.php, die wir zunächst mal darauf untersuchen, ob sich da schon jemand die Mühe und Arbeit gemacht hat -gezielt über diesen Weg- dem Editor zusätzliche CSS-Angaben unterzujubeln.

Haben wir die Datei also (zum Bearbeiten) geöffnet, suchen wir erst mal mittels STRG- (oder auch CTRL-) und „F“ nach der Zeichenfolge: »add_editor_style«. Finden wir einen solchen Eintrag, dann sollte es auch schon eine Datei mit dem Namen »editor-style.css« in diesem Template-Ordner geben und Sie springen bitte direkt weiter zur Abschnittsüberschrift „editor-styles.css“.

Finden wir aber keinen solchen Eintrag (und davon gehe ich mal in den meisten aller Fälle aus), dann springen wir ganz an das Ende der Datei und fügen die folgende PHP-Codezeile hinzu:

add_editor_style();

Ist das erledigt (gefolgt von einem ENTER, RETURN, oder Zeilenumbruch) dann legen wir (ebenfalls im eigenen Template-Pfad) eine neue Datei mit dem Namen »editor-style.css« an.

editor-styles.css

In diese (vermutlich noch leere, neue) CSS tragen Sie nun die Basis-CSS-Werte ein, die Sie zukünftig auch in Ihrem Editor-Fenster umgesetzt haben möchten. An nachfolgendem Beispiel zeige ich Ihnen erst mal eine Artikel-Breite von 640 px , die Sie aber noch auf ihre eigenen Breiten-Wert anpassen sollten.

In diese CSS fügen wir also nun noch den folgenden CSS-Code ein:

html .mceContentBody {
    max-width:640px;
}
* {
    font-family: Georgia, "Bitstream Charter", serif;
    color: #444;
    line-height: 1.5;
}
/* Text elements */
ul {
    list-style: square;
    margin: 0 0 18px -18px;
}
ol {
    list-style: decimal;
    margin: 0 0 18px -18px;
}
strong {
    font-weight: bold;
    color: #000;
}
cite, em, i {
    font-style: italic;
    border:none;
}
big {
    font-size: 131.25%;
}
blockquote {
    font-style: italic;
    padding: 0 3em;
    margin-left: 0;
    margin-right: 0;
}

a:link {
    color:#0066CC;
}
a:visited {
    color:#743399;
}
a:active,
a:hover {
    color: #FF4B33;
}

Sinnigerweise sollte nun in diesen Standard-Vorschlägen die Werte eures eigenen Templates angepasst, oder übernommen werden, die man wiederum im gleichen Pfad wie die functions.php findet und dort unter dem Dateinamen styles.css zu finden ist – zumindest dann, wenn mit Norm-Konformen Templates gearbeitet wird.

In dieser styles.css kann man nun erforschen welche Besonderheiten für Ihr eigenes Template gelten und sich diese nun neu angelgte editor-style.css holen. Soweit zum Basis-Tipp, wie ich ihn im Blog »deluxeblogtips.com« des Freelancers und Webdesigners Tran Ngoc Tuan Anh aus Vietnam gefunden habe und dort im Artikel »Change Editor Style In WordPress 3.0 – Deluxe Blog Tips« nachzulesen ist (wenn auch in englischer Sprache).

Webfonts

Eine kleine Besonderheit kann in den letzten Wochen und Monaten mit zunehmender Wahrscheinlichkeit auch bei Ihnen dazu kommen – nämlich, dass Ihr Template (oder einzelne Passagen darin) mit den s.g. Webfonts arbeitet. Wer also z.B. mit den Webfonts der Google-Webfont-API arbeitet, der muss nochmals in die Datei functions.php wechseln und dort folgende Zeilen anhängen:

add_action( 'hybrid_head', 'my_styles' );
function my_styles() {
wp_enqueue_style( 'google_font_directory', 'http://fonts.googleapis.com/css?family=Reenie+Beanie', false, false, 'screen' );
}

Wie beispielsweise (unter vielen anderem) auch von Graig (User-Nick)  im Blog der themehybrid.com (Quellenangabe) auf eine ähnliche Frage (und schon wieder in englisch 😉 beantwortet.

Das hier noch weit mehr möglich ist, kann man beispielsweise auch im Blog „Darmstädter Filtrat“ auf karrock.de/daf nachlesen, wo der Autor „uk“ unter zur Hilfenahme der Erweiterung TinyMCE Advanced erklärt, wie man sich damit die s.g. Styles im Editor-Fenster erweitern kann. Allerdings ist sein Lösungsansatz mit einem kleinen Schönheitsfehler versehen und würde beim ersten Update dieses Plugins dann auch wieder verloren gehen.

In seinem Beitrag wird nahe gelegt, dass man in der Datei wp-content\plugins\tinymce-advanced\css\tadv-mce.css seine CSS-Anpassungen schreiben könne, die aber im Fall eins Updates durchaus überschrieben werden könnte – aber das müsste ich mir selber erst noch Mal genauer anschauen und sei nur „am Rande“ und „sicherheitshalber“ erwähnt.