Som en WordPress-blogg med fokus på webbplatsbyggande stöter vi ibland på läsare som vill klistra in ett fragment kod eller dela en bit kod i kommentarerna.
WordPress har dock inte någon inbyggd syntaxmarkering för kommentarer, inlägg eller sidor, vilket kan vara svårt för både den som kommenterar och andra läsare som försöker förstå koden.
Tack och lov har vi hittat ett enkelt sätt att lösa detta problem. I den här artikeln visar vi dig hur du enkelt lägger till syntaxmarkering i WordPress-kommentarer.
Varför och när behöver du syntaxmarkering i WordPress Comments?
Syntaxmarkering är ett sätt att få kod att se bättre ut och bli lättare att förstå. Det adderar färger och radnummer till code snippets, vilket gör dem mer läsbara. Här är ett exempel:
<html>
<head>
<title>My Awesome Website</title>
</head>
<body>
<h1>Welcome to My Homepage</h1>
</body>
</html>
Om du har en WordPress blogg om webbutveckling eller kodning är det viktigt att aktivera syntaxmarkering i WordPress kommentarer. På så sätt kan läsare enkelt skriva kod på ett läsbart sätt.
Detta kommer att uppmuntra dem att lämna fler kommentarer och dela sina egna snippor. Det gör inte ej bara kommentarerna mer intressanta utan bygger också upp en känsla av engagemang i samhället.
Dessutom, om dina läsare behöver hjälp, kan de enkelt infoga koden i kommentaren på ett sätt som är visuellt tilltalande och lätt att förstå för de andra kommentatorerna.
Med detta i åtanke, låt oss se hur du kan add to syntaxmarkering i formuläret för comments på din WordPress website.
Step 1: Installera tillägget Syntax Highlighter Evolved
Det enklaste sättet att add to syntaxmarkering i WordPress är med pluginet Syntax Highlighter Evolved. Det är superenkelt att använda och aktiverar dig att aktivera syntaxmarkering i WordPress-poster, pages och comments.
På WPBeginner använder vi detta plugin för att inserta och displaya code snippets. Du kan läsa vår artikel om varför vi använder Syntax Highlighter Evolved för mer detaljer.
Först måste du installera och aktivera pluginet Syntax Highlighter Evolved. För mer information, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.
När du har gjort det kan du nu redigera ett inlägg eller en sida och lägga till kod med hjälp av syntaxmarkören. Så här ser det ut i blockredigeraren:
Du kan lära dig mer om hur du använder pluginet Syntax Highlighter Evolved i vår artikel om hur du visar kod i WordPress.
Som standard tillåter Syntax Highlighter Evolved besökare att add to kod i sina comments, men den koden måste omslutas av shortcodes.
Dessa shortcodes är namngivna efter all populära programmerings- och skriptspråk. Detta innebär att den som kommenterar bara behöver omsluta sin kod med hakparenteser som innehåller språknamnet.
Om du till exempel vill posta en comment som innehåller PHP-kod, skulle du använda följande:
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]På samma sätt, om du vill posta en HTML-kod som en comment, måste du omsluta den med HTML shortcode:
Hey there! Could anyone check this code snippet? [html]<a href="https://example.com">Demo website>/a>[/html]Nu, vad som gör detta knepigt är att användare inte vet att de faktiskt kan använda syntaxmarkering med dessa shortcodes. Så du måste låta dem veta genom ett notice-meddelande.
Step-by-Step 2: Add to en notice för syntaxmarkering i formuläret Comment
För att informera kommentatorer om funktionen för syntaxmarkering måste du lägga till ett notice-meddelande ovanför ditt kommentarformulär, gillar så här:
Du kan göra detta genom att lägga till ett eget code snippet på din WordPress site.
Om du läser den här tutorialen för att du har en kodningsblogg, är du troligtvis ganska bekväm med kodning.
Trots det kan det vara svårt för de mest avancerade användarna att hålla all sina code snippets under uppsikt. Om de inte hanteras korrekt kan du uppleva några vanliga WordPress error eller förstöra din site helt och hållet.
Det är därför vi rekommenderar att du använder WPCode för att infoga anpassade code snippets. Det är det enklaste och säkraste sättet att add to custom code i WordPress utan att behöva edit några core WordPress-filer.
Obs/observera : Även om den gratis versionen av WPCode är available rekommenderar vi att du använder Pro-versionen av WPCode eftersom den ger dig tillgång till smart villkorlig logik, tillgång till ett molnbibliotek med code snippets och mycket mer.
Det första du behöver göra är att installera och aktivera pluginet WPCode. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.
Vid aktivering, gå över till Code Fragment Kodu ” + Lägg till fragment.
Here, you will see all of the ready-made snippets that you can add to your WordPress website.
Eftersom vi vill lägga till vårt eget fragment kodu, håller du muspekaren över ”Add Your Custom Code (New Snippet)” och klickar sedan på ”+ Add Custom Snippet”.
Börja med att enter en titel för det anpassade code snippet. Det kan vara vad som helst som hjälper dig att identifiera snippet.
Därefter öppnar du dropdown ”Code Type” och väljer ”PHP Snippet”.
Nu klistrar du bara in följande snippet i code snippets editor:
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');
Därefter öppnar du dropdown ’Location’ och klickar på ’Run Everywhere’.
Sedan är du redo att rulla högst upp på vyn och klicka på ”Inaktiverad” toggle så att den ändras till ”Aktiv”.
Slutligen klickar du på ”Save Snippet” för att göra snippet live.
Den här koden visar helt enkelt en notice ovanför kommentarsfältet i WordPress kommentarformulär. Du kommer dock inte att se den här texten när du är inloggad på ditt account, så du måste öppna ett nytt fönster i webbläsaren i inkognitoläge eller logga ut från ditt account.
Om du vill se om shortcoden faktiskt fungerar, besök bara din website i inkognitoläge, kommentera ett blogginlägg och använd shortcoden. När kommentaren har granskats och approves bör du se något som gillar detta:
Learn More Sätt att öka engagemanget för comments
Att lägga till syntaxmarkering capability är inte bara det enda sättet att öka ditt comment engagement om du har en blogg för webbutvecklare.
Ett annat tips är att add to likes och dislikes till dina comments. På så sätt kan dina läsare enkelt uttrycka sina expressioner om specifika comments. Det kan sätta igång diskussioner och lyfta fram värdefulla bidrag från your community.
Du kan också meddela användare när de får svar på sina kommentarer. Detta säkerställer att de förblir engagerade i konversationen och får dem att komma tillbaka för mer.
Dessutom kanske du vill add to custom fields till formuläret för comments. Det kan du göra om du vill att läsarna ska ge specifik information tillsammans med sina comments, som att de gillar programmeringsspråket de använder eller versionen av ett ramverk.
Här är andra tips som du kan använda för att öka engagemanget för comments:
- Hur man visar mest kommenterade posts i WordPress
- Så här utväljer eller begraver du kommentarer i WordPress
- Så här redirectar du användarens uppmärksamhet med Comment Redirect
Vi hoppas att den här artikeln hjälpte dig att add to syntaxmarkering i WordPress comments. You may also want to see our guide on how to add videos and more in WordPress comments and our expert picks for the best WordPress comment plugins.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Jiří Vaněk
Thank you for demonstrating the possibility using a snippet. I already have quite a lot of plugins on the site that I need to run it and at the same time, since I have a technology blog, I wanted to allow users to highlight codes in comments. I use WP Code for other snippets that have an important role on the website, so the possibility to do this with a snippet is very useful. Thank you once again, I will save the snippet to my code library for other sites as well.
Yves
Last update 9 months ago. Non tested with last Wordpress version.
WPBeginner Support
For that not tested warning, we would recommend taking a look at our article below:
https://www.wpbeginner.com/opinion/should-you-install-plugins-not-tested-with-your-wordpress-version/
Administratör
Seth
Nice and very informative article. I just turned on update notifications. Good one guys.
WPBeginner Support
Glad our article was helpful
Administratör