Voulez-vous ajouter la coloration syntaxique dans les commentaires de WordPress ?
Par défaut, WordPress ne propose pas de coloration syntaxique pour les commentaires, les publications ou les pages. Cela peut être un gros problème si vous écrivez des articles sur le codage ou la programmation sur votre site WordPress.
Dans cet article, nous allons vous afficher comment ajouter facilement la coloration syntaxique dans les commentaires 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 à parler de code et à partager leurs propres extraits dans les commentaires. 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.
Installation de l’extension 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, peut maintenant modifier une publication ou une page et ajouter du code à l’aide de la surbrillance syntaxique. Voici à quoi cela ressemble dans l’éditeur/éditrices 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.
Comment utiliser la mise en évidence de la syntaxe dans les commentaires 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.
Ajout d’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.
Une fois activé, rendez-vous dans la rubrique Extraits de code » Ajouter un extrait.
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é « , puis cliquez sur » Utiliser l’extrait « .
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 :
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 correctement du JavaScript et des styles dans WordPress et nos choix d’experts pour les meilleurs éditeurs/éditrices de code pour Mac et Windows.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
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 says
Last update 9 months ago. Non tested with last WordPress version.
WPBeginner Support says
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 says
Nice and very informative article. I just turned on update notifications. Good one guys.
WPBeginner Support says
Glad our article was helpful
Administrateur