Wordpress

Comment afficher facilement du code sur votre site WordPress (3 méthodes)

Voulez-vous afficher le code dans vos articles de blog WordPress? Si vous avez essayé d’ajouter du code comme du texte normal, WordPress ne l’affiche pas correctement.

WordPress exécute votre contenu à travers plusieurs filtres de nettoyage chaque fois que vous enregistrez une publication. Ces filtres sont là pour vous assurer que quelqu’un n’injecte pas de code via post editor pour pirater votre site web.

Dans cet article, nous allons vous montrer comment afficher facilement le code sur votre site WordPress. Nous vous montrerons différentes méthodes et vous pourrez choisir celle qui correspond le mieux à vos besoins.

Méthode 1. Afficher le code à l’aide de l’éditeur par défaut dans WordPress

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

Modifiez simplement le blog ou la page où vous souhaitez afficher le code. Sur l’écran d’édition de publication, ajoutez un nouveau bloc de code à votre publication.

Ajouter un bloc de code à vos publications WordPress

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

Ajouter du code à votre blog

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

Code PHP affiché dans WordPress

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

Méthode 2. Afficher le code dans WordPress à l’aide d’un plugin

Pour cette méthode, nous utiliserons un plugin WordPress pour afficher le code dans vos articles de blog. Cette méthode est recommandée aux 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 l’installation d’un plugin WordPress.

Lors de l’activation, vous pouvez continuer et modifier le message de blog où vous souhaitez afficher le code. Sur l’écran de post-édition, ajoutez le bloc ‘Code SyntaxHighlighter’ à votre post.

Bloc de code SyntaxHighlighter

Vous allez maintenant voir un nouveau bloc de code dans l’éditeur de publication où vous pouvez entrer votre code. Après avoir ajouté le code, vous devez sélectionner les paramètres de blocage dans la colonne de droite.

Paramètres de blocage de code SyntaxHighlighter

Tout d’abord, vous devez sélectionner la langue de votre code. Ensuite, vous pouvez désactiver les numéros de ligne, fournir le numéro de la première ligne, mettre en surbrillance la ligne de votre choix et désactiver la fonctionnalité pour rendre les liens cliquables.

Une fois que vous avez terminé, enregistrez votre message et cliquez sur le bouton Aperçu pour le voir en action.

Code affiché avec mise en évidence de la syntaxe

Le plugin est livré avec un certain nombre de couleurs et de thèmes. Pour changer le thème de couleur, vous devez visiter Paramètres »SyntaxHighlighter page.

Paramètres SyntaxHighlighter

Dans 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 au bas de la page.

Aperçu du bloc de code

Utilisation de SyntaxHighlighter avec Classic Editor

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

Enroulez simplement 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]
<? php
fonction privée get_time_tags () {
$ time = get_the_time ('d M, Y');
return $ time;
}
?>
[/php]

De même, si vous voulez ajouter un code HTML, vous allez l’enrouler autour du shortcode HTML comme ceci:

[html]
Un exemple de lien
[/html]

Méthode 3. Afficher le code manuellement dans WordPress (pas de plug-in ou de blocage)

Cette méthode est destinée aux utilisateurs avancés car elle nécessite plus de travail et ne fonctionne pas toujours comme prévu.

Il convient aux utilisateurs qui utilisent toujours l’ancien éditeur classique et souhaitent afficher du code sans utiliser de plug-in.

Tout d’abord, vous devez transmettre votre code via un outil de codage d’entités HTML en ligne. Cela modifiera votre balisage de code en entités HTML, ce qui vous permettra d’ajouter le code et de contourner les filtres de nettoyage WordPress.

Maintenant, copiez et collez votre code dans l’éditeur de texte et enroulez-le

et  Mots clés.

Ajouter du code manuellement dans l'éditeur classique

Votre code ressemblerait à ceci :Ceci est un exemple de lien

Vous pouvez maintenant enregistrer votre message et prévisualiser le code en action. Votre navigateur convertira les entités HTML et les utilisateurs pourront voir et copier le code correct.

Affichage manuel du code dans WordPress

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.