So zeigen Sie Code in WordPress an – 3 Methoden (mit und ohne Plugins)

Möchten Sie Code-Bits auf Ihrer Website anzeigen, sind sich aber nicht sicher, wie Sie dies am besten tun? Dieser Beitrag ist für Sie. In dieser Anleitung zeigen wir Ihnen verschiedene Methoden, um Code in WordPress einfach anzuzeigen .

Warum ist es schwierig, Code in WordPress anzuzeigen?

Wenn Sie eine Website haben, auf der Sie nützliche Leitfäden für Ihre Benutzer veröffentlichen, müssen Sie möglicherweise Code-Snippets in Ihren Blog-Beiträgen präsentieren. Die Sache ist, dass es nicht so einfach ist, den Code einzufügen. Wenn Sie beispielsweise ein HTML-Snippet in Ihren Blog-Beitrag einfügen, funktioniert dies nicht. Wie Sie wissen, ist der WordPress-Texteditor ein HTML-basierter Editor, sodass der Code automatisch verarbeitet und gedruckt wird.

Wenn Sie einen Shortcode kopieren und einfügen, zeigt WordPress die Funktion an, anstatt einfach den geschriebenen Shortcode anzuzeigen.

Dies ist nicht ideal, wenn Sie den Code anzeigen möchten, und kann zu einer schlechten Formatierung führen. Wenn Sie beispielsweise über den klassischen WordPress-Editor HTML-Code in Ihren Artikel einbetten möchten, verarbeitet der Editor den Code und zeigt ihn im Inhalt an.

Die beste Möglichkeit, dieses Problem zu beheben, besteht darin, ein spezielles Design für Ihre Codeausschnitte zu verwenden. Und genau das zeigen wir Ihnen in diesem Artikel.

So zeigen Sie Code in WordPress an

Es gibt 3 Hauptmethoden , um Code in WordPress anzuzeigen :

1. Mit dem WordPress-Editor
   1. Gutenberg
   2. Klassischer Editor
2. Verwendung eines speziellen WordPress-Plugins
3. Manuelles Einfügen des Codes

Sehen wir uns die einzelnen Methoden an und zeigen Ihnen Schritt für Schritt, wie Sie Code auf Ihrer Website anzeigen.

1) Mit dem WordPress-Editor

Der einfachste Weg, Code in WordPress anzuzeigen, ist die Verwendung des WordPress-Editors. In diesem Abschnitt zeigen wir Ihnen, wie Sie dies sowohl mit Gutenberg als auch mit dem klassischen Editor tun.

1.1) Gutenberg

Melden Sie sich zunächst bei Ihrer WordPress-Website an und öffnen Sie den Beitrag, in dem Sie den Code anzeigen möchten. Suchen Sie nach einem Block namens Code und wählen Sie ihn aus.

Sie können dort mit dem Schreiben Ihres Codes beginnen und den Beitrag veröffentlichen, wenn Sie fertig sind. Im Frontend sehen Sie den Code.

So können Sie den Gutenberg-Editor verwenden, um Code auf Ihrer Website anzuzeigen.

1.2) Klassischer Editor

Wenn Sie noch den klassischen Editor verwenden, können Sie Codeausschnitte auch anzeigen, indem Sie die Option für vorformatierten Text verwenden. Öffnen Sie zunächst den Beitrag, in den Sie den Code einfügen möchten, mit dem klassischen Editor.

Wählen Sie dann das Code-Snippet und die Option für vorformatierten Text aus der Dropdown-Liste aus.

Sie werden sehen, wie sich der Text ändert. Veröffentlichen Sie dann den Artikel und überprüfen Sie die Seite vom Frontend aus, und Sie sehen den Code in einem benutzerdefinierten Feld, wie unten gezeigt.

Auf diese Weise können Sie beliebigen Code auf Ihrer WordPress-Website anzeigen.

Wie Sie sehen können, ist die Verwendung des WordPress-Editors einfach und unkompliziert. Wenn Sie jedoch mehr Optionen zum Anzeigen verschiedener Codetypen wünschen, benötigen Sie etwas anderes.

2) Anzeigecode mit einem WordPress-Plugin

Eine andere Möglichkeit, Code in WordPress anzuzeigen, ist die Verwendung eines speziellen Plugins. Es gibt viele Möglichkeiten, aber für diese Demonstration verwenden wir ein kostenloses Tool namens SyntaxHighighter Evolved.

Zuerst müssen Sie das Plugin installieren, also gehen Sie nach dem Einloggen auf Ihrer Website zu Plugins > Neu hinzufügen . Suchen Sie nach dem Plug-in „SyntaxHighlighter Evolved“, installieren Sie es und aktivieren Sie es.

