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.
Vous pouvez maintenant entrer l’extrait de code dans la zone de texte du bloc.
Après cela, vous pouvez enregistrer votre publication de blog et la prévisualiser pour voir le bloc de code en action.
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.
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.
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.
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.
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.
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
etMots clés.
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.
