WordPress Tipps #2 – WYSIWYG-Editor

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

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(/(&nbsp;|' . html_entity_decode('&nbsp;') . ')/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.

Andere WordPress Tipps

Schlagwörter:

2 Gedanken zu „WordPress Tipps #2 – WYSIWYG-Editor“

  1. G.

    Bei den Microformaten fehlt noch das target-Attribut beim „a“-Tag.

    Ansonsten sehr hilfreich. Besten Dank.

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.