Comment afficher facilement du code sur votre site WordPress

Voulez-vous afficher du code dans vos publications de blog WordPress ?

Si vous essayez d’ajouter du code comme du texte normal, WordPress ne l’affichera pas correctement. WordPress soumet votre contenu à plusieurs filtres de nettoyage chaque fois que vous enregistrez une publication. Ces filtres sont là pour s’assurer que quelqu’un n’injecte pas de code via un éditeur/éditrices de publication pour pirater votre site.

Dans cet article, nous vous montrerons les bonnes façons d’afficher facilement du code sur votre site WordPress. Nous vous afficherons différentes méthodes, et vous pourrez choisir celle qui correspond le mieux à vos besoins.

Pourquoi afficher du code sur un site WordPress ?

Si vous rédigez des publications de blog sur des sujets techniques ou créez de la documentation pour vos produits, il est très utile d’afficher des extraits de code. Vos utilisateurs/utilisatrices peuvent simplement copier le morceau de code et l’ajouter à leur site.

Cependant, l’affichage du code sur un site WordPress n’est pas si simple.

WordPress interprétera les extraits de code comme du code fonctionnel et tentera de l’implémenter sur votre site au lieu de l’afficher sous forme de texte. Il n’afficherait pas non plus le code avec précision, ce qui entraînerait des erreurs lorsque les utilisateurs/utilisatrices les saisissent sur leur site.

En outre, 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.

Cela dit, il y a différentes façons d’afficher du code dans WordPress. Vous pouvez cliquer sur les liens ci-dessous pour passer à la section de votre choix :

Méthode 1. Afficher le code en utilisant l’éditeur/éditrices par défaut de WordPress

Cette méthode est recommandée pour les débutants et les utilisateurs/utilisatrices qui n’ont pas besoin d’afficher le code très souvent.

Il suffit de modifier la publication ou la page du blog où vous souhaitez afficher le code. Dans l’écran de l’éditeur de contenu de WordPress, ajoutez un nouveau module Code à votre publication.

Vous pouvez maintenant saisir l’extrait de code dans la zone de texte du bloc.

Le bloc de code affiche une prévisualisation de votre code.

Après cela, vous pouvez enregistrer votre publication de blog et la prévisualiser pour voir le bloc de code en action.

Une fois que vous êtes satisfait de l’apparence de votre code, allez-y et publiez votre publication de blog.

En fonction de votre thème WordPress, le bloc de code peut avoir un aspect différent sur votre site.

Méthode 2. Afficher le code dans WordPress à l’aide d’une extension

Pour cette méthode, nous allons utiliser une extension WordPress pour afficher du code dans vos publications de blog. Cette méthode est recommandée pour les utilisateurs/utilisatrices qui affichent souvent du code dans leurs articles.

Il 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/utilisatrices peuvent facilement étudier le code et le copier.

Tout d’abord, vous devez installer et activer l’extension SyntaxHighlighter Evolved. Pour plus de détails, consultez notre guide étape par étape sur l ‘installation d’une extension WordPress.

Une fois activé, vous pouvez aller de l’avant et modifier la publication du blog où vous souhaitez afficher le code. Dans l’écran de modification de l’article, ajoutez le bloc « SyntaxHighlighter Code » à votre publication.

Vous verrez maintenant un nouveau bloc de code dans l’éditeur/éditrices de la publication où vous pourrez saisir votre code.

Après avoir ajouté le code, vous devez sélectionner les Réglages du bloc dans la colonne de droite.

Tout d’abord, vous devez sélectionner le langage de votre code, comme PHP, CSS, Java, etc. Ensuite, vous pouvez désactiver les numéros de ligne, indiquer le numéro de la première ligne, mettre en évidence la ligne de votre choix et désactiver la fonctionnalité permettant de rendre les liens cliquables.

Une fois que vous avez terminé, enregistrez votre publication et cliquez sur le bouton de Prévisualisation pour la voir en action.

L’extension est livrée avec un certain nombre de jeux de couleurs et de thèmes.

Pour modifier le thème de couleur, vous devez vous rendre sur la page Réglages  » SyntaxHighlighter.

À partir de la page de réglages, vous pouvez sélectionner un thème de couleurs et modifier les réglages de SyntaxHighlighter.

Vous pouvez enregistrer vos Réglages pour voir une Prévisualisation du bloc de code au bas de la page.

Utilisation de SyntaxHighlighter avec l’éditeur classique

Si vous utilisez toujours l’ancien éditeur WordPress classique, voici comment utiliser l’extension SyntaxHighlighter pour ajouter du code à vos publications de blog WordPress.

Il vous suffit d’insérer votre code entre crochets avec le nom de la langue. 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’enroulerez autour du code court HTML comme ceci :

<a href="example.com">A sample link</a>

Méthode 3. Afficher manuellement le code dans WordPress (Sans extension ni bloc)

Cette méthode est réservée aux utilisateurs/utilisatrices avancés car elle requiert plus de travail et ne fonctionne pas toujours comme prévu.

Il convient aux utilisateurs/utilisatrices qui utilisent encore l’ancien éditeur/éditrices classique et qui souhaitent afficher du code sans utiliser d’extension.

Tout d’abord, vous devez faire passer votre code par un outil d’encodage d’entités HTML en ligne. Il transformera votre balise de 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>
&lt;p&gt;&lt;a href=&quot;/home.html&quot;&gt;Ceci est un exemple de lien&lt;/a&gt;&lt;/p&gt ;
</pre></code>

Vous pouvez maintenant enregistrer votre publication et prévisualiser le code en action.

Votre navigateur convertira les entités HTML et les utilisateurs/utilisatrices 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 pouvez également consulter notre liste ultime des conseils, astuces et hacks WordPress les plus recherchés et comment augmenter le trafic de votre blog.

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.