Um komfortabel mit WP-Syntax im WordPress-Editor zu arbeiten, habe ich ein Plugin geschrieben, welches jeweils einen Button im visuellen Editor (TinyMCE) und im HTML-Editor hinzufügt. Zuvor hatte ich immer die quicktag.php editiert [1], was aber auf Dauer sehr mühsam war, da man dies bei jedem WordPress Update machen musste. Das Plugin ist ab sofort auf wordpress.org unter http://wordpress.org/extend/plugins/wp-syntax-integration/ [2] verfügbar.
Nutzen kann man das Plugin im visuellen Modus folgendermaßen:
- Den zu hervorhebenden Code schreiben bzw. einfügen
- Den Code markieren
[3] - Auf den Button „Enclose with pre-block of WP-Syntax“ klicken (im Screenshot rot markiert)
[4] - Programmiersprache eingeben. Falls Zeilennummerierung gewünscht ist, durch ein Komma getrennt, die erste Zeilennummer ergänzen
[5] - OK klicken und fertig!
Wichtig: Bei der Eingabe im visuellen Modus werden HTML-Tags entfernt, die von TinyMCE nicht erlaubt werden. Dieses Verhalten lässt sich umgehen, wenn man HTML-Tags nicht im visuellen Modus sondern im HTML-Modus eingibt.
Das Plugin lässt sich auch im HTML-Modus nutzen. Die Vorgehensweise ist prinzipiell gleich:
- Den zu hervorhebenden Code schreiben bzw. einfügen
- Den Code markieren
[3] - Auf den Button „pre (WP-Syntax)“ klicken (im Screenshot rot markiert)
[6] - Programmiersprache eingeben. Falls Zeilennummerierung gewünscht ist, durch ein Komma getrennt, die erste Zeilennummer ergänzen
[5] - OK klicken und fertig!
Ein herzliches Dankeschön an die Programmierer der folgenden Extensions bzw. deren Erläuterungen, die mir sehr weitergeholfen haben:
- How to write a TinyMCE plugin for WordPress [7]
- TinyMCE Valid Elements [8]
- TinyMCE Commands [9]
- Using WP-Syntax and the visual editor [10]
- Adding Quicktags to WordPress [11]
- David’s Ultra Quicktags [12]
- The right way to add custom quicktags [13]
- Unraveling Quicktags for WordPress Plugins [14]
- Escape HTML characters in JavaScript [15]