Unter dem Abschnitt WordPress-Einstellungen sehen Sie die Konfigurationsoptionen des Plugins.

Auf der Einstellungsseite des Plugins sehen Sie mehrere Anpassungsoptionen:

• Versionskontrolle
• Farbthema
• Bürsten laden
• Sonstig
• Zusätzliche CSS-Klassen
• Startzeilennummer
• Auffüllen der Zeilennummer
• Tab-Größe
• Titel

Wenn Sie ein einfacher Benutzer sind, ist die Standardkonfiguration gut genug, während Sie als fortgeschrittener Benutzer vielleicht einen Blick auf die Einstellungen werfen und sie an Ihre Bedürfnisse anpassen möchten. Nachdem Sie die Einstellungen geändert haben, speichern Sie die Änderungen. Unter dem Abschnitt Live-Vorschau sehen Sie einen Beispielcode mit einem Hervorhebungseffekt.

An dieser Stelle variiert der Prozess je nach verwendetem Editor. Schauen wir uns beide an.

2.1) Gutenberg-Editor

Nach Aktivierung des Plugins sehen Sie im Editor einen neuen Block namens SyntaxHighlighter Code .

Sie können diesen Block verwenden, um verschiedene Arten von Code in Ihren Beiträgen anzuzeigen. Wählen Sie einfach den Block aus und im Einstellungsfeld sehen Sie die Option, die Sprache auszuwählen, die Sie anzeigen möchten. Sie werden sehen, dass es Dutzende von Sprachen gibt, aus denen Sie wählen können.

In diesem Beispiel zeigen wir ein CSS-Code-Snippet an, also wählen wir CSS aus der Dropdown-Liste aus.

Sie können die Codesprache auch im Blockbereich ändern.

Fügen Sie nach Auswahl der Codesprache das Skript in den Block ein.

Darüber hinaus können Sie die Standardeinstellungen des Plugins im Abschnitt „ Erweitert “ im rechten Bereich anpassen und das Design ändern.

Wenn Sie fertig sind, veröffentlichen (oder aktualisieren) Sie den Beitrag und überprüfen Sie den Beitrag im Frontend, um die Ergebnisse anzuzeigen.

Wie Sie im obigen Screenshot sehen können, haben wir den CSS-Code in unserem Beitrag erfolgreich hervorgehoben. Auf diese Weise können Sie jeden gewünschten Code in WordPress anzeigen, indem Sie einfach die richtige Codesprache aus den Blockeinstellungen auswählen.

2.2) Klassischer Editor

Wenn Sie den Gutenberg-Editor nicht verwenden, müssen Sie den Sprachcode manuell eingeben. Um die Syntaxhighlighter-Codes mit dem klassischen Editor anzuzeigen, verwenden wir Shortcodes. Wenn Sie mit Shortcodes nicht vertraut sind, empfehlen wir Ihnen, sich diesen Leitfaden anzusehen.

Öffnen Sie zuerst einen beliebigen Beitrag oder erstellen Sie einen neuen mit dem klassischen Editor. Um beispielsweise HTML-Inhalte anzuzeigen, verwenden Sie den Shortcode [html] [/html] und fügen Sie den Code wie folgt dazwischen ein und veröffentlichen Sie den Beitrag.

[html]
<a href="quadlayers.com">QuadLayer</a>
[/html]

Wenn Sie den Beitrag vom Frontend aus überprüfen, sehen Sie den hervorgehobenen HTML-Code.

Auf diese Weise können Sie die HTML-Einbettungsfunktion verwenden, aber Sie können dasselbe für alle anderen Codesprachen tun. Um beispielsweise ein PHP-Snippet anzuzeigen, verwenden Sie die Shortcodes [php] [/php] , die Shortcodes [css] [/css] zum Anzeigen von CSS und so weiter.

Auf diese Weise können Sie die Shortcodes ändern und beliebige Code-Snippets anzeigen. Lassen Sie uns ein Beispiel für ein PHP-Code-Snippet in einem Artikel anzeigen:

[php]
<?php
?>
[/php]

Wie Sie sehen können, können Sie die Codes ändern und jedes Snippet auf Ihrer WordPress-Site anzeigen.

HINWEIS: Wenn Sie die Schriftart, die Schriftgröße und die Schriftstärke Ihres Codes ändern möchten, müssen Sie eine benutzerdefinierte CSS-Klasse für das Syntaxhighlighter-Plugin hinzufügen. Sie können dies über die Einstellungen des Plugins tun und dann CSS-Code über den WordPress-Customizer oder den Theme-Editor hinzufügen, um ihn anzupassen.

3) Code manuell anzeigen

