Vous avez peut-être vu des extraits de code dans différents articles de blog de WPBeginner que nous créons pour aider nos lecteurs à résoudre des problèmes. Cependant, afficher ce code n'est pas simple.
C'est parce que si vous essayez d'ajouter du code comme du texte normal, WordPress ne l'affichera pas correctement. WordPress exécute votre contenu à travers plusieurs filtres de nettoyage chaque fois que vous enregistrez un article. Ces filtres sont là pour s'assurer que personne n'injecte de code via un éditeur d'articles pour pirater votre site Web.
Dans cet article, nous vous montrerons les bonnes façons d'afficher facilement du code sur votre site WordPress. Nous vous montrerons différentes méthodes, et vous pourrez choisir celle qui correspond le mieux à vos besoins.
Pourquoi afficher du code sur un site Web WordPress ?
Si vous écrivez des articles de blog sur des sujets techniques ou que vous créez de la documentation pour vos produits, alors montrer des extraits de code est vraiment utile. Vos utilisateurs peuvent simplement copier le morceau de code et l'ajouter à leur site Web.
Cependant, afficher du code sur un site Web WordPress n'est pas si simple.
WordPress interprétera les extraits comme du code fonctionnel et essaiera de l'implémenter sur votre site Web au lieu de l'afficher comme du texte. Il n'afficherait pas non plus le code avec précision, ce qui entraînerait des erreurs lorsque les utilisateurs les saisiraient sur leur site Web.
De plus, WordPress utilise plusieurs filtres comme mesures de sécurité. Il filtre le contenu pour empêcher les pirates d'injecter du code malveillant dans l'éditeur de contenu et de pirater votre site Web.
Cela dit, il existe différentes façons d'afficher du code dans WordPress. Vous pouvez cliquer sur les liens ci-dessous pour accéder à votre section préférée :
Méthode 1. Afficher du code à l'aide de l'éditeur par défaut dans WordPress
Cette méthode est recommandée pour les débutants et les utilisateurs qui n'ont pas besoin d'afficher du code très souvent.
Modifiez simplement l'article de blog ou la page où vous souhaitez afficher le code. Sur l'écran de l'éditeur de contenu WordPress, ajoutez un nouveau bloc de code à votre article.
Vous pouvez maintenant entrer l'extrait de code dans la zone de texte du bloc.
Le bloc de code affichera un aperçu de votre code.
Après cela, vous pouvez enregistrer votre article de blog et le prévisualiser pour voir le bloc de code en action.
Une fois que vous êtes satisfait de l'apparence de votre code, publiez votre article de blog.
Selon votre thème WordPress, le bloc de code peut avoir un aspect différent sur votre site Web.
Méthode 2. Afficher du code dans WordPress à l'aide d'un plugin
Pour cette méthode, nous utiliserons un plugin WordPress pour afficher du code dans vos articles de blog. Cette méthode est recommandée pour les utilisateurs qui affichent souvent du code dans leurs articles.
Il vous offre les avantages suivants par rapport au bloc de code par défaut :
- Il vous permet d'afficher facilement n'importe quel code dans n'importe quel langage de programmation.
- Il affiche le code avec la coloration syntaxique et les numéros de ligne.
- Vos utilisateurs peuvent facilement étudier le code et le copier.
Tout d'abord, vous devez installer et activer le plugin SyntaxHighlighter Evolved. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Après l'activation, vous pouvez modifier l'article de blog où vous souhaitez afficher le code. Sur l'écran de modification de l'article, ajoutez le bloc « SyntaxHighlighter Code » à votre article.
Vous verrez maintenant un nouveau bloc de code dans l'éditeur d'articles où vous pourrez saisir votre code.
Après avoir ajouté le code, vous devez sélectionner les paramètres du bloc dans la colonne de droite.
Tout d'abord, vous devez sélectionner le langage de votre code, comme PHP, CSS, Java, etc. Après cela, vous pouvez désactiver les numéros de ligne, fournir le premier numéro de ligne, mettre en surbrillance n'importe quelle ligne de votre choix et désactiver la fonctionnalité pour rendre les liens cliquables.
Une fois que vous avez terminé, enregistrez votre article et cliquez sur le bouton d'aperçu pour le voir en action.
Le plugin est livré avec un certain nombre de thèmes de couleurs et de thèmes.
Pour changer le thème de couleur, vous devez visiter la page Paramètres » SyntaxHighlighter.
Depuis la page des paramètres, vous pouvez sélectionner un thème de couleur et modifier les paramètres de SyntaxHighlighter.
Vous pouvez enregistrer vos paramètres pour voir un aperçu du bloc de code en bas de la page.
Utiliser SyntaxHighlighter avec l'éditeur classique
Si vous utilisez toujours l'ancien éditeur classique de WordPress, voici comment vous utiliseriez le plugin SyntaxHighlighter pour ajouter du code à vos articles de blog WordPress.
Encadrez simplement votre code entre crochets avec le nom du langage. Par exemple, si vous allez ajouter du code PHP, vous l'ajouterez comme ceci :
<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
De même, si vous souhaitez ajouter un code HTML, vous l'encadrerez avec le shortcode HTML comme ceci :
<a href="example.com">A sample link</a>
Méthode 3. Afficher le code dans WordPress manuellement (sans plugin ni bloc)
Cette méthode s'adresse aux utilisateurs avancés car elle demande plus de travail et ne fonctionne pas toujours comme prévu.
Il convient aux utilisateurs qui utilisent toujours l'ancien éditeur classique et qui souhaitent afficher du code sans utiliser de plugin.
Tout d'abord, vous devez passer votre code par un outil en ligne encodeur d'entités HTML. Il transformera le balisage de votre code en entités HTML, ce qui vous permettra d'ajouter le code et de contourner les filtres de nettoyage de WordPress.
Copiez et collez maintenant votre code dans l'éditeur de texte et entourez-le des balises <pre> et <code>.
Votre code ressemblerait à ceci :
<pre><code>
<p><a href="/home.html">Ceci est un lien d'exemple</a></p>
</pre></code>
Vous pouvez maintenant enregistrer votre article et prévisualiser le code en action.
Votre navigateur convertira les entités HTML, et les utilisateurs pourront voir et copier le code correct.
Nous espérons que cet article vous a aidé à apprendre comment afficher facilement du code sur votre site WordPress. Vous pourriez également consulter notre guide sur comment autoriser le PHP dans les articles et pages WordPress et notre sélection d'experts des meilleurs outils de développement WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Olaf
En tant que développeur PHP, j'ai un petit blog où je publie occasionnellement diverses techniques et flux de travail pour la programmation en PHP, ainsi que mes propres extraits de code. C'est formidable que WordPress permette nativement l'affichage de code. Cependant, j'utilise personnellement un plugin, car j'ai parfois besoin que le code affiche du CSS, d'autres fois du PHP, et très rarement du JavaScript. C'est bénéfique lorsque le code est bien formaté, et idéalement, coloré par fonction, etc. Il est également utile de considérer une fonction de copie afin que les utilisateurs puissent facilement copier l'extrait de code entier dans leur presse-papiers. C'est pourquoi je préfère un plugin à l'éditeur de blocs.
Dennis Muthomi
Je pense que le plugin fait très bien son travail, mais...
une fonctionnalité que j'aimerais voir ajoutée est un bouton de copie.
Actuellement, les utilisateurs doivent sélectionner et copier manuellement le bloc de code complet, ce qui peut être fastidieux, surtout pour les extraits plus longs.
Une option de copie en un seul clic améliorerait considérablement l'expérience utilisateur.
De cette façon, les lecteurs pourraient facilement récupérer le code sans en manquer accidentellement une partie lors de la sélection du code.
Support WPBeginner
Thank you for sharing that recommendation
Admin
Jiří Vaněk
Y a-t-il une possibilité d'avoir un bouton de copie de code dans le plugin afin que l'utilisateur n'ait pas à copier le code manuellement dans le presse-papiers ?
Support WPBeginner
Not at the moment but we will keep an eye out for a method we would recommend
Admin
Jiří Vaněk
Merci pour votre réponse. C'est vraiment dommage, car cela facilite beaucoup de travail. Il arrive parfois que même les numéros de ligne soient copiés dans le code par la méthode manuelle. Elementor a un widget pour le code qui a le bouton de copie et c'est génial. Je suivrai la mise à jour de l'article si nécessaire.
Mme Gray
Bonjour,
Peut-on insérer du code sur des pages ajoutées par un plugin tiers tel que Woocommerce ?
Support WPBeginner
Oui, vous pourriez insérer du code sur ces pages.
Admin
Ravish
Bonjour, tout d'abord, merci pour ce blog.
Je veux ajouter du code pour n'importe quel problème dans différentes langues (par exemple, Python et C++). Comment pouvons-nous faire cela ?
Support WPBeginner
Ce plugin devrait toujours fonctionner pour ces langues également
Admin
Nimesh
C'est génial.
Sans cela, j'aurais utilisé un plugin séparé pour les extraits de code d'entrée.
J'utilise toujours l'éditeur classique de WordPress et j'ajouterai les extraits de code à mes articles comme mentionné ici.
Merci pour ce partage incroyable !
Support WPBeginner
Glad our guide was able to help
Admin
Induwara
Merci,
Cet article est très utile. J'ai installé le plugin et il fonctionne bien. Il y a un problème avec mon thème, lorsque je mets un code de l'éditeur de blocs, le thème l'affiche avec la couleur de fond, il est donc impossible de voir le code. Je suis un grand fan de WpBegginer !
Support WPBeginner
Nous sommes heureux que notre guide vous ait été utile, vous devriez pouvoir contacter votre thème pour obtenir de l'aide concernant ce problème.
Admin
Manju
Pouvez-vous suggérer un moyen d'afficher le code d'un dépôt Github dans les articles Wordpress ?
Support WPBeginner
Vous pourriez insérer le code comme nous l'avons fait dans cet article et noter en dessous d'où il provient de Github. Il peut également y avoir des options de plugin pour intégrer le code directement
Admin
Kunal Mandalia
Merci pour l'astuce sur les balises "code" – cela a fonctionné à merveille.
Support WPBeginner
You’re welcome
Admin
Mahesh
Bonne idée.. Merci pour l'astuce.
Support WPBeginner
Thank you and you’re welcome
Admin
perveen
nous avons besoin de codage sur WordPress, je pensais que nous n'avions pas besoin de codage sur WordPress.
Support WPBeginner
Ce n'est pas obligatoire, mais pour les sites qui souhaitent montrer du code à leurs utilisateurs, voici quelques méthodes qu'ils peuvent utiliser.
Admin
Adamu Malte
Merci @Syed pour votre excellent tutoriel.
manasa
Beau blog avec d'excellentes informations. Merci, continuez à partager.
Anh
Super, je me demande juste comment vous pouvez poster le code à l'intérieur
1-click Use in WordPress
et toujours faire en sorte que le code ressemble à du texte.
Comme vous pouvez poster ce code
.entry-title { font-family:”Open Sans”, arial, sans-serif; font-size:16px; color:#272727; }1-click Use in WordPress
dans votre article sans changer la façon dont il s'affiche dans l'article.
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!
Plugin Synatx Highlighter Evolved
Ahmed
Merci Syed…. Excellent tutoriel. Je veux vous demander comment changer la taille de la police du code ?
Dave Mackey
Je pense qu'il y a un problème avec Syntax Highlighter Evolved dans les dernières versions de WordPress. Moi, et d'autres, avons des problèmes d'affichage incorrect des entités HTML. Voir les forums de support pour plus d'informations.
Md Abul Bashar
Comment afficher du code sans plugin, uniquement du code ?
John D
Personnellement, j'utilise WP-GeSHi-Highlight, qui utilise les codes GeSHi standard. Je pense avoir utilisé un prédécesseur du plugin présenté ici, mais j'ai eu du mal à trouver les codes de langue.
Ajay
Dernièrement, j'ai trouvé plus facile d'utiliser des GISTs pour afficher du code, puis d'intégrer simplement le Gist dans la publication.
Mikhail S.
@AJAY, parlez-moi davantage de l'utilisation de GIST pour afficher des exemples de code.
Merci !
Thomas A. Reinert
Je suis tout à fait d'accord. Ils sont joliment formatés et la coloration syntaxique est appliquée, ils sont forkables et versionnables aussi. Donc WP GIST est la solution pour moi, du moins.