Logo site Des Geeks et des lettres

L'application pour surveiller / sauvegarder vos smartphonesL'oeil inquisiteur de Bibispy

Code source dans WordPress sans aucun plugin

Je n’ai pas beaucoup de temps aujourd’hui, mais je prends quelques minutes pour vous indiquer une astuce qui peut être utile pour les utilisateurs de WordPress.

Comment faire, sans plugin, pour insérer des lignes de codes dans WordPress sans que ce code ne prenne effet ? Je m’explique : sur un de mes blogs, j’ai voulu faire partager un infographique que j’avais créé. Sous cet infographique, se trouvait le lien renvoyant vers mon article original. Je voulais insérer ces bouts de code dans mon article, pour que les internautes puissant faire un copier-coller du bout de code et l’insérer dans leur site.

Nativement, WordPress n’est pas très explicite sur cet affichage. La plupart du temps, il faut installer un plugin dédié à ça, mais je voulais l’éviter, ne me servant que très peu de ce langage.

Lorsque nous affichons le code source de l’article (appuyez sur l’onglet Texte à droite de votre éditeur d’article), une option titrée « code » vous permet d’insérer la balise <code> dans votre article.

J’ai donc encadré mes lignes de code des balises <code> … </code> mais en vain : entre ces deux balises, mon image apparaissait sans indiquer son langage.

Voici donc l’astuce que j’ai trouvée :

1/ Continuer à encadrer votre bout de code des balises CODE, ou PRE. Personnellement, j’ai opté pour la balise <PRE> … </PRE>

2/ Avant de rentrer vos lignes de code, les copier-coller dans un éditeur de texte et remplacer les sigles < et > par leur équivalent HTML :

  • remplacer < par &lt;
  • remplacer > par &gt;

3/ Insérez le bout de code « transformé » entre vos balises CODE ou PRE. Ensuite revenez dans le visuel de votre éditeur de texte : comme par miracle, ça marche ! Voici le résultat en image :

Exemple en image :

Visitez mon blog Des Geeks et des lettres

Article complet sur Des Geeks et des lettres

Le même exemple en code :

<p style= »text-align: justify; »><img class= »aligncenter » alt= »Visitez mon blog Des Geeks et des lettres » src= »https://desgeeksetdeslettres.com/wp-content/uploads/2013/07/code-wordpress.png » width= »250″ height= »100″ /></p>
<p style= »text-align: center; »><a title= »Voir l’article complet » href= »https://desgeeksetdeslettres.com/web/code-source-dans-wordpress-sans-aucun-plugin » target= »_blank »>Article complet sur Des Geeks et des lettres</a></p>

Pour ceux qui n’ont pas bien compris :

Voici le contenu des deux paragraphes ci-desus en ligne de code (code source dans votre éditeur WordPress) :

J’ai pensé que cette astuce pourrait rendre service à quelques-uns d’entre vous.

Note Bene :

Mimie va sûrement faire des bonds s’il tombe sur cet article, mais pour ma part ça fonctionne ! J’attends son commentaire avec appréhension 🙁

Post Scriptum :

Ne pas tenir compte du « justify » dans le code devant l’image…

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

Article suivant:

Article précédent:

Recherche

A vos stylos !

  • Chris: “Bonjour, Quel est le nom de la table du plugin W3Total Cache car je ne la trouve…Déc 1, 09:22
  • Greg: “Liens de l'article mis à jour.Nov 27, 14:32
  • Greg: “Vraiment pénible ce problème. Pour ma part je l'ai résolu en créant un raccourci manuel dans mes favoris et en…Nov 20, 23:28
  • Jacqueline: “Je suis sur Safari.... même problème. Mon appli pour iPad ne fonctionne pas non plus.Nov 18, 08:44
  • Greg: “Ouais mais c'est vrai que ton article était bien senti. Ca le fait que tu le lises depuis Feedly :)…Nov 3, 21:00
  • Youness: “Bonjour, Merci pour cette article il ma aider enormement lors de la creation de mom projet Ma question…Nov 3, 20:29
Share This