En tant que blog WordPress axé sur la construction de sites, nous rencontrons parfois des lecteurs qui souhaitent coller un extrait de code ou partager un morceau de code dans les commentaires.
Cependant, WordPress ne propose pas de coloration syntaxique intégrée pour les commentaires, les publications ou les pages, ce qui peut s’avérer délicat tant pour le commentateur que pour les autres lecteurs qui tentent de comprendre le code.
Heureusement, nous avons trouvé un moyen simple de résoudre ce problème. Dans cet article, nous allons vous montrer comment ajouter facilement la coloration syntaxique dans les commentaires de WordPress.
Pourquoi et quand avez-vous besoin de la mise en évidence de la syntaxe dans les commentaires WordPress ?
La mise en évidence de la syntaxe est un moyen d’améliorer l’aspect du code et de le rendre plus facile à comprendre. Elle ajoute des couleurs et des numéros de ligne aux extraits de code, ce qui les rend plus lisibles. Voici un exemple :
<html>
<head>
<title>My Awesome Website</title>
</head>
<body>
<h1>Welcome to My Homepage</h1>
</body>
</html>
Si vous avez un blog WordPress sur le développement/développeuse web ou le codage, l’activation de la coloration syntaxique dans les commentaires WordPress est importante. Grâce à cela, les Lecteurs peuvent facilement écrire du code de manière lisible.
Cela les encouragera à laisser plus de commentaires et à partager leurs propres extraits. Cela rend uniquement les commentaires plus intéressants, mais donne aussi une Version de l’engagement de la communauté.
De plus, si vos lecteurs ont besoin d’aide, ils peuvent facilement insérer le code dans le commentaire d’une manière visuellement attrayante et facile à comprendre pour les autres commentateurs.
Dans cette optique, voyons comment ajouter la coloration syntaxique dans le formulaire de commentaire de votre site WordPress.
Étape par étape : Installation du plugin Syntax Highlighter Evolved
La façon la plus simple d’ajouter la coloration syntaxique dans WordPress est avec l’extension Syntax Highlighter Evolved. Il est super facile à utiliser et vous permet d’activer la coloration syntaxique dans les publications, les pages et les commentaires de WordPress.
Chez WPBeginner, nous utilisons cette extension pour insérer et afficher des extraits de code. Vous pouvez lire notre article sur les raisons pour lesquelles nous utilisons Syntax Highlighter Evolved pour plus de détails.
Tout d’abord, vous devez installer et activer l’extension Syntax Highlighter Evolved. En savoir plus, consultez notre guide étape par étape sur l’installation d’une extension WordPress.
Une fois fait, vous pouvez maintenant éditer une publication ou une page et ajouter du code à l’aide du surligneur de syntaxe. Voici à quoi cela ressemble dans l’éditeur de blocs:
Vous pouvez en savoir plus sur l’utilisation de l’extension Syntax Highlighter Evolved dans notre article sur l’affichage du code dans WordPress.
Par défaut, Syntax Highlighter Evolved permet aux internautes d’ajouter du code dans leurs commentaires, mais ce code doit être enveloppé dans des codes courts.
Ces codes courts portent le nom de tous les langages de programmation et de script courants. Cela signifie que l’expéditeur n’a qu’à mettre son code entre crochets contenant le nom du langage.
Par exemple, si vous souhaitez publier un conteneur contenant du code PHP, vous devez utiliser le code suivant :
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]De même, si vous souhaitez publier un code HTML dans un commentaire, vous devez l’insérer dans le code court HTML :
Hey there! Could anyone check this code snippet? [html]<a href="https://example.com">Demo website>/a>[/html]Ce qui rend cette opération délicate, c’est que les utilisateurs/utilisatrices ne savent pas qu’ils peuvent utiliser la coloration syntaxique avec ces codes courts. Vous devez donc les en informer par le biais d’un message de notification.
Étape par étape : Ajouter une notification de mise en évidence de la syntaxe dans le formulaire de commentaire
Pour informer les commentateurs de l’existence de la fonctionnalité de mise en évidence de la syntaxe, vous devez ajouter un message de notification au-dessus de votre formulaire de commentaire, comme suit :
Vous pouvez le faire en ajoutant un extrait de code personnalisé à votre site WordPress.
Si vous lisez ce tutoriel parce que vous avez un blog de codage, alors il est fort probable que vous soyez assez à l’aise avec le codage.
Malgré cela, il peut être difficile pour les utilisateurs/utilisatrices les plus avancés de garder une trace de tous leurs extraits de code. S’ils ne sont pas correctement gérés, vous risquez de rencontrer certaines erreurs courantes de WordPress ou de casser complètement votre site.
C’est pourquoi nous recommandons d’utiliser WPCode pour insérer des extraits de code personnalisés. C’est le moyen le plus simple et le plus sûr d’ajouter du code personnalisé dans WordPress sans avoir à modifier les fichiers du cœur de WordPress.
Note : Bien que la version gratuite de WPCode soit disponible, nous recommandons d’utiliser la version Pro de WPCode car elle vous donne accès à une logique conditionnelle intelligente, à une bibliothèque cloud d’extraits de code, et plus encore.
La première chose à faire est d’installer et d’activer l’extension WPCode. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.
Après l’activation, rendez-vous sur Code Snippets « + Add Snippet.
Vous consulterez cette page avec tous les extraits prêts à l’emploi que vous pouvez ajouter à votre site WordPress.
Puisque nous voulons ajouter notre propre extrait, survolez » Ajouter votre code personnalisé (nouvel extrait) « , puis cliquez sur » + Ajouter un extrait personnalisé « .
Pour commencer, saisissez un titre pour l’extrait de code personnalisé. Il peut s’agir de n’importe quel élément qui vous aide à identifier l’extrait.
Ensuite, ouvrez le menu déroulant « Code Type » et choisissez « PHP Snippet ».
Il suffit maintenant de coller l’extrait de code suivant dans l’éditeur/éditrices de code :
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');
Ensuite, ouvrez le menu déroulant « Emplacement » et cliquez sur « Exécuter partout ».
Vous pouvez ensuite défiler jusqu’en haut de l’écran et cliquer sur le permutateur « Inactif » pour qu’il se modifie en « Actif ».
Enfin, cliquez sur « Enregistrer l’extrait » pour rendre l’extrait direct.
Ce code affiche simplement une notification au-dessus du champ de commentaire dans le formulaire de commentaire de WordPress. Cependant, vous ne verrez pas ce texte lorsque vous êtes connecté à votre compte, vous devrez donc ouvrir une nouvelle fenêtre de navigateur en mode incognito ou vous déconnecter de votre compte.
Si vous voulez voir si le code court fonctionne réellement, visitez votre site en mode incognito, commentez une publication de blog et utilisez le code court. Lorsque le commentaire a été modéré et approuvé, vous devriez voir quelque chose comme ceci :
En savoir plus sur les moyens de stimuler l’engagement des commentaires
L’ajout de permissions de mise en évidence de la syntaxe n’est pas uniquement le seul moyen de stimuler l’engagement de vos commentaires si vous avez un blog de développement web.
Une autre astuce consiste à ajouter des mentions « j’aime » et « je n’aime pas » à vos commentaires. Cela permet à vos lecteurs d’exprimer facilement leur opinion sur des commentaires spécifiques. Cela peut susciter des discussions et mettre en évidence les contributions précieuses de votre communauté.
Vous pouvez également avertir les utilisateurs/utilisatrices lorsqu’ils reçoivent des réponses à leurs commentaires. Cela permet de s’assurer qu’ils restent engagés dans la conversation et qu’ils reviennent pour en savoir plus.
En outre, vous pouvez ajouter des champs personnalisés au formulaire de commentaire. Vous pouvez le faire si vous souhaitez que les Lecteurs fournissent des informations spécifiques à côté de leurs commentaires, comme le langage de programmation qu’ils utilisent ou la version d’un framework.
Voici d’autres astuces que vous pouvez mettre en œuvre pour stimuler l’engagement des commentaires :
- Comment afficher les publications les plus commentées dans WordPress
- Comment mettre en avant ou enterrer des commentaires dans WordPress
- Comment rediriger l’attention de vos utilisateurs/utilisatrices avec la redirection des commentaires
Nous espérons que cet article vous a aidé à ajouter la coloration syntaxique dans les commentaires WordPress. Vous pouvez également consulter notre guide sur la façon d’ajouter des vidéos et plus dans les commentaires WordPress et nos choix d’experts pour les meilleures extensions de commentaires WordPress.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et 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/
Administrateur
Seth
Nice and very informative article. I just turned on update notifications. Good one guys.
WPBeginner Support
Glad our article was helpful
Administrateur