Code in WordPress-Artikeln richtig darstellen

Einleitung

Darfs ein bisschen Code sein…

Wer öfter in seinem WordPress Blog einen Artikel schreibt, kennt vielleicht das Problem: Ihr möchtet dem Leser ein Stück PHP oder HTML Code im Artikel zeigen, aber leider funktioniert das nicht korrekt. Denn sobald ihr Code eingebt und den Artikel speichert, wandelt WordPress diesen um, da er als ausführbar interpretiert wird. Im Ergebnis sieht der Leser nichts oder nur Fragmente. Wie ihr die korrekte Darstellung von Code in WordPress Artikeln trotzdem hinbekommt, verrate ich euch jetzt.

Plugin oder nicht?

Natürlich gibt es jede Menge WordPress Plugins, die ihr nutzen könnt, um HTML, PHP, CSS oder Javascript Code in Beiträgen richtig darzustellen. Wenn ihr aber nicht riesige Code-Blöcke veröffentlichen möchtet, geht es auch ohne. Ich verwende auf fotobeam.de die hier vorgestellte Methode ohne den Einsatz von Plugins.

HTML, PHP, CSS und Javascript richtig darstellen

Damit das Ganze korrekt funktioniert, müsst ihr die im Code verwendeten Sonderzeichen wie spitze Klammern oder Anführungsstriche umwandeln in sogenannte HTML Entities. Das geschieht nicht automatisch. Hier eine kurze Übersicht der gängigsten HTML Entities.

ursprünglicher Code umgewandelt als HTML Entity
< &lt;
> &gt;
 „ &#34;
 ‚ &#39;
 / &#47;
[ &#91;
] &#93;
& &#38;

Wenn ihr also beispielsweise den <div> Tag mit spitzen Klammern darstellen möchtet, dann müsst ihr &lt;div&gt; im WordPress Editor eingeben. Möchtet ihr einen größeren Code-Block darstellen, könnt ihr auch den <pre> oder <code> Tag benutzen, um die Ausgabe zu formatieren. In diesem Beispiel nutze ich den <code> Tag:

<?php
// Get the sub-header from sub-header.php
get_template_part( 'sub-header' );
?>

Übrigens findet ihr hier die vollständige Übersicht der verfügbaren HTML Entities. Wie eingangs beschrieben, eignet sich die Methode für kurze Code-Schnipsel. Möchtet ihr größere Code-Blöcke in euren Blog-Beiträgen anzeigen, ist das sicher zu kompliziert. Dann kann ein Plugin helfen, den Aufwand zu reduzieren.

In diesem Artikel lernt ihr einfache CSS Änderungen selbst zu machen.

Und falls ihr euch fragt, wie ich oben im Text den Code farblich hervorgehoben habe…dafür eignet sich der <ins> Tag sehr gut. Wenn ihr damit euren darzustellenden Code einschließt, ist er im laufenden Text besser sichtbar. Um also dieses Ergebnis zu erzielen: <div class=“clear“></div> müsst ihr <ins>&lt;div class=“clear“&gt;&lt;div&gt;</ins> eingeben.

Und jetzt viel Spaß beim Ausprobieren!

  • Abonniere den fotobeam Newsletter und erhalte neue Artikel sofort in deine Mailbox!

Wie hat dir der Artikel gefallen?
[Bewertungen: 1 Durchschnitt: 1]
Posted in:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.