Comment afficher du code dans les articles WordPress

L'un des problèmes les plus courants rencontrés par les nouveaux utilisateurs de WordPress est l'affichage de code dans les articles. Le problème survient lorsqu'un utilisateur essaie de partager un extrait de code dans ses articles. Par défaut, WordPress filtre le code et il devient impossible à lire. Dans cet article, je vais vous montrer comment afficher du code dans les articles WordPress.

Utiliser les entités HTML pour afficher du code dans les articles WordPress

Les entités HTML sont des codes spéciaux analysés par les navigateurs pour afficher le caractère associé à cette entité particulière. Par exemple :

• & devient &
• &lt; devient <
• &gt; devient >

En utilisant les entités HTML, vous pouvez afficher du code dans vos articles WordPress.

<div class="awesome"> sera affiché dans le navigateur comme ceci :

<div class="awesome">

Cette méthode est particulièrement utile si vous souhaitez simplement afficher quelques lignes de code. Cependant, cette méthode peut être difficile à appliquer manuellement pour plusieurs lignes de code.

Pour résoudre ce problème, vous pouvez utiliser un encodeur d'entités HTML en ligne, comme celui-ci. Il suffit de saisir le code que vous souhaitez convertir et d'appuyer sur le bouton d'encodage. Il convertira votre code en entités HTML et vous pourrez coller ce code en toute sécurité dans la balise <code></code>.

Utiliser un plugin pour afficher du code dans les articles WordPress

Si vous partagez fréquemment des extraits de code dans vos publications, les méthodes mentionnées ci-dessus ne fonctionneront pas pour vous. La première chose à faire est d'installer et d'activer le plugin SyntaxHighlighter Evolved. Il vous évitera d'avoir à convertir le code en entités HTML. De plus, il mettra en surbrillance le code pour l'afficher dans un format beaucoup plus lisible.

Cela fonctionne dès la sortie de la boîte, tout ce que vous avez à faire est d'encapsuler votre contenu autour de balises linguistiques spécifiques. Par exemple, si vous partagez un code principalement en PHP, vous encapsulerez votre code comme ceci :

[php]
<?php
function themelab_demo_code() {
$i = 1;
while ($i <= 10):
echo $i."<br />";
$i++;
endwhile;
}
themelab_demo_code();
?>
[/php]


Il apparaîtra sur votre site, comme ceci :

<?php
function themelab_demo_code() { 
$i = 1;
while ($i <= 10):
    echo $i."<br />";
    $i++;
endwhile;
}
themelab_demo_code();
?>

Pour différentes langues, il existe différents alias que vous pouvez utiliser. Voici quelques-uns des alias les plus couramment utilisés :

• Pour afficher du code HTML, utilisez [html] [/html]
• Pour le CSS, utilisez ceci : [css][/css]
• Pour MySQL, utilisez ceci : [sql][/sql]
• Pour Javascript, utilisez ceci : [javascript][/javascript]

J'espère que cet article vous a aidé à afficher du code dans les articles et les pages WordPress.

Si vous avez aimé cet article, rejoignez ThemeLab sur Twitter et Google+.