skip to Main Content

Comment afficher un code sur votre blog WordPress : tutoriel

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Possédez-vous un blog qui propose des astuces sur le développement Web ? Par défaut, l’affichage de code CSS et PHP n’est pas facile. Pour des raisons de sécurité, c’est une mesure qui est normalement désactivée sur WordPress, par crainte de voir ces codes exécutés sur le blog. Avez-vous déjà entendu parlé de la coloration syntaxique ?

syntaxhightlighter-plugin

C’est une pratique qui vise à colorer et à indenter ce dernier afin de le rendre plus lisible pour les développeurs. Dans ce tutoriel, je vous montrerai comment afficher les codes sur votre blog WordPress.

La première chose que vous devez faire c’est d’installer Syntax Highlighter EvolvedDurant l’activation du plugin, ce que vous devez faire c’est d’accéder à l’emplacement suivant : « Paramètres > Syntax Highlighter » pour configurer le plugin.

syntaxhighlighter-reglages

Les réglages de bases du plugin devraient fonctionner sur la plupart des blogs. Cependant, vous devez peut être examiner d’avantage ces réglages. Il vous sera possible d’activer l’option de dépliement des zones à code, afficher la barre d’outils etc.

Ce plugin repose beaucoup sur l’utilisation des shortcodes. Pour chaque langue, vous devez envelopper le code avec le nom de la langue dans le shortcode. Voici des exemples d’utilisation du plugin :

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

[php]

<?php

echo « Hello Worlds »;?>

[/php]

Ce code s’affichera ainsi qu’il suit :

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

hello-world-code

Pour ajouter une code CSS, il vous suffit d’ajouter ceci :

[css]

.entry-title {
font-family:”Open Sans”, arial, sans-serif;
font-size:16px;
color:#272727;
}
[/css]

Le code s’affichera ainsi :

code-css

Le plugin transformera automatiquement le code introduit à l’intérieur des shortcodes en code coloré de façon à simplifier la lecture pour les développeurs.

Comment afficher le code sans utiliser de plugin

Plusieurs blogueurs possèdent un blog avec des astuces en développement, alors ils ont besoin d’ajouter quelques codes CSS dans leurs articles assez généralement. Quelques fois, vous n’aurez pas nécessairement besoin d’utiliser une coloration syntaxique pour ajouter un code sur votre blog, la seul façon c’est d’encoder votre code en entité HTML de cette façon :

&gt;?php echo « Hello World »; ?&lt;

Le problème est que convertir le code de cette façon est très difficile. Vous pouvez utiliser un outil comme web2generator pour convertir les codes en entité HTML.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

En convertissant les codes PHP, HTML et JavaScript en entité HTML, vous pourrez les ajouter sur vos articles sans crainte que WordPress les suppriment. Pour avoir un style avancé, vous pouvez ajouter votre code dans le code dans les balises « <code> » & « </code> ».

C’est tout ce que vous devez savoir pour ce tutoriel. J’espère qu’il vous sera d’une grande utilité et vous permettra d’ajouter un code dans votre blog avec beaucoup de simplicité.

N’hésitez pas à proposer ce tutoriel à vos amis.

Cet article comporte 1 commentaire
  1. Ben non, il n’affiche rien du tout, aucune couleur, rien que le code entre les balises.. La seule chose qui fait c’est masquer les shortcodes qu’on a ajouté, ce qui fait qu’à l’arrivée, c’est comme si on n’avait rien installé, rien activé, rien noté. C’était pas le but.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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

Back To Top
12 Partages
Partagez8
Tweetez1
Enregistrer3