Wenn Sie über Programmierkenntnisse verfügen, können Sie Code in WordPress manuell anzeigen. Dies ist eine fortgeschrittenere Methode und bietet Ihnen viel Flexibilität. Für diese Demonstration verwenden wir die Tags <pre> und <code> , um Code in einem Beitrag anzuzeigen.

Zuerst müssen Sie ein externes Tool verwenden, um Ihren Text in HTML umzuwandeln. Wir verwenden MotherEff, aber Sie können jeden anderen HTML-Encoder verwenden, den Sie möchten.

Fügen Sie dann Ihr HTML-Snippet in das dekodierte Feld ein und das Tool gibt Ihnen eine kodierte Version.

Für dieses Beispiel lautet unser Code:

 <p><a href="/quadlayers">Besuchen Sie unser Portfolio</a></p>

Und das Tool wandelt es in Folgendes um:

Der Code wird nicht freundlich aussehen, aber er wird die Arbeit erledigen.

Öffnen Sie dann in Ihrem WordPress-Dashboard den Classic-Editor und wechseln Sie zum Texteditor.

Fügen Sie den verschlüsselten Code dort ein, indem Sie die Tags <pre> und <code> öffnen und </code> und </pre> verwenden, um sie zu schließen. Unser Beispielcode sieht beispielsweise so aus:

Veröffentlichen Sie dann den Beitrag und im Frontend sehen Sie den Code wie unten gezeigt hervorgehoben.

Auf diese Weise können Sie Code in jedem WordPress-Beitrag manuell anzeigen.

HINWEIS : Gutenberg-Benutzer können diese Methode nicht verwenden. Dies ist nur mit dem Classic Editor möglich.

Bonus: Wie man Code in einem Absatz anzeigt

Abgesehen von der Anzeige von Code in einem WordPress-Beitrag ist eine weitere interessante Alternative die Anzeige von Code in einem Absatz. In diesem Abschnitt zeigen wir Ihnen, wie es geht. Dazu verwenden wir ein bisschen CSS und HTML.

Zuerst müssen Sie Ihrer Website einen einfachen CSS-Code hinzufügen. Sie können entweder den WordPress-Customizer oder ein seitenspezifisches Plugin wie Code Snippets verwenden. Für diese Demo gehen wir zu Aussehen > Anpassen > Zusätzliches CSS und fügen dort unseren Code ein.

 Code {
 Schriftgröße: 1,2 em;
 Farbe: #1e1e1e;
 Position: relativ;
 Randradius: 4px;
 Hintergrund: #e1e1e1
 } 

Sobald Sie die Änderungen veröffentlicht haben, öffnen Sie jeden Beitrag, den Sie bearbeiten möchten. Wählen Sie dann den Inhalt aus, den Sie hervorheben möchten. Beispielsweise zeigen wir in diesem Absatz den Ausdruck „ Blog starten“ als Code an.

Wechseln Sie zum Texteditor und umschließen Sie den Inhalt mit den Tags <code> und </code> . Nach unserem Beispiel sieht unser Code so aus:

<code>einen Blog starten</code>

Veröffentlichen oder aktualisieren Sie dann die Änderungen und überprüfen Sie das Frontend, um die Änderungen anzuzeigen.

Auf diese Weise können Sie bestimmte Wörter oder Sätze hervorheben. Wenn Sie den CSS-Stil des Codes ändern möchten, können Sie das hier verwendete CSS-Skript bearbeiten.

Fazit

Alles in allem ist das Präsentieren von Code auf Ihrer Website nicht so einfach wie das Einfügen des Skripts. In diesem Leitfaden haben wir Ihnen jedoch verschiedene Methoden zum Anzeigen von Code in WordPress gezeigt:

1. Verwenden des WordPress-Inhaltseditors
2. Mit einem speziellen Plugin
3. Manuell

Wenn Sie eine schnelle und einfache Lösung suchen, bietet Ihnen der WordPress-Inhaltseditor die Tools, um Skripte in jedem Beitrag zu präsentieren. Wenn Sie jedoch mehr Anpassungsoptionen benötigen, ist das SyntaxHighligher Evolved-Plugin die beste Wahl. Auf der anderen Seite können Sie, wenn Sie über Programmierkenntnisse verfügen, Ihre Code-Snippets manuell hinzufügen und das Styling im Frontend mit ein wenig CSS anpassen.

Wenn Sie schließlich bestimmte Sätze oder Wörter in einem Absatz hervorheben möchten, können Sie den Text in die Tags <code> </code> einschließen.

Weitere Informationen zum Bearbeiten von Code auf Ihrer Website finden Sie in der folgenden Anleitung zum Bearbeiten von HTML in WordPress.

Fanden Sie diesen Beitrag hilfreich? Welche Methode bevorzugen Sie, um Code auf Ihrer Website anzuzeigen? Lassen Sie es uns im Kommentarbereich unten wissen.