Oft gibt es Probleme bei der Darstellung von Code-Beispielen in Beiträgen. Denn der Code soll ja angezeigt und nicht ausgeführt werden. Durch eine einfache Funktion wird über einen Shortcode die Anzeige von Code optimiert.
Werden spitze Klammern in den Visuell-Editor geschrieben, ersetzt Wordpress die Klammern in der Regel automatisch.
Beispiel:
Anzeige im Artikel: <h1>
Anzeige im Text-Editor:
<h1>
Bei anderen Sonderzeichen ist das nicht der Fall.
Um einen Code in einem Artikel von Wordpress anzeigen zu lassen, werden die Sonderzeichen im Text-Editor einfach manuell durch HTML-Entities ersetzt.
Die meist benutzten HTML-Entities für die Darstellung von Code in einem Beitrag.
< = <
> = >
" = "
' = '
/ = /
[ = [
] = ]
Achtung:
Der Tiny-MCE-Editor von Wordpress wandelt einige Sonderzeichen, die für die Code-Anzeige als html-entities in den Text-Editor geschrieben wurden, nach dem Wechseln in den Visuellen Editor wieder um. Der Beitrag muss vorher gespeichert werden.
Bei einem späteren Bearbeiten des Textes, wandelt der Editor ebenfalls die Sonderzeichen wieder um.
Beispiel Shortcode
Will man über einen Shortcode schreiben, der auch im aktuellen Artikel benutzt werden kann, können im Text-Editor die eckigen Klammern mit HTML-Entities ersetzt werden. So wird nicht der Shortcode aufgerufen sondern die eckigen Klammern werden zusammen mit dem Code auf der Wordpress-Seite angezeigt.
Das Funktioniert aber nur, wenn der Artikel sofort gespeichert wird.
Wechselt man zum Visuell-Editor und anschließend wieder zum Text-Editor, sind die eckigen Klammern wieder umgewandelt und nach dem Speichern wird natürlich der Shortcode angewendet.
Das gleiche passiert wenn der Artikel zu einem späteren Zeitpunkt einmal geändert wird.
Die saubere Lösung:
Da es immer wieder zu Problemen bei der Darstellung von Code im Content von Wordpress gibt, habe ich eine kleine Funktion geschrieben, die dieses Problem behebt.
Die folgende Funktion wird einfach in die "functions.php" des Wordpress-Themes eingefügt.
function tec_code_block_shortcode($atts, $content = null) {
$muster = array('/\</','/\>/','/\//','/\[/','/\]/','/\"/','/\'/');
$ers = array('<','>','/','[',']','"',''');
$content = preg_replace($muster, $ers, $content);
return $content;
}
add_shortcode('tec-code-block','tec_code_block_shortcode');
So kann mit einem Kürzel (Shortcode) der Code sauber angezeigt werden, ohne überhaupt noch HTML-Entities benutzen zu müssen, die man meist sowieso nicht auswendig kennt.
Shortcode: [tec-code-block]Hier steht der Code[/tec-code-block]
Die wichtigsten Sonderzeichen werden dadurch automatisch umgewandelt.