Sie müssen Code-Schnipsel in verschiedenen WPBeginner-Blogbeiträgen gesehen haben, die wir erstellen, um unseren Lesern bei der Lösung von Problemen zu helfen. Das Anzeigen dieses Codes ist jedoch nicht einfach.
Das liegt daran, dass WordPress Ihren Inhalt jedes Mal, wenn Sie einen Beitrag speichern, durch mehrere Bereinigungsfilter laufen lässt. Diese Filter stellen sicher, dass niemand Code über einen Beitragseditor einschleust, um Ihre Website zu hacken.
In diesem Artikel zeigen wir Ihnen die richtigen Wege, um Code einfach auf Ihrer WordPress-Website anzuzeigen. 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 Code-Snippets wirklich nützlich. Ihre Benutzer können das Code-Snippet einfach kopieren und zu ihrer Website hinzufügen.
Das Anzeigen von Code auf einer WordPress-Website ist jedoch nicht so einfach.
WordPress interpretiert die Snippets als funktionierenden Code und versucht, ihn auf Ihrer Website zu implementieren, anstatt ihn als Text anzuzeigen. Es würde den Code auch nicht korrekt anzeigen, was zu Fehlern führen würde, wenn Benutzer 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 einschleusen und Ihre Website hacken.
Das gesagt, es gibt verschiedene Möglichkeiten, Code in WordPress anzuzeigen. Sie können auf die Links unten klicken, um zu Ihrem bevorzugten Abschnitt zu springen:
Methode 1. Code mit dem Standardeditor in WordPress anzeigen
Diese Methode wird für Anfänger und Benutzer empfohlen, die Code nicht sehr 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 Codeblock zu Ihrem Beitrag hinzu.
Sie können nun den Code-Snippet in den Textbereich des Blocks eingeben.
Der Codeblock zeigt eine Vorschau Ihres Codes an.
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, veröffentlichen Sie Ihren Blogbeitrag.
Abhängig von Ihrem WordPress-Theme kann der Codeblock auf Ihrer Website anders aussehen.
Methode 2. Code in WordPress mit einem Plugin anzeigen
Für diese 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.
Es bietet Ihnen die folgenden Vorteile gegenüber dem Standard-Codeblock:
- Es ermöglicht Ihnen, Code in jeder Programmiersprache einfach anzuzeigen.
- Er zeigt den Code mit Syntaxhervorhebung und Zeilennummern an.
- Ihre Benutzer können den Code leicht studieren und kopieren.
Zuerst müssen Sie das Plugin SyntaxHighlighter Evolved installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie Sie ein WordPress-Plugin installieren.
Nach der Aktivierung können Sie den Blogbeitrag bearbeiten, in dem Sie den Code anzeigen möchten. Fügen Sie auf dem Beitragsbearbeitungsbildschirm den Block 'SyntaxHighlighter Code' zu Ihrem Beitrag hinzu.
Sie sehen nun einen neuen Codeblock im Beitragseditor, in den Sie Ihren Code eingeben können.
Nach dem Hinzufügen des Codes müssen Sie die Blockeinstellungen in der rechten Spalte auswählen.
Zuerst müssen Sie die Sprache für Ihren Code auswählen, wie z. B. PHP, CSS, Java usw. Danach können Sie die Zeilennummern ausschalten, die erste Zeilennummer angeben, beliebige Zeilen hervorheben und die Funktion zum Anklicken von Links deaktivieren.
Wenn Sie fertig sind, speichern Sie Ihren Beitrag und klicken Sie auf die Vorschau-Schaltfläche, um ihn in Aktion zu sehen.
Das Plugin wird mit einer Reihe von Farbschemata und Themes 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 am unteren Rand der Seite anzuzeigen.
SyntaxHighlighter mit dem Classic Editor verwenden
Wenn Sie immer noch den alten klassischen WordPress-Editor verwenden, dann erfahren Sie hier, wie Sie das SyntaxHighlighter-Plugin verwenden, um Code zu Ihren WordPress-Blogbeiträgen hinzuzufügen.
Wickeln Sie Ihren Code einfach in eckige Klammern mit dem Sprachnamen. Wenn Sie beispielsweise PHP-Code hinzufügen möchten, fügen Sie ihn wie folgt hinzu:
<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
Ebenso, wenn Sie HTML-Code hinzufügen möchten, dann umschließen Sie ihn mit dem HTML-Shortcode wie folgt:
<a href="example.com">A sample link</a>
Methode 3. Code manuell in WordPress anzeigen (ohne Plugin oder Block)
Diese Methode ist für fortgeschrittene Benutzer gedacht, da sie mehr Arbeit erfordert und nicht immer wie beabsichtigt funktioniert.
Es eignet sich für Benutzer, die noch den alten Classic editor verwenden und Code ohne Plugin anzeigen möchten.
Zuerst müssen Sie Ihren Code durch ein Online-Tool zum Kodieren von HTML-Entitäten leiten. Dies wandelt Ihre Code-Markup in HTML-Entitäten um, wodurch Sie den Code hinzufügen und die Bereinigungsfilter von WordPress umgehen können.
Kopieren Sie nun Ihren Code und fügen Sie ihn in den Texteditor ein und umschließen Sie ihn mit <pre> und <code> Tags.
Ihr Code würde wie folgt aussehen:
<pre><code>
<p><a href="/home.html">Dies ist ein Beispiel-Link</a></p>
</pre></code>
Sie können nun Ihren Beitrag speichern und den Code in Aktion in der Vorschau anzeigen.
Ihr Browser konvertiert die HTML-Entitäten, und Benutzer können den korrekten Code sehen und kopieren.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Code einfach auf Ihrer WordPress-Website anzeigen können. Möglicherweise möchten Sie auch unseren Leitfaden lesen, wie Sie PHP in WordPress-Beiträgen und -Seiten zulassen, und unsere Expertenauswahl der besten WordPress-Entwicklungstools.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Olaf
Als PHP-Entwickler habe ich einen kleinen Blog, auf dem ich gelegentlich verschiedene Techniken und Arbeitsabläufe für die Programmierung in PHP poste und meine eigenen Snippets teile. Es ist großartig, dass WordPress die Codeanzeige nativ ermöglicht. Ich persönlich verwende jedoch ein Plugin, da ich manchmal den Code so anzeigen muss, dass er in CSS, manchmal in PHP und sehr selten in JavaScript ist. Es ist vorteilhaft, wenn der Code gut formatiert und idealerweise nach Funktion farbcodiert ist usw. Es ist auch hilfreich, eine Kopierfunktion in Betracht zu ziehen, damit Benutzer den gesamten Code-Snippet einfach in ihre Zwischenablage kopieren können. Deshalb bevorzuge ich ein Plugin gegenüber dem Block-Editor.
Dennis Muthomi
Ich finde das Plugin für seine Aufgabe großartig, aber...
Eine Funktion, die ich gerne hinzugefügt sehen würde, ist eine Kopierfunktion.
Derzeit müssen Benutzer den gesamten Codeblock manuell hervorheben und kopieren, was insbesondere bei längeren Snippets mühsam sein kann.
Eine Ein-Klick-Kopieroption würde die Benutzererfahrung erheblich verbessern.
Auf diese Weise könnten Leser den Code einfach übernehmen, ohne versehentlich Teile davon zu verpassen, wenn sie den Code hervorheben.
WPBeginner Support
Thank you for sharing that recommendation
Admin
Jiří Vaněk
Gibt es die Möglichkeit, eine Schaltfläche zum Kopieren des Codes im Plugin zu haben, damit der Benutzer den Code nicht manuell in die Zwischenablage kopieren muss?
WPBeginner Support
Not at the moment but we will keep an eye out for a method we would recommend
Admin
Jiří Vaněk
Vielen Dank für die Antwort. Das ist eine große Schande, denn es erleichtert viel Arbeit. Manchmal passiert es, dass sogar Zeilennummern mit der manuellen Methode in den Code kopiert werden. Elementor hat ein Widget für den Code, das die Kopierschaltfläche hat, und das ist großartig. Ich werde das Update des Artikels bei Bedarf verfolgen.
Ms Gray
Hallo,
Kann Code auf Seiten eingefügt werden, die von Drittanbieter-Plugins wie Woocommerce hinzugefügt wurden?
WPBeginner Support
Ja, Sie könnten Code auf diesen Seiten platzieren.
Admin
Ravish
Hallo, zuerst einmal vielen Dank für diesen Blog.
Ich möchte Codes für jedes Problem in verschiedenen Sprachen (z. B. Python und C++) hinzufügen. Wie können wir das tun?
WPBeginner Support
Dieses Plugin sollte auch für diese Sprachen funktionieren
Admin
Nimesh
Das ist großartig.
Wenn es das nicht gäbe, hätte ich ein separates Plugin für Code-Snippets verwendet.
Ich benutze immer noch den klassischen Editor von WordPress und werde die Code-Snippets wie hier erwähnt zu meinen Beiträgen hinzufügen.
Vielen Dank für diesen tollen Beitrag!
WPBeginner Support
Glad our guide was able to help
Admin
Induwara
Danke,
Dieser Artikel ist sehr nützlich. Ich habe das Plugin installiert und es funktioniert gut. Es gibt ein Problem mit meinem Theme, dass es, wenn ich einen Code aus dem Block-Editor einfüge, diesen mit Hintergrundfarbe anzeigt, sodass der Code nicht sichtbar ist. Ich bin ein großer Fan von WpBegginer!
WPBeginner Support
Es freut uns, dass unser Leitfaden hilfreich war. Sie sollten sich für Unterstützung bei diesem Problem an Ihr Theme wenden können.
Admin
Manju
Können Sie eine Möglichkeit vorschlagen, den Code aus einem Github-Repo in Wordpress-Posts anzuzeigen?
WPBeginner Support
Sie könnten den Code, wie wir ihn in diesem Artikel haben, platzieren und darunter vermerken, woher er von Github stammt. Es gibt möglicherweise auch Plugin-Optionen zum direkten Einbetten des Codes
Admin
Kunal Mandalia
Danke für den Tipp mit den "code"-Tags – hat wie am Schnürchen funktioniert.
WPBeginner Support
You’re welcome
Admin
Mahesh
Guter Tipp.. Danke für den Tipp.
WPBeginner Support
Thank you and you’re welcome
Admin
perveen
wir brauchen Code in WordPress, ich dachte, wir brauchen keinen Code in WordPress.
WPBeginner Support
Es ist nicht erforderlich, aber für Websites, die ihren Benutzern Code anzeigen möchten, gibt es einige Methoden, die sie verwenden können.
Admin
Adamu Malte
Danke @Syed für dein tolles Tutorial.
manasa
Schöner Blog mit exzellenten Informationen. Danke, weiter so.
Anh
Großartig, ich frage mich nur, wie man den Code darin posten kann
1-click Use in WordPress
und lassen Sie den Code trotzdem wie Text aussehen.
Wie Sie diesen Code posten können
.entry-title { font-family:”Open Sans”, arial, sans-serif; font-size:16px; color:#272727; }1-click Use in WordPress
zu Ihrem Beitrag, ohne zu ändern, wie er im Beitrag angezeigt wird.
Rushikesh Thawale
Thank You for this post.
Christian
There’s a typo on the word ‘Syntax’…no wonder I was getting no results when I copied paste the text on Wordpress plugin search!
Synatx Highlighter Evolved Plugin
Ahmed
Danke Syed…. Tolles Tutorial. Ich möchte Sie fragen, wie wir die Schriftgröße von Code ändern können?
Dave Mackey
Ich glaube, es gibt ein Problem mit Syntax Highlighter Evolved in den neuesten Versionen von WordPress. Ich und andere haben Probleme damit, HTML-Entitäten falsch anzuzeigen. Siehe Support-Foren für weitere Informationen.
Md Abul Bashar
Wie kann man Code ohne Plugin nur mit Code anzeigen?
John D
Persönlich verwende ich WP-GeSHi-Highlight, das die Standard-GeSHi-Codes verwendet. Ich glaube, ich habe einen Vorgänger des hier vorgestellten Plugins verwendet, hatte aber Schwierigkeiten, die Sprachcodes zu finden.
Ajay
In letzter Zeit habe ich es einfacher gefunden, GISTs zur Anzeige von Code zu verwenden und dann den Gist einfach in den Beitrag einzubetten
Mikhail S.
@AJAY, bitte erzählen Sie mir mehr über die Verwendung von GIST zur Anzeige von Codebeispielen.
Danke!
Thomas A. Reinert
Ich stimme absolut zu. Sie sind gut formatiert und mit Syntax-Hervorhebung versehen, sie sind forkbar und auch versionierbar. WP GIST ist also zumindest für mich die beste Wahl.