Letzte Woche haben wir dir ein paar allgemeine Tipps rund um WordPress zusammengestellt. Wie versprochen haben wir auch diese Woche ein paar Tipps für dich, diesmal dreht sich alles um den WYSIWYG-Editor von WordPress.
Inhalt
- Editor-Stylesheet aktivieren
- Blockformate definieren
- Formate aktivieren und definieren
- Schriftgrössen & Schriftarten aktivieren und definieren
- Bildausgabe korrigieren
- Geschütztes Leerzeichen beim Einfügen entfernen
- Microdata Attribute erlauben
Alle der folgenden Code-Snippets können im functions.php
des gewünschten Themes hinterlegt werden.
Editor-Stylesheet aktivieren
Die Darstellung innerhalb des WYSIWYG-Editors kann über ein eigenes Stylesheet gesteuert werden, welches jedoch standardmässig nicht hinterlegt ist. Dieses Code-Snippet aktiviert ein editor.css
, welches im css
-Ordner innerhalb des aktiven Themes liegt:
function tinymce_add_editor_styles() {
add_editor_style(get_stylesheet_directory_uri() . '/css/editor.css');
}
add_action('admin_init', 'tinymce_add_editor_styles');
Blockformate definieren
Normalerweise kann man im Blockformat-Auswahlmenü nur zwischen einem normalen Paragraphen und einigen Überschriften wählen. Oft kommt es jedoch vor, dass man einige Überschriften aus dem Menü entfernen oder andere Auswahlmöglichkeiten hinzufügen möchte. Diese Auswahlmöglichkeiten werden als String definiert und bestehen aus Bezeichnung=Tag
Kombinationen, welche durch Semikolon ;
getrennt werden. In dem folgenden Beispiel wird das Menü um ein pre
-Element ergänzt und die Überschrift 1 und 2 fallen weg:
function tinymce_set_block_formats($options) {
$options['block_formats'] = 'Paragraph=p;Pre=pre;Überschrift 3=h3;Überschrift 4=h4';
return $options;
}
add_filter('tiny_mce_before_init', 'tinymce_set_block_formats');
Formate aktivieren und definieren
Oft reichen die Standard-Formate vom WordPress-Editor nicht und man benötigt eigene Definitionen. Diese können ganz einfach definiert werden.
Auswahlmenü aktivieren
Standardmässig ist das Auswahlmenü für Formate jedoch nicht aktiviert. Bevor man also eigene Formate definieren kann, muss dieses Menü aktiviert werden. Das folgende Snippet aktiviert das Menü in der ersten (oder zweiten) Editor-Leiste:
function tinymce_add_style_select($buttons) {
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('mce_buttons','tinymce_add_style_select'); // Erste Editor-Leiste
// add_filter('mce_buttons_2', 'tinymce_add_style_select'); // Zweite Editor-Leiste
Formate definieren
Eigene Formate können einfach als Array-Elemente hinzugefügt werden. Für Formate stehen einige Optionen zur Verfügung:
- title
Der Titel des Formats, welcher im Auswahlmenü angezeigt wird. - inline
Der Name des Inline-Elementes, in welches die aktuelle Auswahl gewrapped werden soll. (z.B.span
) - block
Der Name des Block-Elementes, in welches die aktuelle Auswahl gewrapped werden soll. (z.B.div
) - selector
Ein CSS3 Selektor um das Format auf bestimmte Elemente zu begrenzen. So kann man verhindern, dass alle Formate auf alle Elemente gesetzt werden können. (z.B.div > span
) - classes
Eine Liste mit CSS-Klassen (durch Leerschläge getrennt), welche für dieses Format auf die Elemente gesetzt werden sollen. (z.B.title small red
) - style
Ein Array mit CSS-Properties (Property als Array-Key und Wert als Array-Value), welche für dieses Format auf die Elemente gesetzt werden sollen. (z.B.array( 'background-color' => 'red', 'font-size' => '12px')
) - attributes
Ein Array mit HTML-Attributen (Attribut-Name als Array-Key und Attribut-Wert als Array-Value), welche für dieses Format auf die Elemente gesetzt werden sollen. (z.B.array( 'title' => 'Format Titel', 'data-format' => 'foo')
) - extract
Deaktiviert das Zusammenfügen von ähnlichen Styles. Wenn ein Style z.B. den Text fett macht, der Text jedoch schon fett ist durch ein anderes Format oder den Bold-Button, werden diese standardmässig zusammengeführt. Diese Option deaktiviert dieses Verhalten. - wrapper
Definiert, ob das Format als als Wrapper für ein anderes Block-Element dienen soll oder nicht.
Das folgende Beispiel fügt zwei Formate hinzu. Das erste wrapped die aktuelle Auswahl in ein span
-Element mit der Klasse text-small
. Das zweite Format setzt die Klasse special
auf eine Überschrift, ist jedoch auf h1
begrenzt und lässt sich auf keine anderen Elemente setzen:
function tinymce_add_style_formats($options) {
$style_formats = array(
array(
'title' => 'Text klein',
'inline' => 'span',
'classes' => 'text-small',
'wrapper' => false
),
array(
'title' => 'Spezielle Überschrift',
'block' => 'h1',
'selector' => 'h1',
'classes' => 'special',
'wrapper' => false
)
);
$options['style_formats'] = json_encode($style_formats);
return $options;
}
add_filter('tiny_mce_before_init', 'tinymce_add_style_formats');
Mehr über die Formate kannst du in der offiziellen Dokumentation (englisch) von WordPress nachlesen:
Schriftgrössen & Schriftarten aktivieren und definieren
Wie Formate können auch Schriftgrössen & Schriftarten aktiviert und definiert werden.
Auswahlmenüs aktivieren
Auch die Auswahlmenüs für Schriftgrössen und Schriftarten sind normalerweise nicht aktiviert. Das folgende aktiviert die Menüs in der ersten (oder zweiten) Leiste des Editors:
function tinymce_add_font_selects($buttons) {
array_unshift($buttons, 'fontselect');
array_unshift($buttons, 'fontsizeselect');
return $buttons;
}
add_filter('mce_buttons', 'tinymce_add_font_selects'); // Erste Editor-Leiste
//add_filter('mce_buttons_2', 'tinymce_add_font_selects'); // Zweite Editor-Leiste
Schriftgrössen definieren
Jetzt sind die Auswahlmenüs aktiviert, also können wir eigene Auswahlmöglichkeiten definieren. Das folgende Beispiel überschreibt die Standard-Schriftgrössen mit 10px
, 20px
, 30px
und 40px
:
function tinymce_add_font_sizes($options) {
$options['fontsize_formats'] = "10px 20px 30px 40px";
return $options;
}
add_filter('tiny_mce_before_init', 'tinymce_add_font_sizes');
Schriftarten definieren
Ähnlich funktioniert das Hinzufügen von eigenen Schriftarten. Das folgende Beispiel zeigt Roboto
, Ubuntu
und Arial
(mit alternativen Schriften) im Schriften-Auswahlmenü an. Wie die Block-Formate werden die Schriftarten aus Bezeichnung=Schriftart
Kombinationen definiert, welche durch Semikolon ;
getrennt werden. Die Schriftart ist der Name der Schrift, wie sie vom System vorgegeben wird oder im Editor-Stylesheet definiert wurde und kann auch alternative Schriftarten beinhalten, welche verwendet werden, falls eine der vorherigen nicht existiert:
function tinymce_add_font_formats($options) {
$options['font_formats'] = 'Roboto=roboto;Ubuntu=ubuntu;Arial=arial,helvetica,sans-serif';
return $options;
}
add_filter('tiny_mce_before_init', 'tinymce_add_font_formats');
Bildausgabe korrigieren
Bilder die im WYSIWYG-Editor von WordPress eingefügt werden, werden oft nicht zufriedenstellend in der Front ausgegeben. Die Bilder haben definierte height
und width
-Attribute, was für responsive Webseiten natürlich relativ unnötig ist. Ausserdem werden Bilder mit Bildunterschriften in div
-Elementen ausgegeben, obwohl es sinnvoller ist, die Bilder in figure
-Tags und die Unterschriften in figcaption
anzuzeigen. Das folgende Code-Snippet korrigiert und optimiert die Ausgabe von Editor-Bildern:
function content_images_output($content) {
// Bilddimensionen entfernen
$content = preg_replace('/(width|height)="d*"s/', '', $content);
// <p> um <img> entfernen, da <figure> in <p> nicht erlaubt ist
$content = preg_replace('/(.*?)<p>s*(<img[^<]+?)s*</p>(.*)/im', '$1$2$3', $content);
// Bilder in <figure> wrappen
$content = preg_replace('/(<img[^>]*wp-image-[^>]*>)/im', '<figure>$1</figure>', $content);
// Standard WordPress Bild-Elemente durch <figure> und <figcaption> ersetzen
$content = preg_replace('/<div[^>]*wp-caption[^>]*>(.*?)</div>/im', '<figure>$1</figure>', $content);
$content = preg_replace('/<p[^>]*wp-caption-text[^>]*>(.*?)</p>/im', '<figcaption>$1</figcaption>', $content);
// Doppelte <figure> entfernen
$content = preg_replace('/(<figure[^>]*>.*?)<figure[^>]*>(.*?)</figure>(.*?</figure>)/im', '$1$2$3', $content);
return $content;
}
add_filter('the_content', 'content_images_output', 99);
Das obere Code-Snippet funktioniert jedoch nur für die normalen WYSIWYG-Editoren von WordPress. Wenn man jedoch Editoren von Plugins (z.B. Advanced Custom Fields) im Einsatz hat, muss die Funktion auch noch auf die jeweiligen WYSIWYG-Hooks der gewünschten Plugins angewendet werden. Die folgende Zeile korrigiert die Bildausgabe für Advanced Custom Fields:
add_filter('acf/format_value/type=wysiwyg', 'content_images_output', 99);
Geschütztes Leerzeichen beim Einfügen entfernen
Es kann passieren, dass Text den man in einen WYSIWYG-Editor einfügt, unerwünschte geschützte Leerzeichen (non-breaking spaces) beinhaltet. Die können dazu führen, dass die Zeilenumbrüche in der Front nicht mehr korrekt angezeigt werden, da an den Stellen der geschützten Leerzeichen kein Zeilenumbruch stattfindet. Das folgende Code-Snippet entfernt beim Einfügen alle geschützten Leerzeichen:
function tinymce_remove_nbsp($options) {
$options['paste_auto_cleanup_on_paste'] = true;
$options['paste_postprocess'] = 'function(pl, o) {
o.node.innerHTML = o.node.innerHTML.replace(/( |' . html_entity_decode(' ') . ')/ig, ' ');
}';
return $options;
}
add_filter('tiny_mce_before_init', 'tinymce_remove_nbsp');
Microdata Attribute erlauben
Nicht erlaubte HTML-Tags und Attribute werden beim Speichern oder beim Wechseln der Editor-Ansicht entfernt. Da man jedoch oft den WYSIWYG-Editor dazu verwendet um HTML-Code einzusetzen, kann dies teilweise zu ungewünschten Ausgaben führen. Wenn man zum Beispiel eine Adresse anzeigen und diese mit Microdata auszeichnen will, werden die meisten der Microdata-Attribute (z.B. itemscope
, itemprop
usw.) aus dem HTML-Code entfernt. Es gibt zwei Möglichkeiten wie man verhindern kann, dass solche Attribute gelöscht werden. Die einfachste ist, dass man dem Editor mitteilt, dass er den HTML-Code gar nicht verifizieren soll:
function tinymce_disable_html_verify($options) {
$options['verify_html'] = false;
return $options;
}
add_filter('tiny_mce_before_init', 'tinymce_disable_html_verify');
Der Nachteil dieser Lösung ist jedoch, dass HTML-Fehler nun nicht mehr korrigiert werden.
Die andere Möglichkeit ist, dass man die gewünschten Metadata-Attribute einzeln erlaubt. Dazu muss man jedoch für jeden HTML-Tag einzeln die Attribute definieren und da somit alle vorher erlaubten Attribute (class
, style
usw.) überschrieben werden, muss man diese erneut definieren. In dem folgenden Beispiel werden die Microdata-Attribute für p
, span
und a
Tags erlaubt:
function tinymce_allow_microdata($options) {
if(!isset($options['extended_valid_elements'])) {
$options['extended_valid_elements'] = '';
} else {
$options['extended_valid_elements'] .= ',';
}
// Erlaubte microdata auf <p>
$options['extended_valid_elements'] .= 'p[itemref|itemid|itemscope|itemtype|itemprop|class|style]';
// Erlaubte microdata auf <span>
$options['extended_valid_elements'] .= ',span[itemref|itemid|itemscope|itemtype|itemprop|class|style]';
// Erlaubte microdata auf <a>
$options['extended_valid_elements'] .= ',a[itemref|itemid|itemscope|itemtype|itemprop|href|title|target|class|style]';
return $options;
}
add_filter('tiny_mce_before_init', 'tinymce_allow_microdata');
Dieser Hook kann natürlich für jeden beliebigen HTML-Tag erweitert werden. Nicht vergessen, die Standard-Attribute der Tags erneut zu definieren!
Hooks zusammenfassen
Wie du sicher bemerkt hast, werden die meisten der Tipps in diesem Beitrag über den selben Hook tiny_mce_before_init
definiert. Wenn du also mehrere dieser Snippets verwenden möchtest, kannst du diese sinnvollerweise in einer einzigen Funktion zusammenfassen.
Noch mehr Tipps …
… folgen wieder nächste Woche. Bis dahin stellen wir dir ein paar Tricks rund um die Post-Listen des WordPress-Backends zusammen.
Bei den Microformaten fehlt noch das target-Attribut beim „a“-Tag.
Ansonsten sehr hilfreich. Besten Dank.
Vielen Dank für das Feedback, das target-Attribut wurde jetzt korrekt ergänzt. Freut uns, dass der Beitrag hilfreich ist!