Wie Sie Code auf Ihrer WordPress-Website optimal anzeigen (2024)

Die richtige Darstellung von Code auf Ihrer WordPress-Website ist von entscheidender Bedeutung, insbesondere wenn Sie technische Blog-Beiträge schreiben oder Dokumentationen für Ihre Produkte erstellen. Ihre Benutzer sollten in der Lage sein, Code-Schnipsel einfach zu kopieren und in ihre eigenen Projekte einzufügen. Doch WordPress interpretiert Code-Schnipsel standardmäßig als funktionellen Code und versucht, sie auf Ihrer Website auszuführen, anstatt sie als Text darzustellen. Das kann zu Fehlern führen, wenn Benutzer versuchen, den Code zu verwenden.

Darüber hinaus verwendet WordPress verschiedene Filter als Sicherheitsmaßnahme, um zu verhindern, dass Hacker bösartigen Code in den Content-Editor einfügen und Ihre Website kompromittieren. Glücklicherweise gibt es verschiedene Möglichkeiten, wie Sie Code auf Ihrer WordPress-Website optimal darstellen können. In diesem Artikel werden wir Ihnen diese Methoden im Detail vorstellen.

Methode 1: Code mit dem Standard-Editor in WordPress anzeigen

Diese Methode ist besonders für Anfänger und Benutzer geeignet, die nicht oft Code auf ihren Seiten anzeigen müssen. Folgen Sie einfach diesen Schritten:

  1. Bearbeiten Sie den Blog-Beitrag oder die Seite, auf der Sie den Code anzeigen möchten.
  2. Fügen Sie auf dem Bearbeitungsbildschirm des Beitrags einen neuen Code-Block hinzu.
  3. Geben Sie den Code-Schnipsel in das Textfeld des Blocks ein.
  4. Der Code-Block zeigt eine Vorschau Ihres Codes an.
  5. Speichern Sie Ihren Blog-Beitrag und überprüfen Sie ihn, um den Code-Block in Aktion zu sehen.

Abhängig von Ihrem WordPress-Theme kann der Code-Block unterschiedlich aussehen, aber diese Methode ist ideal für Anfänger.

Methode 2: Code in WordPress mithilfe eines Plugins anzeigen

Wenn Sie regelmäßig Code in Ihren Artikeln anzeigen, empfehlen wir die Verwendung eines WordPress-Plugins wie "SyntaxHighlighter Evolved". Dieses Plugin bietet viele Vorteile gegenüber dem Standard-Code-Block:

  • Es ermöglicht Ihnen, Code in jeder Programmiersprache einfach anzuzeigen.
  • Der Code wird mit Syntaxhervorhebung und Zeilennummern angezeigt.
  • Ihre Benutzer können den Code leicht studieren und kopieren.

Folgen Sie diesen Schritten, um Code mithilfe des Plugins anzuzeigen:

  1. Installieren und aktivieren Sie das Plugin "SyntaxHighlighter Evolved".
  2. Bearbeiten Sie den Blog-Beitrag, in dem Sie den Code anzeigen möchten.
  3. Fügen Sie den "SyntaxHighlighter Code"-Block in Ihren Beitrag ein.
  4. Geben Sie Ihren Code in das Textfeld des Blocks ein.
  5. Wählen Sie die Programmiersprache für Ihren Code aus und konfigurieren Sie die Blockeinstellungen nach Bedarf.
  6. Speichern Sie Ihren Beitrag und überprüfen Sie ihn in der Vorschau, um den Code in Aktion zu sehen.

Dieses Plugin bietet eine Vielzahl von Farbschemata und Themes, die Sie anpassen können, um den Code-Block an das Design Ihrer Website anzupassen.

Methode 3: Code in WordPress manuell anzeigen (ohne Plugin oder Block)

Diese Methode ist für fortgeschrittene Benutzer geeignet und erfordert mehr Arbeit, funktioniert jedoch ohne die Verwendung eines Plugins. Wenn Sie immer noch den alten klassischen WordPress-Editor verwenden und Code ohne ein Plugin anzeigen möchten, befolgen Sie diese Schritte:

  1. Codieren Sie Ihren Code durch ein Online-Tool zur HTML-Entities-Kodierung, um ihn in HTML-Entities zu konvertieren.
  2. Kopieren Sie Ihren Code in den Texteditor und umgeben Sie ihn mit den <pre>- und <code>-Tags.
  3. Ihr Code sieht dann so aus:
<pre><code>&lt;p&gt;&lt;a href=&quot;/home.html&quot;&gt;Dies ist ein Beispiel-Link&lt;/a&gt;&lt;/p&gt;</code></pre>

Speichern Sie Ihren Beitrag und überprüfen Sie ihn in der Vorschau, um den Code in Aktion zu sehen. Ihr Browser wird die HTML-Entities umwandeln, und Benutzer können den korrekten Code sehen und kopieren.

Mit diesen Methoden können Sie Code auf Ihrer WordPress-Website optimal darstellen. Wir hoffen, dass Ihnen dieser Artikel geholfen hat. Wenn Sie weitere Tipps und Tricks für WordPress sowie Möglichkeiten zur Steigerung Ihres Blog-Traffics erfahren möchten, besuchen Sie unsere Website und abonnieren Sie unseren YouTube-Kanal für WordPress-Video-Tutorials. Bleiben Sie auch über Twitter und Facebook mit uns in Kontakt.

Dieser Artikel bietet Ihnen eine umfassende Anleitung zur optimalen Darstellung von Code auf Ihrer WordPress-Website und sollte Ihnen helfen, Ihre Website in den Suchergebnissen von Google zu verbessern.

Wie Sie Code auf Ihrer WordPress-Website optimal anzeigen (2024)

References

Top Articles
Latest Posts
Article information

Author: Greg O'Connell

Last Updated:

Views: 5548

Rating: 4.1 / 5 (42 voted)

Reviews: 89% of readers found this page helpful

Author information

Name: Greg O'Connell

Birthday: 1992-01-10

Address: Suite 517 2436 Jefferey Pass, Shanitaside, UT 27519

Phone: +2614651609714

Job: Education Developer

Hobby: Cooking, Gambling, Pottery, Shooting, Baseball, Singing, Snowboarding

Introduction: My name is Greg O'Connell, I am a delightful, colorful, talented, kind, lively, modern, tender person who loves writing and wants to share my knowledge and understanding with you.