Jeder hat seine eigenen Vorstellungen, wie er Beiträge im Blog editieren und erstellen will. WordPress stellt daher auch mehrere Möglichkeiten zur Verfügung. Die wohl meistgenützte Variante ist der interne Editor TinyMCE. Keiner liebt ihn, aber alle verwenden ihn. Aber es gibt einige Tricks, wie du den Editor nach deinen Bedürfnissen tunen kannst. Seit WP 3.9 wurde auf TinyMCE 4 umgestellt, weshalb alte Plugins und Kniffs aus dem Netz kaum mehr funktionieren.
Erklärung vorab !
Artikel dieser Art gibt es viele. Leider sind aber zahllose veraltete Posts im Umlauf und werden immer noch kommentarlos kopiert. Diese Tweaks funktionieren dann einfach nicht. Ein „theme_advanced_blockformats“ oder ein „theme_advanced_buttons1“ funktioniert einfach nicht mehr. Hier findest du eine aktuelle Anleitung (WP 3.9 +).
Dann gibt es noch zahllose Plugins, die einige dieser Funktionen können. Hier gilt aber die Regel, dass man so wenige Plugins wie möglich einsetzen sollte. Plugins sind die perfekte Eintrittspforte für Hacker, fast alle Unsicherheiten bei WordPress entstehen durch Plugins. Lieber also ein paar Minuten mehr investieren und seinen Blog damit sicherer und performanter halten.
Settings Array ändern – Wie geht’s
In dem Verzeichnis, in dem sich dein Theme befindet (./wp-content/themes/dein_theme) sollte eine Datei namens functions.php sein. Falls nicht, so kannst du diese dort einfach erstellen. Hier können verschiedene Einstellungen vorgenommen werden:
Der TinyMCE verwaltet ein Array, in dem die meisten Settings konfiguriert werden können. Dieses Array kann man beliebig ändern. Dazu legt man sich am einfachsten eine Funktion in der functions.php an. Durch ein „add_Filter“ ruft Worpdress diese Funktion auf, übergibt dabei das aktuelle Array. In der Funktion ändert man dieses und gibt es wieder zurück. Fertig.
|
1 2 3 4 5 6 7 |
function my_init_funtion($initArray){ // z.B. Sprachen der Rechtschreibkontrolle ändern $initArray['spellchecker_languages']='+German=de, English=en'; return $initArray; } add_filter('tiny_mce_before_init','my_init_funtion'); |
Das init Array sieht üblicherweise so aus:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
["theme"] => string(6) "modern" ["skin"] => string(9) "lightgray" ["language"] => string(2) "de" ["formats"] => string(606) "{ alignleft: [ {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'left'}}, {selector: 'img,table,dl.wp-caption', classes: 'alignleft'} ], aligncenter: [ {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'center'}}, {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'} ], alignright: [ {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'right'}}, {selector: 'img,table,dl.wp-caption', classes: 'alignright'} ], strikethrough: {inline: 'del'} }" ["relative_urls"] => bool(false) ["remove_script_host"] => bool(false) ["convert_urls"] => bool(false) ["browser_spellcheck"] => bool(true) ["fix_list_elements"] => bool(true) ["entities"] => string(18) "38,amp,60,lt,62,gt" ["entity_encoding"] => string(3) "raw" ["keep_styles"] => bool(false) ["paste_webkit_styles"] => string(28) "font-weight font-style color" ["preview_styles"] => string(75) "font-family font-size font-weight font-style text-decoration text-transform" ["wpeditimage_disable_captions"] => bool(false) ["wpeditimage_html5_captions"] => bool(false) ["plugins"] => string(121) "charmap,hr,media,paste,tabfocus,textcolor,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpview,wpfullscreen" ["content_css"] => string(326) "http://www.homepage.com/wp-includes/css/dashicons.min.css?ver=3.9,http://www.homepage.com/wp-includes/js/mediaelement/mediaelementplayer.min.css?ver=3.9,http://www.homepage.com/wp-includes/js/mediaelement/wp-mediaelement.css?ver=3.9,http://www.homepage.com/wp-includes/js/tinymce/skins/wordpress/wp-content.css?ver=3.9" ["selector"] => string(8) "#content" ["resize"] => bool(false) ["menubar"] => bool(false) ["wpautop"] => bool(true) ["indent"] => bool(false) ["toolbar1"] => string(142) "bold,italic,strikethrough,bullist,numlist,blockquote,hr,alignleft,aligncenter,alignright,link,unlink,wp_more,spellchecker,wp_fullscreen,wp_adv" ["toolbar2"] => string(109) "formatselect,underline,alignjustify,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help" ["toolbar3"] => string(0) "" ["toolbar4"] => string(0) "" ["tabfocus_elements"] => string(29) "insert-media-button,save-post" ["body_class"] => string(61) "content post-type-post post-status-draft post-format-standard" ["add_unload_trigger"] => bool(false) |
Erste Anlaufstelle was die Konfiguration betrifft ist am besten die TinyMCE Doku hier.
Meine Konfiguration
Ich möchte euch noch meine Konfiguration als Ideenquelle vorstellen.
Formate Dropdown
1. Mir ist der Editor standardmäßig zu klein. Vor allem die Höhe. Lässt sich mit einem Setzen von height beheben.
2. Ich mag andere Buttons in der ersten Zeile. Vor allem das Dropdown-Menü zum Wählen der Absatzformate und das Style Menü will ich ganz oben. Das wird in den beiden toolbar Zeilen erledigt.
3. Das erwähnte Dropdown Menü (Formate) bietet zahlreiche Möglichkeiten. Aus SEO, aber auch aus Designgründen macht es z.B. nicht viel Sinn ein h1 Heading zur Verfügung zu stellen. Ich bevorzuge bei meinem Theme nur ein h1 Heading pro Beitrag. Diese steht ganz oben und ist der Titel des Artikels. In diesem Fall also „WordPress 3.9 Editor Tiny MCE tunen“. Im geschriebenen Text sollten dann nur noch h2, h3 und h4 Headings verwendet werden, also möchte ich kein h1 zur Verfügung stellen. Ich verwende auch andere Tags nicht, weshalb ich nur die wichtigsten in dieses Menü gebe. Dies macht vor allem dann Sinn, wenn mehrere Leute an einem Blog arbeiten. Aber auch selber passiert es sonst immer wieder, dass man verschiedene Artikel verschieden designed, was dann inkonsistent wirkt. Notfalls hat man über die Menüzeile (siehe nächster Punkt) oder im html Modus noch alle Formate zur Verfügung. Welche Punkte im Dropdown-Menü erscheinen legt man mit der „block-formats“ Zeile fest. Das alte „theme_advanced_blockformats“ funktioniert ab WP 3.9 nicht mehr.
3. Ich blende mir auch das Menü noch ein. Darin hat man tolle Features wie das Einfügen von Youtube Videos, die Vollbildvariante und die Option „als Text einfügen“ wodurch Formatierungen bei Copy/paste nicht übernommen werden. Dies bewerkstelligt die „menubar“ Zeile.
4. Im Stylemenü (Dropdown) stehen die wichtigsten Styles zur Verfügung. Über die Variable „style-formats“ kann man diese Einträge modifizieren. Es wird ein JSON String verwendet. Diesen kann man sich selber zusammenbasteln, oder man überlässt PHP diese Aufgabe (json_encode). Nachdem mein Theme absichtlich sehr einfach gehalten ist verwende ich auch praktisch keine eigenen Styles. Ich habe aber ein Beispiel eingebaut wie man z.B. „rot und fett“ als eigenen Style verwirklichen kann. Man kann wählen ob man das Style Menü völlig durch eigene Styles ersetzen will, oder ob man es durch die eigenen Styles nur ergänzen möchte. Ich füge mein „rot und fett“ nur dazu.
5. Um das Aussehen des Editors möglichst nahe am Blog zu halten, besteht die Möglichkeit eigene css Dateien für die Darstellung des Editors zu verwenden. Hier könnte man ein css File einfach an den „content-css“ String anhängen. Einfachere Version ist das Aufrufen von add_editor_style();. Dadurch wird automatisch das file editor-style.css aus dem Directory des aktuellen Themes angehängt. Guter Ausgangspunkt ist es das Stylesheet des Themes einfach zu duplizieren und umzubenennen. Dann kann man damit probieren. Hintergrundfarbe, Schriftfarbe etc. einfach „body“ zuweisen. Andere Möglichkeit ist die Variable body_class zu ändern. Hier wird angegeben welche CSS Klassen dem Editor zugewiesen werden sollen.
Andere CSS Anweisungen funktionieren meistens. Will man Google Fonts verwenden, so besteht die Möglichkeit diese als CSS-Stylesheet einzubinden (content_css). Ich verwende z.B. EXO für die Überschriften.
Hier meine Konfiguration in der functions.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function my_init_function($initArray){ $initArray["toolbar1"] = "bold, italic, underline, strikethrough, bullist, numlist, blockquote, hr, alignleft, aligncenter, alignright, link, unlink, wp_more, wp_fullscreen, wp_adv, formatselect, styleselect"; $initArray["toolbar2"] = "alignjustify, forecolor, pastetext, removeformat, charmap, outdent, indent, undo, redo"; $initArray["height"] = 600; $initArray["menubar"] = "format view insert edit"; $initArray["content_css"] .= ", http://fonts.googleapis.com/css?family=Exo:800&subset=latin,latin-ext"; $initArray['block_formats'] = "Absatz=p; Pre=pre; Heading 2=h2; Heading 3=h3; Heading 4=h4, Zitat=blockquote"; // style formats $style_formats = array( array('title' => 'Rot und fett', 'inline' => 'span', 'styles' => array( 'color' => '#dd1111', 'font-weight' => 'bold' ) ) ); $initArray['style_formats_merge'] = true; $initArray['style_formats'] = json_encode( $style_formats ); return $initArray; } add_editor_style(); add_filter('tiny_mce_before_init','my_init_function'); |
Und der daraus resultierende Editor.
HTML als Standardeditor verwenden
Viele geben lieber direkt im HTML Modus ein. So manche Medieneinbettung etc. läuft mit HTML deutlich reibungsloser ab. Tabellen etc. sind in HTML oft schneller erstellt. Auch wenn der TinyMCE deutlich besser geworden ist gebe ich immer noch viele Sachen in HTML ein. Für die echten HTML Freaks lohnt sich dieser Hack in der functions.php
|
1 |
add_filter('wp_default_editor', create_function('', 'return "html";')); |
Damit öffnet sich automatisch immer der HTML Editor.
« Recent Posts ausserhalb eines WordPress Blogs - WordPress Datenbank manuell bearbeiten »
[…] Seit der Wordress Version 3.9 funktionieren meine Änderungen nicht mehr. Ich lasse zwar die Einleitung stehen, verweise aber auf Codefreak. Er hat mich in den Kommentaren auf seinen Blog mit ein Angepasstes Anleitung hingewiesen. […]