Im Texteditor Überschriften schnell formatieren

WordPress bietet 2 verschiedene Möglichkeiten Inhalte für eine Seite, Beitrag oder einen Custom Post Type (CPT) einzufügen.
Der Visuelle Editor ähnelt in Aussehen und in den Möglichkeiten dem Textverarbeitungsprogramm von Microsoft. Dem Gegenüber steht der klassische Texteditor ohne viel Schnick Schnack. Wer die 2 Variante nutzt ist auf geringfügige HTML Kenntnisse angewiesen. Überschriften müssen in der Standard Einstellung händisch mit den H-Tags eingefügt werden.

Der Texteditor – Vorteile gegenüber der visuellen Ansicht

Die Einfachheit des TinyMce Editors (Visuell) hat auch zu dem Erfolg von WordPress beigetragen. Werden Beispielsweise formatierte Texte mit Tabellen und Code kopiert und eingefügt, werden diese so gut es geht umgewandelt. Die visuelle Variante ist daher eine einfache Methode Text in WordPress zu veröffentlichen.

Ich hingegen nutze ausschließlich den Text Editor und nur in den seltensten Fällen die Visuelle Ansicht von WordPress.
Im Text Editor sehe ich genau welcher Code später auf der Webseite/Blog angezeigt wird. Die Qualität von sogenannten WYSIWYG Editoren, “What you see is what you get”, hat in den letzten Jahren enorm zu genommen. Trotzdem ist in der Qualität zu handgeschrieben Code noch nicht erreicht. Gerade bei der Aussrichtung von Bilder kann es das eine oder andere mal zu Frust kommen.

Zusatz Funktionen des Texteditors

Wer mit dem Texteditor bereits gearbeitet hat wird wissen, dass diese Editor auch einige Funktionen mitbringt. Im abgespeckten Menu finden sich jedoch die wichtigsten Buttons für Medien, Links, Textausrichtung, Listen, More und das Code Tag wieder.

Wer größere Textmengen kopiert und mit HTML auszeichnen möchte finde dazu alle Werkzeuge. Allein die so wichtige Strukturierung von Überschrift ist in der Standard Version nicht vorhanden. Nachdem ich von einigen Seiten Feedback über diese fehlenden Funktion erhalten habe, lautete der schlichte Auftrag “machmal Plugin!”.

Überschriften Strukturieren ohne eigenes Plugin

Da ich ungern das Rad Neuerfinden wollte, habe ich nach einem passenden Plugin für dieses Problem gesucht. Nachdem ich jedoch kein passenden Plugin mit meinen Fragen an die Suchmaschine finden konnte, wollte ich dieses Plugin Programmieren und in das WordPress Repository einstellen.

Bei der Vorbereitung der Programmierung hatte ich die Fragestellungen etwas geändert und fiel buchstäblich über das Plugin “AddQuicktTag” von Frank Bültge.
Damit war die Programmierung beendet und diese Beitrag entstanden.

AddQuicktag – Überschriften und universal Lösung

Mit dem Plugin von Frank Bültge kann nicht nur meine Aufgabestellung erfüllt werden sondern viele andere individuelle Lösungen entstehen. Das Plugin ermöglicht das Hinzufügen von Buttons im WordPress Editor in WordPress selbst. Wer sich mit der Programmieren auskennt wird es zwar nicht brauchen, da die Funktionen alle per eigenem Plugin oder in die Functions.php einzufügen sind. Dieses PLugin ist daher für Endanwender oder Blogger die trotz WordPress Programmierkenntnisse schnell Funktionen in den Editor hinzufügen wollen.

Installation und Konfiguration

Das Plugin AddQuckTag ist frei über WordPress zu erhalten und kann bequem im Backend unter Plugins hinzufügt werden.

Addquicktag unter Einstellungen erschienen
Nach der Installation erscheint
ein weiteres Menu Addquicktag
unter Einstellungen

Nach dem das Plugin heruntergeladen und aktiviert wurde erhalten wir einen neuen Eintrag mit dem Namen “AddQuicktag” unter “Einstellungen”. Nach klick auf den neuen Menupunkt erhalten wir die Möglichkeit indivuduelle Buttons zu definieren und dem Editor hinzuzufügen. Dazu müssen wir nur die Felder “Button Name”, “Start Tag”, “End Tag” und die betreffenden Inhaltstypen definieren.

In meinem Fall habe ich als erstens den Button mit dem Namen “H1” erstellt.
Um die Überschriften richtig zu definieren habe ich bei “Start Tag” das öffenente <h1> Tag genutzt und das schließende </h1> bei “End Tag”. Diesen Button habe ich Post und Page hinzugefügt um auf Seiten und Beiträgen diese Option zu erhalten.

AddQuicktag Button erstellen
So erstellst du einen neuen Button für den Editor – Als Beispiel habe ich die H1 Überschrift genutzt

Meine Lösung des Problems

Nach kurzer Eingabe der Buttons habe ich meine Aufgabestellung erfüllen können. Ich habe jetzt für die Strukturierung von Texten Überschrift von <h1> bis <h4>. Die Überschriften <h5> und <h6> nutze ich so selten das ich diese bei Bedarf händisch eintippe und behalte ein übersichtliches Menu im Editor.

Addquicktag - Überschriften
So sieht nun meine Plugin Konfiguration aus um schnell die Überschriften 1 bis 4 hinzufügen

Meine Lösung zum Import

Das Plugin liefert die Funktionen Import und Export. Damit könnt Ihr eure eigenen Buttons bequem auf mehreren Blogs nutzen oder anderen Leuten zur Verfügung stellen. Um die Schreibarbeit meiner Lösung für euch abzukürzen habe stelle ich meinen Export gern zur Verfügung.

Download: addquicktag-headlines

Diese ZIP Datei einfach herunterladen und entpacken. Die entpackte Datei einfach im Plugin unter Import angeben.

Eigene Editor Buttons per Plugin oder Functions.php

Wer statt dem handlichen Plugin doch selbst Programmieren möchte, findet bei WordPress alles zum Thema QuickTag API um eigene Buttons hinzuzufügen.

Autor: Marcus

Ich bin einer von zwei Geschäftsführern der Conversion Junkies. Zu meinen Themenschwerpunkten gehört das technische SEO, Entwicklungen im E-Commerce und Programmierung von Shopware und WordPress Plugins. Dieses Wissen gebe ich in Schulungen und Consultings gern weiter. Nutzen Sie die Kommentarfunktion für Ihre Fragen. Ich antworte darauf gern. Oder schreiben Sie mir eine E-Mail an marcus@conversion-junkies.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Mit dem Absenden Ihrer Anfrage erklären Sie sich mit der Verarbeitung Ihrer angegebenen Daten zum Zweck der Bearbeitung Ihrer Anfrage einverstanden (Datenschutzbedingungen)