Als WordPress-Blog, der sich auf den Website-Aufbau konzentriert, stoßen wir manchmal auf Leser, die einen Code-Snippet einfügen oder ein Stück Code in den Kommentaren teilen möchten.
WordPress verfügt jedoch nicht über eine integrierte Syntaxhervorhebung für Kommentare, Beiträge oder Seiten, was sowohl für den Kommentator als auch für andere Leser, die versuchen, den Code zu verstehen, schwierig sein kann.
Glücklicherweise haben wir einen einfachen Weg gefunden, dieses Problem zu lösen. In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach Syntax-Hervorhebungen in WordPress-Kommentaren hinzufügen.
Warum und wann Sie Syntaxhervorhebung in WordPress-Kommentaren benötigen?
Syntax-Hervorhebung ist eine Möglichkeit, Code besser aussehen zu lassen und leichter verständlich zu machen. Sie fügt Farb- und Zeilennummern zu Code-Snippets hinzu, wodurch diese besser lesbar werden. Hier ist ein Beispiel:
<html>
<head>
<title>My Awesome Website</title>
</head>
<body>
<h1>Welcome to My Homepage</h1>
</body>
</html>
Wenn Sie einen WordPress-Blog über Webentwicklung oder Programmierung haben, ist die Aktivierung der Syntaxhervorhebung in WordPress-Kommentaren wichtig. Damit können Leser Code auf lesbare Weise schreiben.
Dies wird sie ermutigen, mehr Kommentare zu hinterlassen und ihre eigenen Snippets zu teilen. Es macht die Kommentare nicht nur interessanter, sondern baut auch ein Gemeinschaftsgefühl auf.
Außerdem können Ihre Leser, wenn sie Hilfe benötigen, den Code einfach in den Kommentar einfügen, auf eine Weise, die visuell ansprechend und für ihre Mitkommentatoren leicht verständlich ist.
In diesem Sinne sehen wir uns an, wie Sie die Syntaxhervorhebung im Kommentarformular Ihrer WordPress-Website hinzufügen können.
Schritt 1: Installieren Sie das Syntax Highlighter Evolved Plugin
Der einfachste Weg, Syntaxhervorhebung in WordPress hinzuzufügen, ist mit dem Plugin Syntax Highlighter Evolved. Es ist super einfach zu bedienen und ermöglicht es Ihnen, Syntaxhervorhebung in WordPress-Beiträgen, Seiten und Kommentaren zu aktivieren.
Bei WPBeginner verwenden wir dieses Plugin, um Code-Snippets einzufügen und anzuzeigen. Sie können unseren Artikel über warum wir Syntax Highlighter Evolved verwenden lesen, um weitere Details zu erfahren.
Zuerst müssen Sie das Plugin Syntax Highlighter Evolved installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Sobald Sie fertig sind, können Sie nun einen Beitrag oder eine Seite bearbeiten und Code mit Syntax-Hervorhebung hinzufügen. So sieht es im Block-Editor aus:
Sie können mehr über die Verwendung des Syntax Highlighter Evolved-Plugins in unserem Artikel über die Anzeige von Code in WordPress erfahren.
Standardmäßig erlaubt Syntax Highlighter Evolved Besuchern, Code in ihren Kommentaren hinzuzufügen, aber dieser Code muss in Shortcodes eingeschlossen werden.
Diese Shortcodes sind nach allen beliebten Programmier- und Skriptsprachen benannt. Das bedeutet, dass der Kommentator seinen Code einfach in eckige Klammern mit dem Namen der Sprache einschließen muss.
Wenn Sie beispielsweise einen Kommentar mit PHP-Code posten möchten, würden Sie Folgendes verwenden:
Hi everyone. I need help with this PHP code: [php]
<?PHP
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]Wenn Sie beispielsweise HTML-Code als Kommentar posten möchten, müssten Sie ihn in den HTML-Shortcode einschließen:
Hey there! Could anyone check this code snippet? [html]<a href="https://example.com">Demo website>/a>[/html]Nun, was dies knifflig macht, ist, dass die Benutzer nicht wissen, dass sie tatsächlich Syntax-Hervorhebung mit diesen Shortcodes verwenden können. Sie müssen sie also durch eine Hinweismeldung informieren.
Schritt 2: Fügen Sie eine Syntaxhervorhebungs-Benachrichtigung im Kommentarformular hinzu
Um Kommentatoren über die Syntax-Hervorhebungsfunktion zu informieren, müssen Sie eine Hinweismeldung über Ihrem Kommentarformular hinzufügen, wie hier gezeigt:
Sie können dies tun, indem Sie einen benutzerdefinierten Code-Snippet zu Ihrer WordPress-Website hinzufügen.
Wenn Sie dieses Tutorial lesen, weil Sie einen Coding-Blog haben, dann sind Sie höchstwahrscheinlich ziemlich versiert im Programmieren.
Dennoch kann es selbst für die fortgeschrittensten Benutzer schwierig sein, den Überblick über alle ihre Code-Snippets zu behalten. Wenn sie nicht richtig verwaltet werden, können einige häufige WordPress-Fehler auftreten oder Ihre Website komplett beschädigen.
Deshalb empfehlen wir die Verwendung von WPCode, um benutzerdefinierte Code-Snippets einzufügen. Es ist der einfachste und sicherste Weg, benutzerdefinierten Code in WordPress hinzuzufügen, ohne Kerndateien von WordPress bearbeiten zu müssen.
Hinweis: Obwohl die kostenlose Version von WPCode verfügbar ist, empfehlen wir die Verwendung der Pro-Version von WPCode, da sie Ihnen Zugriff auf intelligente bedingte Logik, Zugriff auf eine Cloud-Bibliothek von Code-Snippets und mehr bietet.
Das Erste, was Sie tun müssen, ist das WPCode-Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.
Nach der Aktivierung gehen Sie zu Code-Snippets » + Snippet hinzufügen.
Hier sehen Sie alle fertigen Snippets, die Sie zu Ihrer WordPress-Website hinzufügen können.
Da wir unseren eigenen Snippet hinzufügen möchten, fahren Sie mit der Maus über „Ihren benutzerdefinierten Code hinzufügen (Neuer Snippet)“ und klicken Sie dann auf „+ Benutzerdefinierten Snippet hinzufügen“.
Geben Sie zum Starten einen Titel für den benutzerdefinierten Code-Snippet ein. Dies kann alles sein, was Ihnen hilft, das Snippet zu identifizieren.
Öffnen Sie danach das Dropdown-Menü 'Code-Typ' und wählen Sie 'PHP-Snippet'.
Fügen Sie nun einfach den folgenden Ausschnitt in den Code-Editor ein:
function wpbeginner_comment_text_before($arg) {
// Add a custom notice to inform users about using shortcodes for syntax highlighting
$arg['comment_notes_before'] .= "<p class='comment-notice'>You can use shortcodes for syntax highlighting when adding code. For example, or </p>";
// Return the modified comment arguments
return $arg;
}
// Add the filter to apply the custom comment modification function
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');
Öffnen Sie danach das Dropdown-Menü 'Standort' und klicken Sie auf 'Überall ausführen'.
Dann sind Sie bereit, zum oberen Bildschirmrand zu scrollen und auf den Umschalter „Inaktiv“ zu klicken, damit er zu „Aktiv“ wechselt.
Klicken Sie schließlich auf 'Snippet speichern', um das Snippet live zu schalten.
Dieser Code zeigt einfach eine Benachrichtigung über dem Kommentarfeld im WordPress-Kommentarformular an. Sie werden diesen Text jedoch nicht sehen, wenn Sie bei Ihrem Konto angemeldet sind. Daher müssen Sie ein neues Browserfenster im Inkognito-Modus öffnen oder sich von Ihrem Konto abmelden.
Wenn Sie sehen möchten, ob der Shortcode tatsächlich funktioniert, besuchen Sie Ihre Website im Inkognito-Modus, kommentieren Sie einen Blogbeitrag und verwenden Sie den Shortcode. Wenn der Kommentar moderiert und genehmigt wurde, sollten Sie etwas Ähnliches sehen:
Erfahren Sie mehr Wege, um die Kommentar-Interaktion zu steigern
Die Fähigkeit zur Syntaxhervorhebung ist nicht die einzige Möglichkeit, Ihr Kommentar-Engagement zu steigern, wenn Sie einen Webentwicklungsblog haben.
Ein weiterer Tipp ist, Likes und Dislikes zu Ihren Kommentaren hinzuzufügen. Dies ermöglicht es Ihren Lesern, ihre Meinung zu bestimmten Kommentaren einfach auszudrücken. Es kann Diskussionen anregen und wertvolle Beiträge aus Ihrer Community hervorheben.
Außerdem können Sie Benutzer benachrichtigen, wenn sie Antworten auf ihre Kommentare erhalten. Dies stellt sicher, dass sie sich an der Konversation beteiligen und immer wieder zurückkehren.
Zusätzlich möchten Sie vielleicht benutzerdefinierte Felder zum Kommentarformular hinzufügen. Dies können Sie tun, wenn Sie möchten, dass Leser neben ihren Kommentaren spezifische Informationen angeben, wie z. B. die von ihnen verwendete Programmiersprache oder die Version eines Frameworks.
Hier sind weitere Tipps, die Sie implementieren können, um das Kommentar-Engagement zu steigern:
- Wie man die meistkommentierten Beiträge in WordPress anzeigt
- So heben Sie Kommentare in WordPress hervor oder begraben sie
- Wie Sie die Aufmerksamkeit Ihrer Benutzer mit Kommentar-Weiterleitungen lenken
Wir hoffen, dieser Artikel hat Ihnen geholfen, Syntax-Hervorhebungen in WordPress-Kommentaren hinzuzufügen. Möglicherweise möchten Sie auch unseren Leitfaden lesen, wie Sie Videos und mehr in WordPress-Kommentaren hinzufügen und unsere Expertenauswahl für die besten WordPress-Kommentar-Plugins.
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.
Jiří Vaněk
Vielen Dank für die Demonstration der Möglichkeit, einen Snippet zu verwenden. Ich habe bereits eine ganze Reihe von Plugins auf der Website, die ich dafür benötige, und gleichzeitig wollte ich, da ich einen Technologie-Blog habe, den Benutzern ermöglichen, Codes in Kommentaren hervorzuheben. Ich verwende WP Code für andere Snippets, die eine wichtige Rolle auf der Website spielen, daher ist die Möglichkeit, dies mit einem Snippet zu tun, sehr nützlich. Nochmals vielen Dank, ich werde den Snippet für andere Websites in meine Code-Bibliothek aufnehmen.
Yves
Letzte Aktualisierung vor 9 Monaten. Nicht mit der neuesten WordPress-Version getestet.
WPBeginner Support
Für diese nicht getestete Warnung empfehlen wir Ihnen, unseren Artikel unten zu lesen:
https://www.wpbeginner.com/opinion/should-you-install-plugins-not-tested-with-your-wordpress-version/
Admin
Seth
Nette und sehr informative Artikel. Ich habe gerade die Update-Benachrichtigungen eingeschaltet. Gute Arbeit, Leute.
WPBeginner Support
Glad our article was helpful
Admin