Eigene Formatvorlagen für den WordPress Classic Editor (TinyMCE) erstellen

WordPress verwendet im Classic Editor als Eingabemaske zum Bearbeiten von Beiträgen und Seiten den sog. TinyMCE-Editor. TinyMCE bietet bereits in der Standardausführung viele nützliche Textauszeichnungen für die redaktionelle Arbeit. Möchte man den Umfang an verfügbaren Formatierungen um eigene Auszeichnungen ergänzen, bieten WordPress und TinyMCE die Möglichkeit zusätzliche Formatvorlagen zu erstellen und diese in den Editor zu integrieren. Wir zeigen euch in diesem Artikel anhand eines anschaulichen Beispiels, wie ihr den WordPress-Editor um zusätzliche Formatvorlagen erweitert.

WordPress-Editor um Auswahlliste für Formate erweitern

Um dem TinyMCE-Editor weitere Formatvorlagen hinzufügen zu können, müsst ihr dem Editor-Menü zunächst ein neues Select-Feld hinzufügen. Hierzu schreibt ihr folgenden Code in die funktions.php eures Themes oder in ein seitenspezifisches Plugin.

function kb_mce_buttons_2( $buttons ) {
   array_unshift( $buttons, 'styleselect' );
   return $buttons;
}
add_filter( 'mce_buttons_2', 'kb_mce_buttons_2' );

Anschließend erscheint in der zweiten Zeile des TinyMCE-Editors das Auswahlfeld »Formate« mit allen Standard-Formatierungen.

TinyMCE-Editor mit Formaten
TinyMCE-Editor mit »Formats«-Auswahl

Eigene Formatvorlagen zur Liste hinzufügen

Nachdem ihr dem TinyMCE-Menü die »Formate«-Auswahl hinzugefügt habt, könnt ihr den Inhalt der Auswahlliste durch eigene Formate ersetzen. In unserem Beispiel fügen wir folgende drei Formate hinzu:

Erweitert euren oben geschrieben Code dazu um folgende Zeilen:

function kb_mce_before_init_insert_formats( $init_array ) {
   $style_formats = array(
     // Button
     array(
       'title' => 'Button',
       'selector' => 'a',
       'classes' => 'btn',
     ),
     // Textmarkierung
     array(
       'title' => 'Textmarkierung',
       'inline' => 'mark',
     ),
     // Infobox
     array(
       'title' => 'Infobox',
       'block' => 'div',
       'classes' => 'infobox',
       'wrapper' => 'true',
     ),
   );
   $init_array['style_formats'] = json_encode( $style_formats );
   return $init_array; 
}
add_filter( 'tiny_mce_before_init', 'kb_mce_before_init_insert_formats' );

Achtet darauf, das jedes eurer Formate einen Titel (title) hat, damit ihr es später in der Auswahl auch finden könnt. Markiert ihr später im WordPress-Editor einen bestimmten Textabschnitt und wählt anschließend ein Format aus, so wird dieses auf die Auswahl übernommen. Wie bereits beschrieben, haben wir drei Formate hinzugefügt, die alle relevanten Einstellungsmöglichkeiten abdecken. Im Folgenden gehen wir noch einmal im Detail auf die drei Optionen ein.

Wenn ihr mit Hilfe einer Formatvorlage einen Link wie einen Button gestalten möchtet, wählt zunächst mit Hilfe von selector aus, welchen HTML-Elementen die CSS-Klasse (im Beispiel .btn) zugewiesen werden darf. classes legt fest, welche Klasse(n) hinzugefügt werden.

array(
  'title' => 'Button', // Titel in der Formatauswahl
  'selector' => 'a', // Erlaubte HTML-Elemente
  'classes' => 'btn', // hinzugefügte Klasse
),

Beispiel 2: Textmarkierung <mark> hinzufügen

Eine Textmarkierung könnt ihr mit Hilfe des Inline-Elements <mark> erzeugen. Hierzu notiert ihr den Namen des Elements als Wert für den Schlüssel inline. Anschließend wird die Auswahl im WordPress-Editor mit dem angegebenen Element umschlossen.

array(
  'title' => 'Textmarkierung', // Titel in der Formatauswahl
  'inline' => 'mark', // Hinzugefügtes Inline-Element
),

Beispiel 3: Einen markierten Bereich in eine Infobox umwandeln

