Zu lernen, wie man Code in WordPress anzeigt, ist für Blogger/innen und Inhaltsersteller/innen, die ständig Code für ihre Leser/innen online veröffentlichen, sehr wichtig. Computercode ist so konzipiert, dass er im Frontend einer Website etwas anderes darstellt als die Tags, Schrägstriche und Klammern, die du in den eigentlichen Codeschnipseln findest.
Das stellt jedoch ein Problem für diejenigen dar, die über Entwicklung und Design schreiben, denn du brauchst eine Möglichkeit, den Code richtig darzustellen, ohne dass er seine eigentliche Aufgabe erfüllt, wie z. B. das Erstellen einer Schaltfläche oder das Hinzufügen von Styling zu einem Absatzblock.
Einfach ausgedrückt: Wenn du einen Blogbeitrag schreibst und ein Beispiel für einen Codeschnipsel einfügst, solltest du verhindern, dass der Code tatsächlich funktioniert! Auf diese Weise können die Leserinnen und Leser den Code in seiner Rohform sehen, den Code in einem schön formatierten Block betrachten und sogar seinen Inhalt kopieren, um ihn für ihre Entwicklungsarbeit zu verwenden.
In diesem Leitfaden zeigen wir dir genau, wie du Code in WordPress (unabhängig von deinem WordPress-Theme) mit verschiedenen Methoden anzeigen kannst, und wir helfen dir zu entscheiden, welche Methode für deinen Arbeitsablauf am besten geeignet ist.
Was passiert, wenn du regulären Code in WordPress einfügst?
Du fragst dich vielleicht, was passiert, wenn du einen Code in den visuellen Editor von WordPress schreibst. Schließlich hast du weder mit dem Text- noch mit dem Code-Editor zu tun, sollte dein Codeschnipsel also nicht einfach funktionieren?
Wahrscheinlich nicht.
Hier sind einige der ungewöhnlichen Ergebnisse, die auftreten können:
- Der Code wird teilweise angezeigt, wobei Teile des Codes im Frontend des Beitrags zu sehen sind und andere verschwinden. Das sieht für die Besucher unprofessionell aus; es bedeutet, dass dein Code nicht korrekt ist.
- Es wird überhaupt nichts angezeigt, d. h. der Code verschwindet im Backend und wird im Frontend deines Beitrags nicht angezeigt.
- Du siehst eine seltsame Formatierung – oft etwas, das nicht benutzerfreundlich ist oder nicht veröffentlicht werden kann.
- Der Code wird vielleicht nur teilweise angezeigt.
Um einige dieser Ergebnisse zu veranschaulichen, verwenden wir das folgende HTML-Codefragment:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>Dieser Code-Schnipsel verwendet HTML-Stilelemente, um drei grüne Inhaltsblöcke mit Überschriften und Absätzen zu erzeugen.
Wir möchten den rohen Code jedoch in einem Blogpost anzeigen und ihn nicht in diese Blöcke einbauen lassen.
Hier sind die Ergebnisse, wenn wir den Code direkt in den WordPress Gutenberg Block Editor einfügen:
Wie du siehst, versucht WordPress, den Code für seinen Hauptzweck zu nutzen: Inhalte zu generieren – aber es entfernt das Styling des Codes, sodass er nicht das Ergebnis liefert, das wir den Lesern zeigen wollten.
Um solche Situationen zu vermeiden, empfehlen wir dir, stattdessen eine der unten aufgeführten Methoden zur Anzeige von Code zu verwenden.
Wie du Code auf deiner WordPress-Seite anzeigst (6 Methoden)
Diese Methoden sind in der Reihenfolge vom einfachsten bis zum schwierigsten aufgeführt. Außerdem haben wir einige spezielle Methoden für diejenigen, die gerne Code und Inhalte in Markdown-Editoren schreiben (im Gegensatz zu WordPress).
Methode 1: Verwendung des Gutenberg-Blockeditors (Standard)
Um die Anzeige von Code in WordPress zu üben, kannst du den folgenden Codeschnipsel verwenden, der HTML und internes CSS verwendet, um ein einfaches Ergebnis mit einer blauen Überschrift und einem schwarzen Absatz zu erzeugen:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: beige;}
h1 {color: blue;}
p {color: black;}
</style>
</head>
<body>
<h1>Fun Facts About Otters</h1>
<p>A group of otters in water is called a "raft," since they all link arms to prevent from floating away.</p>
</body>
</html>Wenn du den Code in die Tat umsetzt, wird er im Frontend so angezeigt:
In dieser Anleitung erfährst du, wie du den Code selbst anzeigst und nicht das, was der Code im Frontend zeigen soll.
Schritt 1: Hinzufügen eines Code-Blocks in WordPress
Der Gutenberg-Editor von WordPress verfügt bereits über einen eingebauten Code-Block, mit dem du Codeschnipsel anzeigen kannst, ohne dass die Formatierung verloren geht oder der Code tatsächlich aktiviert wird.
Öffne dazu einen Beitrag oder eine Seite in WordPress und klicke auf eine der Schaltflächen Block hinzufügen.
Klicke auf eine der Schaltflächen zum Hinzufügen von Blöcken
Dadurch wird die Sammlung der verfügbaren Blöcke angezeigt. Du kannst nach dem Code-Block suchen oder ein Stichwort wie „Code“ in die Suchleiste eingeben.
Wenn du den Code-Block siehst (mit den Klammer-Symbolen), klickst du darauf, um einen Teil des Codes in den Beitrag einzufügen.
Du solltest jetzt ein Feld mit der Aufforderung „Code schreiben…“ sehen.
Der WordPress Gutenberg-Editor unterstützt Markdown. Du kannst den Code-Block auch finden und einfügen, indem du einen Schrägstrich (/) in den Editor eingibst und dann „C“ oder „Code“ schreibst. WordPress zeigt dann alle relevanten Blöcke an, damit du sie schneller einfügen kannst.
Es ist leicht, den Code-Block und den Custom HTML-Block zu verwechseln. Der Custom-HTML-Block ist jedoch für das Hinzufügen von benutzerdefiniertem HTML zur Darstellung im Frontend gedacht, nicht für das Hinzufügen von Rohcode zur Anzeige.
Schritt 2: Einfügen des Anzeigecodes in das Feld des Codeblocks
Kopiere den Code, den du anzeigen möchtest, und füge ihn in das Feld „Code schreiben…“ ein.
Dein Code erscheint jetzt in dem Feld.
Das Tolle am Code-Block ist, dass er alle Leerzeichen und Tabulatoren beibehält, die du bereits im Code-Snippet hattest. Daher sollte er nicht anders aussehen als der Quelltext, aus dem du ihn kopiert hast.
Schritt 3: Veröffentlichen und Ergebnisse ansehen
Um deinen Code in deinem WordPress-Beitrag oder auf deiner Seite anzuzeigen, klickst du abschließend auf die Schaltfläche Veröffentlichen.
Du kannst dir auch einen Eindruck davon verschaffen, wie es vor der Veröffentlichung aussieht, indem du auf Vorschau klickst.
Sobald du auf die Schaltfläche Veröffentlichen geklickt hast, besuche die Live-Version des Beitrags, um zu überprüfen, ob dein Code-Chunk als Rohcode angezeigt wird.
Wie du siehst, ist der Code-Block ziemlich einfach, aber er bietet die notwendigen Funktionen, um die Formatierung beim Veröffentlichen von Code in Blogbeiträgen beizubehalten.
Sieh dir den folgenden Screenshot an. In unserem Beispiel hat sich nichts am ursprünglichen Codeschnipsel geändert; er wurde lediglich im Frontend in einem grauen Kasten dargestellt.
Schritt 4: Überlege dir eine Formatierung des Codeblocks
Um den Code-Block ein wenig hervorzuheben, solltest du sein Aussehen verändern.
Um die Styling-Optionen für den Block zu sehen, wähle den Code-Block aus und klicke dann auf die Schaltfläche Einstellungen (Zahnradsymbol). Dadurch wird die Registerkarte Block geöffnet, die nur die Blockeinstellungen für den ausgewählten Block – in diesem Fall den Code-Block – anzeigt.
Du kannst den Code-Block nach Belieben gestalten, indem du z. B. die Text- und Hintergrundfarbe änderst.
Das kannst du auch:
- Die Größe des Textes ändern
- Polsterung und Ränder für das Codefeld hinzufügen
- Einen Rahmen mit einer benutzerdefinierten Breite und Farbe einfügen
Wie immer klickst du auf die Schaltfläche Veröffentlichen, wenn du mit der Bearbeitung des Blocks fertig bist, und siehst dir das Ergebnis im Frontend deines WordPress-Beitrags an.
Methode 2: Ein Plugin verwenden
Eine weitere Möglichkeit, Code in WordPress anzuzeigen, ist die Installation eines Plugins.
Diese Methode mag etwas überflüssig erscheinen, da WordPress bereits einen eingebauten Code-Block hat, aber einige Plugins bieten zusätzliche Funktionen und Formatierungswerkzeuge, so dass sich die Arbeit mit einem Plugin lohnt. Kurz gesagt: Du kannst deine Code-Blöcke hübscher gestalten, als du es mit dem standardmäßigen Gutenberg-Code-Block tun würdest.
Außerdem ist es für manche Nutzer des klassischen WordPress-Editors einfacher, mit einem Plugin zu arbeiten, da es etwas schwieriger ist, Code im klassischen Editor darzustellen.
Zunächst musst du ein „Syntax-Highlighter“-Plugin auswählen, was so viel heißt wie, dass das Plugin deinen Quellcode hervorhebt und seine Formatierung beibehält.
Hier sind einige bekannte Plugins für die Anzeige von Code in WordPress:
In diesem Tutorial verwenden wir das Plugin Enlighter, da es neben vielen anderen Styling-Funktionen auch die Möglichkeit bietet, zu markieren, welche Arten von Code du in deinen Codeboxen anzeigst. Du kannst aber auch gerne die anderen Plugins ausprobieren, da sie alle im Wesentlichen das Gleiche tun.
Schritt 1: Installiere ein Syntax Highlighter Plugin
Installiere das Plugin Enlighter – Customizable Syntax Highlighter auf deiner WordPress-Website mit deiner bevorzugten Plugin-Installationsmethode.
Nach der Aktivierung ist das Plugin bereit, Code in jeden Beitrag/jede Seite mit einem Gutenberg-Block oder einem Einfüge-Button im klassischen Editor einzufügen.
Schritt 2: Einfügen des Enlighter-Quellcodeblocks in einen Beitrag
Wenn du den Gutenberg-Block-Editor von WordPress verwendest, öffne einen Beitrag, in dem du den Code anzeigen möchtest. Klicke auf eine der Schaltflächen zum Hinzufügen von Blöcken (+-Symbol), um die Sammlung der verfügbaren Blöcke zu öffnen.
Suche oder gib ein Schlüsselwort für den Enlighten Sourcecode-Block ein. Klicke auf den Block, um ihn in den Beitrag einzufügen.
Schritt 3: Füge den Code in den Syntax-Highlighter-Block ein
Der Enlighter-Highlighter-Block wird dann im Block-Editor angezeigt, mit einem Titel für „Generic Highlighting“ und einem Feld für „Insert Sourcecode…“.
Nimm den Code, den du in WordPress anzeigen möchtest, und füge ihn in das Feld „Quellcode einfügen…“ ein.
Als Syntax-Highlighter behält das Plugin alle Formatierungsoptionen und Tabulatoren bei. Wenn du mit dem Ergebnis zufrieden bist, klicke auf die Schaltfläche Veröffentlichen.
Schritt 4: Vorschau des Codes auf dem Frontend
Jetzt kannst du dir das Frontend deines Beitrags ansehen, um zu sehen, was die Besucher deiner Website sehen.
Das Enlighter-Plugin bietet ein minimalistisches Standardtheme für die Anzeige des Codes mit Zeilennummern, die die Organisation und das Auffinden von Referenzen erleichtern.
Wie wir bereits erwähnt haben, hat die Verwendung eines Plugins zur Anzeige von Code in WordPress Vorteile gegenüber den anderen Methoden. Die Frontend-Version des Enlighter-Syntax-Plugins hebt zum Beispiel Zeilen hervor, wenn der Nutzer über deinen Code scrollt.
Es gibt auch mehrere Schaltflächen in der oberen rechten Ecke des Codefeldes, darunter eine, die den Code im Klartext ohne Zeilennummern anzeigt.
Die zweite Schaltfläche heißt „In die Zwischenablage kopieren“. Sie kopiert den gesamten Code sofort in die Zwischenablage des Nutzers, den er dann in jedes beliebige Programm einfügen kann.
Die dritte Schaltfläche schließlich öffnet den Code in einem neuen Fenster, das ihn in einer reinen Textversion deines Browserfensters darstellt.
Schritt 5: Sprache und Zeileneinstellungen für die Code-Box festlegen
Das Enlighter-Plugin wird mit verschiedenen Themes und leistungsstarken Anpassungswerkzeugen geliefert, mit denen du das Codefeld nach deinen Wünschen gestalten kannst. Wenn du nicht das Standardtheme verwenden möchtest, gehe zurück zu deinem Beitrag in WordPress und klicke auf den aktuell geöffneten Enlighter-Quellcodeblock.
Dadurch wird die Block-Seitenleiste in WordPress angezeigt. Wenn sie nicht angezeigt wird, klicke auf die Schaltfläche Einstellungen (Zahnradsymbol) in der oberen rechten Ecke des WordPress-Fensters.
Die erste Einstellung, die du anpassen musst, ist das Feld Sprache – damit wird dem Plugin mitgeteilt, welche Code-Sprache angezeigt wird, damit es die richtige Formatierung und Hervorhebung anbieten kann.
Es gibt eine ganze Reihe von Codesprachen zur Auswahl, also scrolle durch die Liste und wähle die am besten geeignete aus.
Das Feld Spezialzeilen hebt alle von dir angegebenen Zeilen hervor. Dazu gibst du die Zeilennummern durch Kommas getrennt ein.
Als Ergebnis sehen die Website-Besucher alle Zeilen hervorgehoben, die du angegeben hast.
Mit dem Feld Zeilenversatz kannst du deinen Codeschnipsel an einer bestimmten nummerierten Zeile beginnen. Das ist von Vorteil, wenn du nur einen Teil des Codes anzeigst, der Teil einer größeren Sammlung von Zeilen ist.
Wie du siehst, beginnt die Eingabe von 10 in das Feld Zeilenversatz den gesamten Code an der Nummer 10.
Schritt 6: Wähle ein Theme
Das Theme Enlighter ist das Standardtheme dieses Plugins. Im Feld Theme (immer noch unterhalb des Block-Einstellungsfeldes) findest du jedoch eine große Auswahl an eingebauten Themes, die du auswählen kannst.
Das Godzilla-Theme zum Beispiel zeigt den Code so an, als ob er auf einem Diagramm oder Zeichenpapier stünde.
Und das Atomic-Theme wechselt den Hintergrund zu einem dunklen Theme und bietet hauptsächlich weißen Text und rosa Farbe für Code-Tags.
Ein weiteres Beispiel ist das Classic-Theme, das eine weniger minimalistische Version des Enlighter-Themes mit helleren Farben und klareren Linien ist.
Schritt 7: Erwäge die Erstellung eines eigenen Themes
Das Enlighter-Plugin bietet eine Registerkarte im WordPress-Dashboard, über die du alle Aspekte des Plugins und seine Hervorhebungsfunktionen anpassen kannst.
Um die volle Kontrolle über das Design und die Anzeige deiner Codeboxen zu erhalten, gehst du auf die Registerkarte Enlighter (<> Symbol) und wählst dann Erscheinungsbild oder Theme Customizer.
Auf der Registerkarte „Erscheinungsbild“ kannst du ein Standardthema auswählen und außerdem Elemente wie:
- Code-Einrückung
- Textüberlauf
- Zeilennummerierung
- Zeilenübergangseffekt
- RAW-Code bei Doppelklick
Der Abschnitt Theme Customizer enthält eine lange Liste von Registerkarten, mit denen du ein Code-Highlighter-Theme von Grund auf neu erstellen kannst, mit Optionen zur Anpassung von Schaltflächen, Ausdrücken, Sprachen und mehr.
Bonus: Verwendung von Enlighter mit dem klassischen Editor
Das Enlighter-Plugin funktioniert etwas anders für diejenigen, die noch den klassischen WordPress-Editor verwenden.
Wenn du das Enlighter-Plugin installiert hast, gehst du zu einem beliebigen Beitrag oder einer Seite und suchst im Bedienfeld des Editors die Schaltfläche Enlighter-Code einfügen.
Daraufhin öffnet sich ein neues Fenster mit dem Namen Enlighter Code Insert.
Füge den Code, den du anzeigen möchtest, in das große (unbeschriftete) Feld am unteren Rand ein.
Klicke auf das Dropdown-Menü im Feld Sprache, um die richtige Programmiersprache auszuwählen.
Wenn du fertig bist, klicke auf die Schaltfläche OK. Du kannst auch die anderen Funktionen in diesem Fenster anpassen, z. B. den Zeileneinzug hinzufügen.
Klicke auf die Schaltfläche Veröffentlichen für den Beitrag und sieh dir dann das Ergebnis im Frontend an. Das Standard-Codefeld für den klassischen Editor ist ein dunkles Theme, aber du kannst das Aussehen deines Codefelds ändern und sogar eigene Themes erstellen.
Methode 3: Verwendung eines Encoder-Tools
Encoder-Tools sind eine Alternative, wenn du versuchst, Code in WordPress anzuzeigen, vor allem, wenn du das nicht so oft machen willst (und dich nicht mit einem Plugin herumschlagen willst).
HTML-Encoder bewahren die Integrität von Codeformaten, insbesondere von solchen mit Sonderzeichen und Tabulatoren. Encoder können alle Arten von Code verarbeiten, aber sie übersetzen den eingefügten Code dann in HTML-fähigen Code, der sich leicht in WordPress einfügen lässt.
Es gibt keine zuverlässigen Encoder-Tools als Plugins, aber viele werden als kostenlose Web-Apps von Drittanbietern angeboten. Beachte auch, dass Encoder-Tools keine Styling-Tools bieten, so dass du den Code nur so erhältst, wie er angezeigt werden soll (keine ausgefallenen Boxen oder Funktionen zur Anpassung der Zeilen).
Einige zuverlässige Encoder-Tools sind:
Unsere Tests haben ergeben, dass der W3Docs HTML Encoder der effektivste Encoder ist, deshalb werden wir ihn für dieses Tutorial verwenden.
Schritt 1: Öffne den Encoder und wähle Einstellungen
Gehe auf die W3Docs HTML Encoder Website.
Die Seite zeigt zwei nebeneinander liegende Felder. In das Feld auf der linken Seite fügst du deinen Code ein. Auf der rechten Seite siehst du die kodierte Version, die du kopieren und in WordPress einfügen kannst.
Du musst jedoch zuerst festlegen, welche Art von Code du beibehalten möchtest:
- Wähle JavaScript-Unicode, wenn du Code mit JavaScript-Elementen einfügst.
- Wähle HTML-Symbole, wenn du HTML verwendest.
Schritt 2: Einfügen und zum Kodieren klicken
Füge den Code, den du in WordPress anzeigen möchtest, in das linke Feld ein. Klicke dann auf die Schaltfläche Kodieren oben rechts.
Schritt 3: Kopiere das dekodierte Ergebnis
Das fertige Produkt sieht vielleicht verwirrend aus, aber es ist eigentlich eine Kombination aus HTML-Elementen, die jeden Aspekt des von dir eingefügten Codes beibehält, ohne dass der Code aktiviert wird und etwas anderes im Frontend anzeigt.
Klicke auf die Schaltfläche Kopieren.
Schritt 4: Füge den kodierten HTML-Code in den WordPress Code- oder Texteditor ein
Gehe zurück zu WordPress und öffne den gewünschten Beitrag oder die Seite.
Wähle den Menüpunkt Optionen (drei vertikale Punkte) in der oberen rechten Ecke. Klicke auf die Option Code-Editor.
Du siehst jetzt den Code-Editor und nicht mehr den visuellen Block-Editor. Suche den Bereich, in dem du den Code anzeigen möchtest, und füge dein kodiertes HTML in den Editor ein.
Wenn du den klassischen WordPress-Editor verwendest, musst du auf die Registerkarte Text gehen, die mit dem Code-Editor des Gutenberg-Blockeditors identisch ist.
Schritt 5: Veröffentlichen und Anzeigen des Codes
Klicke auf Aktualisieren oder Veröffentlichen für den Beitrag und navigiere dann zum Frontend des Beitrags, um zu sehen, wie er aussieht.
Du solltest den ursprünglichen Code sehen, der in den Kodierer eingefügt wurde, bevor das Tool HTML-Kodierungselemente hinzugefügt hat. Wie bereits erwähnt, gibt es bei den Encodern keine Styling-Funktionen, daher ist dies eine wunderbare Methode für ein sauberes, minimalistisches Aussehen.
Methode 4: Einen benutzerdefinierten Shortcode verwenden
Wenn du einen benutzerdefinierten Shortcode erstellst, kannst du wiederverwendbare Codebausteine einfügen, ohne sie kopieren und einfügen zu müssen. Deshalb bieten benutzerdefinierte Shortcodes eine gute Möglichkeit, Code in WordPress anzuzeigen.
Hier sind die Vorteile der Verwendung von benutzerdefinierten Shortcodes zur Anzeige von Code:
- Mit benutzerdefinierten Shortcodes kannst du komplizierten Code einmal speichern und dann wiederverwenden, sodass du nicht jedes Mal längere Codeschnipsel eingeben musst.
- Du kannst dein eigenes Styling-CSS für die Code-Highlighter und Boxen schreiben.
- Shortcodes können von jedem verwendet werden, so dass andere Mitwirkende die Vorteile deiner Code-Highlighter und Blöcke mit einem Klick nutzen können.
Die Erstellung eines benutzerdefinierten Shortcodes erfordert Erfahrung in der Bearbeitung von WordPress-Theme-Dateien, in der Arbeit mit PHP-Code und möglicherweise in der Erstellung von WordPress-Plugins. Aufgrund dieser Anforderungen kann die Erstellung eines benutzerdefinierten Shortcodes für WordPress für PHP-Neulinge schwierig sein.
Das fertige Produkt bietet jedoch eine wesentlich einfachere Möglichkeit, Code in WordPress anzuzeigen.
Du kannst den benutzerdefinierten Shortcode benennen, wie du willst, und mehrere Optionen, wie [html] [/html] und [css] [/css], für verschiedene Programmiersprachen erstellen.
Beachte, dass benutzerdefinierte Shortcodes am besten für die Syntaxhervorhebung funktionieren, wenn du den Texteditor (in WordPress Classic) oder das Feld für benutzerdefiniertes HTML verwendest, wenn du mit dem WordPress Gutenberg Block Editor arbeitest.
Das Ziel ist es, einen benutzerdefinierten Shortcode zu erstellen, bei dem du Code zwischen den öffnenden und schließenden Tags des Shortcodes eingeben oder einfügen kannst.
Nach der Veröffentlichung werden die Einstellungen für das Styling und die Hervorhebung deines benutzerdefinierten Shortcodes im Frontend angezeigt. Und der Code, den du hinzugefügt hast, wird in der Syntaxhervorhebung gut angezeigt.
Methode 5:
Die vielleicht älteste – aber immer noch sehr zuverlässige – Methode, Code in WordPress anzuzeigen, ist das Hinzufügen bestimmter HTML-Tags um den Codeschnipsel. Diese Methode ist am besten geeignet, wenn du mit dem klassischen WordPress-Editor oder einem beliebigen HTML-Editor arbeitest.
Es gibt zwei Möglichkeiten:
<code>tags: Am besten für die Anzeige einer kurzen Codezeile; wird oft innerhalb von Absätzen verwendet<pre>tags: Ideal für längere Codeblöcke oder wenn du mehr Formatierungsmöglichkeiten haben möchtest
Option 1: <code> Tags für Inline-Code-Schnipsel verwenden
Autoren, die über Programmierung schreiben, wollen nicht immer große Codeblöcke verwenden. Manchmal ist es sinnvoller, einen kurzen Codeschnipsel in einen Absatz einzufügen.
Trotzdem musst du die Formatierung des Codes hervorheben und beibehalten. Und mancher Code kann zu Problemen mit dem umgebenden Inhalt führen, wenn er nicht richtig erhalten bleibt.
Nehmen wir zum Beispiel den <br> Tag – ohne den <code> Tag würde er einfach einen Umbruch zu deinem Absatz hinzufügen.
Wenn du die Kodierung innerhalb dieser Tags platzierst, wird das Ergebnis viel sauberer:
<code> </code>Öffne dazu einen WordPress-Beitrag und schalte entweder den Code-Editor (für den Gutenberg-Block-Editor) oder den Text-Editor (wenn du WordPress Classic verwendest) ein.
Füge diese Tags irgendwo im Editor ein oder tippe sie ein; füge den Code, den du anzeigen möchtest, noch nicht ein. Füge stattdessen ein Leerzeichen zwischen den Tags ein.
<code> </code>
Wechsle zum visuellen Editor (unabhängig davon, ob du dich in Gutenberg oder im klassischen WordPress befindest).
Du siehst eine kleine graue Lücke innerhalb des visuellen Inhalts. Klicke darauf, um deinen Cursor in diese graue Lücke zu setzen. Hier kannst du den Code für die Anzeige einfügen oder eintippen.
Während du tippst, erweitert sich der graue Bereich, um den Code-Schnipsel aufzunehmen. Klicke auf die Schaltfläche Veröffentlichen oder Aktualisieren für diesen Beitrag.
Im Frontend des Beitrags siehst du jetzt den Code so, wie er sein sollte, und ohne irgendwelche seltsamen Aktivitäten (wie das Hinzufügen eines Umbruchs zu deinem Inhalt).
Die Formatierung dieser <code> Tags ist in der Regel sehr einfach, hängt aber oft von der Gestaltung deines Themes ab. In unserem Beispiel wird zum Beispiel nur die Schriftart geändert, aber kein grauer Hintergrund eingefügt.
Option 2: Verwende <pre> Tags für längere Codeblöcke
Längere Codeschnipsel verdienen eigene Blöcke, die von dem Inhalt, den du in Absätzen schreibst, getrennt sind. Dafür empfehlen wir dir, die <pre> Tags zu verwenden.
Das Hinzufügen eines <pre> Tags ist genauso wie bei den <code> Tags, aber du hast mehr Platz zum Einfügen deines Codes.
Gehe zu einem Beitrag und öffne den Code- (Gutenberg) oder Text-Editor (klassisches WordPress). Füge den Code, den du anzeigen möchtest, ein oder tippe ihn ein. Umgib den Code dann mit diesen Tags:
<pre> </pre>
Wechsle zum visuellen Editor, um zu sehen, wie es aussieht. Du wirst feststellen, dass der Textabschnitt mit dem Label „Preformatted“ versehen ist. Das ist genau das, was der <pre> Tag bewirken soll.
Klicke auf Veröffentlichen oder Aktualisieren und wechsle dann zum Frontend, um deinen Code in seiner ursprünglichen Form zu sehen. Ähnlich wie bei den <code> -Tags sind auch die <pre> -Tags schlecht zu formatieren, so dass du mit dem einfachsten Aussehen dastehst. Es gibt jedoch Möglichkeiten, sie selbst zu formatieren.
Tipps zur Gestaltung von <pre> Tags
Die <pre> Tags sind weniger stabil als die <code> Tags, daher kann es je nach Art des Codes, den du anzeigen willst, zu Schwierigkeiten kommen.
Mit diesen Tipps kannst du das Aussehen verbessern:
- Versuche, Zeilenumbrüche zu entfernen oder ganz zu vermeiden, da das
<pre>Tag diese oft nicht erkennt. Im Allgemeinen reagiert es schlecht auf zu viele Zeilenumbrüche. - Überlege dir, ob du eine
overflow-x:auto;Eigenschaft in dein CSS einfügst, um den Code des<pre>Tags um eine Bildlauffunktion zu erweitern. Dies hilft bei ausufernden Inhalten, da das<pre>Tag selbst deinen Code von der Seite weglaufen lässt. - Verwende einzeilige Schriftarten.
Du kannst auch die Textformatierung und die Box hinter dem Code stilisieren. Hier ist eine erste Vorlage, die du in deine CSS-Datei einfügen kannst:
article pre{
background:#ffffff;
border:3px #eee solid;
border-top:30px #eee solid;
font-family:Consolas, courier;
font-size:0.8em;
white-space:pre;
overflow-x:auto;
}Methode 6: Verwendung eines Markdown-Editors, der mit WordPress verbunden ist
Mit Markdown-Editoren kannst du nicht nur schneller tippen und formatieren, viele von ihnen lassen sich auch direkt mit WordPress verbinden, sodass du deinen Text direkt aus dem Editor heraus veröffentlichen kannst.
Viele Autorinnen und Autoren entscheiden sich für Markdown-Editoren, weil sie so schnell Inhalte erstellen können. Glücklicherweise bieten einige dieser Editoren Markdown für Codeblöcke an, d. h. du kannst den Code im Markdown-Editor anzeigen und ihn dann direkt an WordPress zur Veröffentlichung senden.
Bedenke, dass normale Texteditoren (wie Sublime Text) die Integrität des Codes nicht bewahren, wenn er zur Veröffentlichung in WordPress übertragen wird. Und HTML-Editoren eignen sich zwar hervorragend zum Schreiben und Speichern von Code, bieten aber auch nicht die Hervorhebungsfunktionen, die erforderlich sind, um Code für die Veröffentlichung in WordPress zu erhalten.
Es gibt eine Vielzahl von Markdown-Editoren, aber die idealen Lösungen haben zwei Eigenschaften:
- Direktes Exportieren zu WordPress
- Markdown für Code-Hervorhebung
Du kannst dich aber auch für einen Markdown-Editor mit HTML-Export entscheiden, wenn du den direkten WordPress-Export nicht magst.
Die besten Markdown-Editoren mit beiden Funktionen sind:
Ulysses und ByWord sind Premium-Apps, während Obsidian sowohl eine kostenlose als auch eine Premium-Version hat.
In der folgenden Anleitung verwenden wir Ulysses.
Schritt 1: Hinzufügen eines Longform Code Blocks in Ulysses
Während du ein Dokument in Ulysses erstellst, gibst du " markdown – das sind zwei Apostrophe – ein, wenn du sofort einen Code-Highlighter-Block in das Dokument einfügen möchtest.
Diese Markdown-Methode ist für längere Codeblöcke gedacht. In der Mitte eines Absatzes ist sie nicht verwendbar, du musst also eine neue Zeile erstellen, damit die Markierung aktiviert wird.
Sobald der Code-Highlighter erscheint, kannst du alles, was du willst, eintippen oder einfügen.
Du kannst den Codeblock auch aktivieren, indem du auf den Menüpunkt Markdown (drei horizontale Punkte) klickst und dann die Option Code auswählst.
Nachdem du auf diesen Menüpunkt geklickt hast, erscheint das Feld für den Code-Highlighter an der Stelle, an der sich der Cursor zuletzt befand.
Um Codeschnipsel innerhalb von Absätzen zu platzieren, wendest du dich an die `` markdown (die fast genauso aussieht, aber eigentlich sind es zwei akute/graue Akzente statt Apostrophe).
Schritt 3: Exportieren nach WordPress
Sobald du dein Dokument fertig hast, ist es an der Zeit, alles nach WordPress zu exportieren.
Das Tolle an Markdown-Editoren, die mit WordPress verbunden sind, ist, dass sie die Codeblöcke während der Übertragung beibehalten. Du wirst also schön formatierte Code-Highlighter sehen, die du in WordPress veröffentlichen kannst.
In Ulysses gehst du zum oberen Rand des Dokuments, um die Symbolleiste zu finden. Klicke auf die Schaltfläche Veröffentlichungsvorschau.
Daraufhin wird ein Dropdown-Menü angezeigt, in dem du die Plattform und die Website auswählen kannst, auf der du veröffentlichen möchtest. Du kannst auch die Option „Konten verwalten“ in diesem Menü verwenden, um dich vor dem Export bei einer WordPress-Website anzumelden.
Sobald du die richtige Website ausgewählt hast, klicke auf die Schaltfläche Veröffentlichen.
Gib den Titel des Beitrags, den Zeitplan und alle anderen Informationen ein, die du möchtest, wie Kategorien, Tags und besondere Bilder.
Das Wichtigste ist jedoch, den Status auf „Entwurf“ zu setzen, damit du den Beitrag nicht veröffentlichst, ohne ihn vorher in WordPress zu überprüfen.
Klicke auf OK, um fortzufahren.
Innerhalb weniger Sekunden platziert Ulysses das gesamte Dokument in einem neuen WordPress-Beitrag (möglicherweise musst du dich in deine WordPress-Administration einloggen, wenn das Fenster erscheint).
Du siehst, dass die Codeblöcke bereits konfiguriert und bereit zum Veröffentlichen sind. Klicke auf die Schaltfläche Veröffentlichen, um das Dokument zu veröffentlichen.
Im Frontend siehst du, dass die Inline-Codefragmente und die größeren Codeblöcke schön hervorgehoben sind und die Formatierung des Codes beibehalten wurde.
Zusammenfassung
Es gibt verschiedene Methoden, um Code in WordPress richtig darzustellen, und es hängt oft von dem verwendeten WordPress-Editor, der gewünschten Code-Sprache und der Art und Weise ab, wie du den Code anzeigen und formatieren möchtest. Wenn du dich zum Beispiel für ein Plugin entscheidest, kannst du mit Sicherheit kreativere Formatierungen vornehmen als mit dem Standard-Codeblock im WordPress Gutenberg-Editor.
In diesem Artikel haben wir viele verschiedene Methoden vorgestellt, wie du Code in WordPress anzeigen kannst.
Wir empfehlen dir, mit Methode 1 zu beginnen und dich durchzuarbeiten. Methode 2 eignet sich gut, wenn du nach mehr Styling-Optionen suchst, und die Methoden 3-5 sind nur in bestimmten Situationen nützlich. Methode 6 ist eine Art Bonuslösung für diejenigen, die Markdown-Editoren dem direkten Schreiben in WordPress vorziehen.
Egal, für welche Methode du dich entscheidest, ein zuverlässiger Hosting-Anbieter kann dir helfen, deine Website noch weiter zu verbessern. Die WordPress-Hosting-Lösungen von Kinsta bieten Angebote für Websites aller Formen und Größen. Die benutzerfreundliche Plattform – MyKinsta, ein eigenes Admin-Dashboard – macht die Bearbeitung aller Teile deiner Website und ihrer Dateien zu einem Kinderspiel. Außerdem profitierst du von der erstklassigen Geschwindigkeit, Sicherheit und dem Support von Kinsta.
Hast du schon einmal versucht, Code in WordPress anzuzeigen? Wenn ja, welche Methode hat für dich am besten funktioniert? Lass es uns in den Kommentaren unten wissen.
Schreibe einen Kommentar