Wie Sie den Code auf Ihrer WordPress-Website anzeigen können

Möchten Sie Code in Ihren WordPress-Blogbeiträgen anzeigen?

Wenn Sie versuchen, Code wie normalen Text einzufügen, wird er von WordPress nicht korrekt angezeigt. Jedes Mal, wenn Sie einen Beitrag speichern, durchläuft WordPress mehrere Bereinigungsfilter. Diese Filter sollen sicherstellen, dass niemand über einen Beitragseditor Code einfügt, um Ihre Website zu hacken.

In diesem Artikel werden wir Ihnen zeigen, wie Sie den Code auf Ihrer WordPress-Website einfach anzeigen können. Wir zeigen Ihnen verschiedene Methoden, und Sie können diejenige auswählen, die Ihren Bedürfnissen am besten entspricht.

Warum Code auf einer WordPress-Website anzeigen?

Wenn Sie Blogbeiträge zu technischen Themen schreiben oder Dokumentationen für Ihre Produkte erstellen, ist die Anzeige von Codeschnipseln sehr nützlich. Ihre Nutzer können das Codestück einfach kopieren und in ihre Website einfügen.

Die Anzeige von Code auf einer WordPress-Website ist jedoch nicht ganz so einfach.

WordPress interpretiert die Snippets als funktionalen Code und versucht, ihn auf Ihrer Website zu implementieren, anstatt ihn als Text anzuzeigen. Außerdem würde es den Code nicht korrekt anzeigen, was zu Fehlern führen würde, wenn Nutzer ihn auf ihrer Website eingeben.

Außerdem verwendet WordPress mehrere Filter als Sicherheitsmaßnahmen. Es filtert den Inhalt, um zu verhindern, dass Hacker bösartigen Code in den Inhaltseditor einspeisen und Ihre Website hacken.

Es gibt jedoch verschiedene Möglichkeiten, wie Sie den Code in WordPress anzeigen können. Sie können auf die Links unten klicken, um zum gewünschten Abschnitt zu springen:

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

Diese Methode wird Anfängern und Benutzern empfohlen, die den Code nicht oft anzeigen müssen.

Bearbeiten Sie einfach den Blogbeitrag oder die Seite, auf der Sie den Code anzeigen möchten. Fügen Sie auf dem Bildschirm des WordPress-Inhaltseditors einen neuen Code-Block zu Ihrem Beitrag hinzu.

Sie können nun den Codeschnipsel in den Textbereich des Blocks eingeben.

Der Codeblock zeigt eine Vorschau auf Ihren Code.

Danach können Sie Ihren Blogbeitrag speichern und eine Vorschau anzeigen, um den Codeblock in Aktion zu sehen.

Sobald Sie mit dem Aussehen Ihres Codes zufrieden sind, können Sie Ihren Blogbeitrag veröffentlichen.

Je nach WordPress-Theme kann der Codeblock auf Ihrer Website anders aussehen.

Methode 2. Code in WordPress mit einem Plugin anzeigen

Bei dieser Methode verwenden wir ein WordPress-Plugin, um Code in Ihren Blogbeiträgen anzuzeigen. Diese Methode wird für Benutzer empfohlen, die häufig Code in ihren Artikeln anzeigen.

Er bietet Ihnen folgende Vorteile gegenüber dem Standard-Codeblock:

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

Zunächst müssen Sie das SyntaxHighlighter Evolved-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie den Blogbeitrag bearbeiten, in dem Sie den Code anzeigen möchten. Fügen Sie auf dem Bearbeitungsbildschirm für den Beitrag den Block „SyntaxHighlighter Code“ zu Ihrem Beitrag hinzu.

Im Beitragseditor wird nun ein neuer Codeblock angezeigt, in den Sie Ihren Code eingeben können.

Nachdem Sie den Code hinzugefügt haben, müssen Sie die Blockeinstellungen in der rechten Spalte auswählen.

Zunächst müssen Sie die Sprache für Ihren Code auswählen, z. B. PHP, CSS, Java usw. Danach können Sie die Zeilennummern deaktivieren, die erste Zeilennummer angeben, eine beliebige Zeile markieren und die Funktion deaktivieren, mit der Links anklickbar sind.

Wenn Sie fertig sind, speichern Sie Ihren Beitrag und klicken Sie auf die Schaltfläche Vorschau, um ihn in Aktion zu sehen.

Das Plugin wird mit einer Reihe von Farbschemata und Themen geliefert.

Um das Farbschema zu ändern, müssen Sie die Seite Einstellungen “ SyntaxHighlighter besuchen.

Auf der Einstellungsseite können Sie ein Farbschema auswählen und die SyntaxHighlighter-Einstellungen ändern.

Sie können Ihre Einstellungen speichern, um eine Vorschau des Codeblocks unten auf der Seite zu sehen.

Verwendung von SyntaxHighlighter mit Classic Editor

Wenn Sie noch den alten, klassischen WordPress-Editor verwenden, können Sie das SyntaxHighlighter-Plugin verwenden, um Code zu Ihren WordPress-Blogbeiträgen hinzuzufügen.

Fügen Sie Ihren Code einfach in eckigen Klammern mit dem Namen der Sprache ein. Wenn Sie zum Beispiel PHP-Code hinzufügen möchten, fügen Sie ihn wie folgt ein:

<?php
private function get_time_tags() {
        $time = get_the_time('d M, Y');
        return $time;
    }
?>

Wenn Sie einen HTML-Code hinzufügen möchten, wickeln Sie ihn wie folgt um den HTML-Shortcode:

<a href="example.com">A sample link</a>

Methode 3. Code in WordPress manuell anzeigen (kein Plugin oder Block)

Diese Methode ist für fortgeschrittene Benutzer geeignet, da sie mehr Arbeit erfordert und nicht immer wie vorgesehen funktioniert.

Er eignet sich für Benutzer, die noch den alten Classic-Editor verwenden und Code ohne ein Plugin anzeigen möchten.

Zunächst müssen Sie Ihren Code durch ein Online-Tool zur Kodierung von HTML-Entities leiten. Damit wird Ihr Code in HTML-Entities umgewandelt, so dass Sie den Code hinzufügen und die WordPress-Bereinigungsfilter umgehen können.

Kopieren Sie nun Ihren Code und fügen Sie ihn in den Texteditor ein, indem Sie ihn in die Tags <pre> und <code> einschließen.

Ihr Code würde wie folgt aussehen:

<pre><code>
&lt;p&gt;&lt;a href=&quot;/home.html&quot;&gt;Dies ist ein Beispiellink&lt;/a&gt;&lt;/p&gt;
</pre></code>

Sie können nun Ihren Beitrag speichern und eine Vorschau des Codes in Aktion sehen.

Ihr Browser wandelt die HTML-Elemente um, und die Benutzer können den korrekten Code sehen und kopieren.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie Code auf Ihrer WordPress-Website einfach anzeigen können. Vielleicht interessieren Sie sich auch für unsere ultimative Liste der beliebtesten WordPress-Tipps, -Tricks und -Hacks und wie Sie Ihren Blog-Traffic erhöhen können.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.