Wenn ihr einen markierten Textabschnitt mit einem Element umschließen (wrappen) wollt, müsst ihr den Wert von wrapper auf true setzen. Die angegebene Klasse (im Beispiel .infobox) wird nun dem neu erzeugten umschließenden Element zugewiesen. Im Beispiel fügen wir das Block-Element <div> hinzu.

array(
  'title' => 'Infobox', // Titel in der Formatauswahl
  'block' => 'div', // Erzeugtes Block-Element
  'classes' => 'infobox', // Zugewiesene CSS-Klasse
  'wrapper' => 'true', // Die Auswahl wird umschlossen
),
TinyMCE-Editor mit angepasster »Formats«-Auswahl

Styling der zusätzlichen Formate im Editor sichtbar machen

Um das Styling eurer zusätzlichen Formate auch im WordPress-Editor und nicht nur im Frontend sichtbar zu machen, müsst ihr ein eigenes Stylesheet für den Editor einbinden. Einen ausführlichen Artikel dazu findet ihr hier.

Geschrieben von kulturbanause Team

Benutzerbild

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – 15 Kommentare

  1. Antonie
    schrieb am 23.02.2023 um 12:49 Uhr:

    Herzlichen Dank lieber Jonas für die Snippets und die großartige Erläuterung dazu. Innerhalb von Minuten (ohne PHP-Programmierkenntnisse) umgesetzt und auf mein Projekt angepasst. Danke :-))
    Antonie

    Antworten
  2. Friederun Göllner
    schrieb am 14.06.2022 um 08:16 Uhr:

    Hallo Jonas,
    exakt diesen Code hatte ich gesucht. Super, vielen Dank! Nur scheint er in WordPress 6 nicht korrekt zu funktionieren. Das Selectfeld erscheint, die Optionen sind jedoch ausgegraut und lassen sich nicht im Editor anwenden.
    Eigentlich brauchte ich den Code um das Plugin WP Editor Comments Plus zu modifizieren. Der Kunde will in ‚formatselect‘ nur Absatz und h3/h4 auswählen können. Auch hier konnte ich styleselect einfügen, anpassen und sichtbar machen, die options sind aber auch hier ausgegraut und lassen sich nicht anwenden.

    Antworten
    • Jonas Hellwig
      schrieb am 14.06.2022 um 08:38 Uhr:

      Hallo Friederun,
      danke für deinen Kommentar. Wir können das Problem nicht bestätigen. Die TinyMCE-Anpassungen funktionieren bei uns in WP6 mit Classic Editor sowie mit dem TinyMCE innerhalb von ACF. Das von dir beschriebene Problem mit den ausgegrauten Optionen tritt immer dann auf, wenn das Format an ein bestimmtes Markup geknüpft ist. Also wenn du z.B. einen Link wie einen Button stylen möchtest, dann ist die Option ausgegraut, solange du keinen Link im Editor markiert hast. Ich hoffe das hilft dir weiter.

      Antworten
  3. Daniel
    schrieb am 08.03.2021 um 08:30 Uhr:

    Ist zwar schon was älter – dennoch danke für die gute Erklärung, die auch einwandfrei funktioniert, wenn man den Classic Editor noch einsetzt!
    Danke!

    Antworten
  4. bjoern
    schrieb am 07.08.2020 um 09:03 Uhr:

    Super Anleitung. Hat auch alles geklappt. Ich hatte die Anleitung allerdings so verstanden, dass die bereits vorhandenen Formate im MCE dadurch erweitert werden. Bei mir ist das dagegen so, dass die bereits vorhandenen Formate durch die neuen ersetzt werden. Ist es auch möglich sie hinzuzufügen? Oder habe ich was falsch gemacht? Ich verwende WP Version 5.4.2.

    Danke bjoern

    Antworten
  5. Alex
    schrieb am 23.06.2020 um 11:41 Uhr:

    Meine Frage von vorhin hat sich erledigt. Geht!

    Vielen Dank

    Antworten
  6. Alex
    schrieb am 23.06.2020 um 11:00 Uhr:

    Hallo Jonas,

    ich habe das Beispiel 3: „Einen markierten Bereich in eine Infobox umwandeln“,
    statt mit einem div mit einer h1 versucht.

    Also Ziel ist es z.B. zu erhalten.

    Das hat nicht funktioniert. Kann es sein dass es mit nicht möglich ist? Was mache ich falsch.
    Hier noch mein Schnipsel:

    // Format H1
    array(
    ‚title‘ => ‚H1‘,
    ‚block‘ => ‚h1‘,
    ‚classes‘ => ‚ueberschrift‘,
    ‚wrapper‘ => ‚true‘,
    ),

    Antworten
  7. Karl
    schrieb am 16.08.2019 um 18:17 Uhr:

    Hallo Jonas,

    mir ist aufgefallen, dass man einem Element mehrere Formate gleichzeitig zuweisen kann (getestet in WP 5.2.2). In deinem Beispiel kann man also einen Text markieren und ihm erst das Format „Textmarkierung“ und dann noch zusätzlich das Format „Infobox“ zuweisen.

    Weißt du zufällig, ob man das auf ein Format pro Element beschränken kann? So dass man dann entweder „Textmarkierung“ oder „Infobox“ auswählen kann – und nicht beides gleichzeitig.

    Danke + viele Grüße
    Karl

    Antworten
    • Jonas Hellwig
      schrieb am 16.08.2019 um 18:28 Uhr:

      Hallo Karl,
      ehrlich gesagt weiß ich es nicht und müsste recherchieren. Allerdings kann es ja auch durchaus Sinn machen – beispielsweise wenn man einen OOCSS-Ansatz verfolgt, bei dem mehrere Klassen pro Objekt zugewiesen werden müssen/sollen.

      Antworten
  8. Toni Reichen
    schrieb am 12.05.2019 um 14:11 Uhr:

    Guten Tag Jonas
    Vielen Dank für den informativen Artikel.

    ich habe mit TinyMCE advanced verschiedene Tabellen/tables in WordPress erstellt. Kennst Du eine Möglichkeit diese einzeln als Vorlagen zu speichern?
    Die Tabellen sind zum Teil aufwändig mit Fotos usw. und habe etwas Angst sie wieder neu erstellen zu müssen, wenn ich mal einen Fehler mache.

    Für eine Antwort danke ich zu voraus und wünsche Dir eine fröhliche Woche
    Toni

    Antworten
    • Jonas Hellwig
      schrieb am 12.05.2019 um 21:19 Uhr:

      Mit dem neuen Gutenberg-Editor könntest du ggf. Blöcke als „wiederkehrende Blöcke“ abspeichern. Im alten Editor würde ich wahrscheinlich die Tabelle markieren und dann in die Codeansicht wechseln. Dort ist dann der passende Abschnitt markiert. Diesen würde ich mir abspeichern. Über die Codeansicht kannst du die Tabelle dann auch wieder hinzufügen.

      Antworten
  9. Martin Fischer
    schrieb am 07.01.2018 um 18:27 Uhr:

    Guten Abend!
    Ich möchte in meinem Twentyseventeen zwei zusätzliche Absatzformate erstellen, um meine Romanausschnitte sinnvoller darstellen zu können.
    .roman1 TimesNewRoman 12px ohne Erstzeileneinzug und ohne Abstand nach dem Absatz
    .roman2 dito, mit Erstzeileneinzug 1em

    Ich habe es mit obiger Anleitung versucht, bin aber kläglich gescheitert. Sprich, ich konnte es nicht adaptieren.

    Geht das ganz einfach?

    Danke und liebe Grüsse
    Martin

    Antworten
    • Jonas Hellwig
      schrieb am 07.01.2018 um 20:19 Uhr:

      Hallo Martin, das Hinzufügen von Formaten funktioniert exakt wie hier beschrieben. Zusätzlich musst du dann natürlich noch die entsprechenden Styles im CSS ergänzen. Sonst kannst du das Format zwar anwenden, hast aber nicht festgelegt was dann passieren soll.

      Antworten
  10. Stefan K.
    schrieb am 09.11.2017 um 08:49 Uhr:

    Vielen Dank für diesen tollen Tipp. Hochinteressant – das werde ich auf jeden Fall nutzen. Grüße, Stefan K.

    Antworten
  11. Jan
    schrieb am 07.09.2017 um 14:19 Uhr:

    Vielen Dank für den interessanten Beitrag. Mit WordPress kann man viel machen. Man muss sich nur etwas hineinarbeiten.
    Mit besten Grüßen,
    Jan

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →