Catégories

Écrire du code dans vos publications

Note : en décembre 2018, la version 5.0 de WordPress est sortie avec un nouvel éditeur (Gutenberg).
Cet article décrit la manière d’afficher des extraits de code informatique dans une publication avec l’éditeur disponible dans les versions précédentes de WordPress, qui peut être utilisé dans la version 5.0 de WordPress et versions ultérieures via l’extension Classic Editor.
Si vous utilisez le nouvel éditeur, lisez comment écrire du code avec le nouvel éditeur de blocs.

Que vous écriviez des extensions ou des hacks pour WordPress, ou que vous souhaitiez afficher des morceaux de code de votre propre site WordPress ou des extraits d’autres codes (en anglais) comme du HTML, CSS, PHP, ou du JavaScript, mettre du code dans votre publication qui ressemble à du code, mais qui ne se comporte pas comme du code, reste un défi fréquent pour les blogueurs.

Par défaut, la façon dont un morceau de code, écrit ou collé dans l’éditeur de publication de WordPress, est interprété dépendra du fait que vous utilisiez l’éditeur visuel ou l’éditeur texte. L’éditeur visuel considèrera le code comme un texte ordinaire, en convertissant (encodant) les caractères « < » et « > » dans leurs entités de caractères respectives, afin que le code ne soit pas interprété par un navigateur web. Les guillemets sont également convertis, mais n’oubliez pas que par défaut, WordPress applique également une correction automatique afin que le texte respecte les spécificités de votre langue. Par contre, l’éditeur texte ne convertit aucun de ces caractères, donc soyez bien conscient que le balisage HTML et CSS que vous utiliserez dans vos exemples en passant par l’éditeur texte sera interprété par un navigateur web et que vous pourriez vous retrouver avec une page à l’aspect bizarre et une mise en page cassée.

Veuillez noter que ce comportement peut différer en fonction de la version de WordPress, de l’éditeur de publication ou des extensions utilisées. Dans certaines anciennes versions de WordPress, les caractères « < » et « > » non reconnus étaient convertis dans leurs entités de caractères « &lt; » et « &gt; » et lorsqu’une balise HTML (en anglais) était trouvée dans la publication, la balise était laissée et interprétée par le navigateur web.

Code dans les paragraphes

Les balises HTML qui styleront le texte dans une police monospace, par exemple comme ceci. Ces balises sont <code> et <tt>. La dernière est rarement utilisée de nos jours, remplacée par <code>, plus utile et sémantiquement correcte, qui distingue un texte représentant un code informatique du langage naturel.

Ceci est un exemple qui mentionne du code dans un paragraphe,
à savoir les fonctions <code>wp_title()</code>, 
<code>wp_content()</code> et <code>wp_footer()</code>, 
qui sont très utiles dans WordPress.

C’est très bien pour qu’un morceau de texte non HTML ressemble à du code, mais que faire pour des balises HTML ?

Dans le modèle header.php,
recherchez la section <code><div class="header"></code>
pour modifier le titre <code><h1></code>.

Utiliser la balise <code> ne dit pas à WordPress d’encoder le HTML au sein de la balise ou encore de le supprimer de la publication. WordPress pense que vous utilisez ce balisage pour le formatage et le laisse tel quel. Un navigateur web voit alors une balise <code> suivie par une balise <div> et il crée donc un nouveau conteneur dans votre page. 

Pour éviter ce comportement, utilisez les entités de caractères ou caractères étendus pour représenter les caractères chevron gauche et chevron droit afin qu’un navigateur ne les interprète pas comme des balises HTML, comme ceci :

Dans le modèle header.php,
recherchez la section <code>&lt;div class="header"&gt;</code>
pour modifier le titre <code>&lt;h1&gt;</code>.

URLs dans les paragraphes

Par défaut, WordPress transformera toute phrase commençant par http: en lien. Si vous donnez un exemple sur la manière de créer un lien vers un article spécifique sur un site WordPress, au lieu d’écrire le lien comme ceci http://example.org/index.php?p=453 et qu’il soit affiché en tant que lien, utilisez plutôt les caractères étendus pour les barres obliques afin que WordPress ne « voit » pas un lien :

…lien vers une publication WordPress spécifique utilisant 
<code>http:&amp;#47;&amp;#47;example.org&amp;#47;index.php?p=453</code>
dans votre publication…

Liste des entités de caractère

Voici quelques entités de caractères HTML dont parle cet article :

(inférieur) = &lt; ou &#060;
(supérieur) = &gt; ou &#062;
/ = &#047;
[ = &#091;
] = &#093;
" = &quot; ou &#034;
' = &#039;
“ = &ldquo; ou &#8220;
” = &rdquo; ou &#8221;
‘ = &lsquo; ou &#8216;
’ = &rsquo; ou &#8217;
(esperluette) = &amp; ou &#038;

Vous trouverez en bas de page une liste de ressources pour vous aider à transformer automatiquement les balises HTML en entités de caractères, afin que vous n’ayez pas à les mémoriser.

Utilisation de la balise <pre>

Pour différencier votre code afin qu’il ressemble à un morceau de code qu’il est possible de copier coller directement dans un fichier, vous pouvez utiliser la balise HTML <pre>.

La balise <pre> demande au navigateur d’utiliser une police à espacement fixe, et de reproduire exactement tout ce qui se trouve à l’intérieur de cette balise. Chaque espace, saut de ligne, chaque caractère est reproduit avec exactitude.

<h3>Titre de la troisième section</h3>
<p>Ceci est le début d’une  
<a title="publication sur les relations" href="goodtalk.php">
bonne relation</a> entre vous et moi…

Le rendu de la balise <pre> n’est pas très « joli » mais il fait le travail. Des exemples de style peuvent être trouvés dans la section suivante. En tout cas, il affiche le code tel quel.

Par tel quel, nous entendons tel quel. Si vous avez une longue ligne de code, elle s’affichera en dehors de la page car aucune instruction n’indiquera au code de revenir à la ligne. Il ne le fera donc pas. Voici un exemple :

<h3>Titre de la troisième section</h3><p>Ceci est le début d’une <a title="publication sur les relations"
href="goodtalk.php">bonne relation</a> entre vous et moi et je pense que vous devriez le lire car il est important que nous ayons ces petites <a title="publication sur la communication"
href="communication.php">discussions</a> de temps en temps afin que nous sachions ce que nous ressentons…

Pas très joli, n’est-ce pas ? Pour éviter cette sortie de l’écran, ajoutez des sauts de ligne. Il est malheureusement difficile de savoir où rajouter ces sauts de ligne lorsque vous affichez du code censé être copié.

Si vous êtes familier avec le langage de programmation, vous saurez quand un saut de ligne ne met pas en péril une ligne de code. Si vous ne l’êtes pas, faites des essais. Insérez le code, ajoutez des sauts de ligne, puis retestez votre code avec ces mêmes sauts de ligne. S’il fonctionne toujours alors conservez ces sauts de ligne. Sinon, modifiez les endroits où vous avez inséré des sauts de ligne.

Si vous avez de longues lignes de code, envisagez de n’afficher que des extraits et fournissez un lien vers le code complet que vous pouvez placer sur votre site dans un fichier texte ou PHP, ou sur les nombreuses applications web permettant d’héberger du code.

Solutions de dépannage

Écrire du code au sein d’une publication WordPress peut être un défi, vous obligeant peut-être à surcharger les styles par défaut de WordPress et à utiliser des filtres pour « corriger » ce que vous écrivez. Si vous rencontrez des problèmes pour écrire du code au sein de votre publication WordPress, cette section peut vous aider.

Auto-correction des guillemets

Un problème fréquent lors de l’utilisation de code dans une publication est la fonctionnalité WordPress d’auto-correction des guillemets, fonctionnalité que l’on rencontre aussi dans les logiciels de traitement de texte. Par défaut, lorsqu’il affiche une page web, WordPress convertit les guillemets  » droits  » en « guillemets ouvrants et fermants » correspondant à la langue paramétrée lors de l’installation de WordPress, définie dans le fichier wp-config.php. Veuillez noter que la fonctionnalité d’auto-correction (également appelée guillemets intelligents) s’applique que vous soyez sous l’éditeur visuel ou sous l’éditeur HTML.

Sous l’éditeur HTML, vous pouvez éviter ce problème en entourant les guillements avec les balises <code>, <tt> ou <pre>. Une autre solution est de remplacer les guillemets par leurs entités de caractère respectives, par exemple :

<code><p class=& #34;rouge& #34;></code>
// Retirer les espaces entre & et #

au lieu de :

<p class="rouge">

Notez que dans certaines anciennes versions de WordPress, si vous modifiez une page après l’avoir publiée, l’éditeur HTML remplaçait toutes ces entités par leurs équivalents littéraux. Par exemple, si vous aviez soigneusement utilisé &#34 pour vos guillemets, ils seraient redevenus sous la forme « , et si vous sauvegardiez à nouveau la publication, la fonctionnalité d’auto-correction des guillemets les aurait transformés.

Ressources

Utilisation fréquente de code dans vos publications

Si vous utilisez fréquemment des formules, fonctions ou codes de programmation dans vos publications, envisagez d’utiliser une extension ou un outil PHP pour faciliter le processus. Si vous avez tendance à publier beaucoup de blocs de code, envisagez de placer le code sur des applications web d’hébergement temporaire d’extraits de code et créez sur votre site des liens vers ces extraits.

Applications web d’hébergement d’extraits de code

Traduit par Loïc Antignac
Relu par Jb Audras & Jenny Dupuy
Dernière mise à jour le 10 octobre 2021

Contribuer à la documentation en français de WordPress

Journal des modifications

10 octobre 2021 – Jenny Dupuy – Ajout de la mention « en anglais » pour les liens concernés, correction d’une ancre, et d’un lien avec ancre vers une entrée du glossaire, et du code décimal du guillemet fermant.