WordPress Theme erweitern und programmieren
WordPress & Co

Den WordPress-Editor mit weiteren Knöpfen ergänzen

Jetzt bin ich schon einige Zeit genervt, dass ich für bestimmte HTML-Elemente immer auf den Text-Editor umschalten muss. Dass muss sich doch anders lösen lassen? Mit diesem Post hat es endlich ein Ende. Ich musste einfach den WordPress-Editor mit neuen Buttons erweitern. Und jetzt kannst auch du die Elemente code, ins und del direkt im visuellen Editor von WordPress verwenden. Und zusätzlich habe ich noch einen Knopf für den Seitenumbruch eingefügt.

Natürlich geht das nicht ohne Programmieren. Aber es ist eigentlich nicht so schwierig. Auf jeden Fall brauchst du ein Child-Theme, damit du nichts am Original veränderst und immer alle Updates machen kannst. Dann fangen wir an die Datei functions.php des Child-Themes mit den folgenden Code-Blöcken am Ende zu ergänzen.

Einen PageBreak in der 1. Toolbar einfügen

Fangen wir mit dem Bonus an. Es ist nämlich viel leichter den WordPress-Editor mit neuen Buttons erweitern, welche bereits im System integriert sind. Und genau das ist dieser Knopf, der mit dem Namen wp_page eigentlich vorhanden ist aber nicht angezeigt wird.

In der 4. Zeile siehst du wie der Button eingefügt wird. Die 13 welche du dort siehst, sagt das er an die 13. Stelle kommt. Das ist auch so gewollt, denn dadurch steht er direkt hinter dem Weiterlesen-Knopf in der ersten Symbolleiste.
Das es die 1. Smbolleiste ist, wird in der 8. Zeile mit dem Wert mce_buttons festgelegt.

// Button in die 1. Toolbar einfuegen
function tmdn_tinyMCE_AddButtons1($buttons) {
  // nach dem weiterlesen-Tag einen Button fuer Page-Break einfuegen
  array_splice($buttons, 13, 0, 'wp_page');
  return $buttons;
}
//mce_buttons ..... 1. Toolbar
add_filter("mce_buttons", "tmdn_tinyMCE_AddButtons1");

Den WordPress-Editor mit neuen Buttons erweitern

Ja wirklich die Beitragsüberschrift verspricht dieses Mal zu wenig. Wir fügen gleich noch ein paar praktische Buttons in der zweiten Symbolleiste ein. Es sind Knöpfe welche ich dauernd brauche und es nervt mich, dass sie fehlen. Entweder muss ich auf den reinen Text umschalten um die Buttons zu erhalten oder gleich direkt die HTML-Tags im Texteditor ergänzen. Daher mache ich mir und euch ab jetzt das Leben leichter.
Ein paar Buttons können wir einfach so hinzufügen, für ein paar andere müssen wir eine eigene Funktion ergänzen. Aber fangen wir mit dem einfachen Teil an.

Die Buttons für die html-Elemente einfügen

Wir fügen die neuen Buttons in die 2. Symbolleiste ein. Dies erreichen wir mit dem Wert mce_buttons_2 in der Zeile 13. Und damit wir uns das Leben leichter machen, können wir den WordPress-Editor mit neuen Buttons erweitern, in dem wir diese am Ende anfügen. Wir beginnen mit einem Trennstrich in der Zeile 3 und fügen dann einen Knopf für das hoch- und tiefstellen ein.

Dann folgt wieder ein Trennstrich und drei neue Knöpfe. Zuerst verwenden wir wp_code für das code-Element. Ich brauche es immer wieder um Dateinamen oder Befehle auszuzeichnen. In den Zeilen 8 und 9 füge ich eigene Buttons ein. Der erste ergänzt das ins-Element und der zweite das del-Element. Diese werden erst später mit der passenden Funktion versehen.

// Buttons in die 2. Toolbar einfuegen
function tmdn_tinyMCE_AddButtons2($buttons) {
  $buttons[] = '|';                //Abstand
  $buttons[] = 'superscript';      //Hochstellen
  $buttons[] = 'subscript';        //Tiefstellen
  $buttons[] = '|';                //Abstand
  $buttons[] = 'wp_code';          //code-Tag
  $buttons[] = 'tmdn_ins';         //insert-Tag
  $buttons[] = 'tmdn_del';         //delete-Tag
  return $buttons;
}
//mce_buttons_2 ... 2. Toolbar (_3 oder _4)
add_filter("mce_buttons_2", "tmdn_tinyMCE_AddButtons2");

Die Buttons für die html-Elemente mit Funktionen ergänzen

Da einerseits die beiden Knöpfe nicht vorhanden sind müssen wir sie „mühsam“ programmieren. Aber bei beiden HTML-Elementen ist auch noch das Attribut datetime vorgesehen. Damit wird dem Browser/der Suchmaschine mitgeteilt, wann eine Information hinzugefügt (ins) bzw. entfernt (del) wurde.

Dafür speichern wir die aktuelle Zeit in der Variablen $date in der Zeile 4. In der Folgezeile speichern wir JavaScript-Code in der Variablen $setup_function. Diese übergeben wir am Ende an den tinyMCE-Editor (so nennt sich der klassische Editor wirklich) zum Verarbeiten.

Interessant sind für uns die Zeilen 6 und 12. Hier legen wir fest für welchen Button die Funktion gilt. wir verwenden die gleichen Bezeichnungen wie in der vorhergehenden Funktion, eben tmdn_ins und tmdn_del. Dann wird es in den Zeilen 9 und 15 wieder interessant. Hier legen wir fest welche Elemente rund um den markierten Text eingefügt werden. Und auch, dass ein Attribut hinzugefügt werden soll.

// Buttons fuer ins und del erzeugen und mit JS aktivieren
function tmdn_tinyMCE_Settings( $settings ) {
  // aktuelles Datum und Zeit ermitteln
  $date = date('Y-m-d nH:i:s');
  $setup_function = 'function(ed) {
  	ed.addButton("tmdn_ins", {title : "ins-Tag einfügen", text : "ins",
			         onclick : function() {
						ed.focus();
					        ed.selection.setContent("<ins datetime=\''.$date.'\'>" + ed.selection.getContent() + "</ins>");
			                 }
	});
	ed.addButton("tmdn_del", {title : "del-Tag einfügen", text  : "del",
			         onclick : function() {
						ed.focus();
						ed.selection.setContent("<del datetime=\''.$date.'\'>" + ed.selection.getContent() + "</del>");
			                 }
	});
  }';
  // Zeilenumbrueche entfernen, sonst ist das JS defekt
  $settings['setup'] = str_replace( "\n", '', $setup_function );
  return $settings;
}
add_filter( 'tiny_mce_before_init', 'tmdn_tinyMCE_Settings' );
Hinterlasse eine Antwort

Deine eMail-Adresse wird nicht veröffentlicht. Pflichtfelder sind mit * markiert.