Afficher du code source sans plugin dans WordPress

Procédure de conversion du code source via TinyMCE

Voici la procédure que je suis pour partager les astuces PHP sur WordPress :

  1. Créez un nouvel article ou une nouvelle page depuis votre administration WordPress ;
  2. Dans la zone de saisie de texte en mode Visuel, collez votre bout de code source – PHP par exemple ;
  3. Cliquez dessus pour placer le curseur dans la ligne de code puis déroulez le menu Format. Choisissez Pré-formaté, cela aura pour effet d’entourer le code de balises <pre> ;
  4. Vérifiez que le code a bien été converti en HTML en passant par l’onglet HTML de TinyMCE (l’éditeur de WordPress) ;
  5. Vous remarquerez que les guillemets ouvrant donne ceci &lt; et les fermants &gt; preuve de la conversion ;

En résumé, il suffit de coller du code dans l’éditeur puis de cliquez sur le bouton du mode HTML pour convertir le code. N’oubliez pas d’ajouter les balises <pre> et le tour est joué !

Adaptation visuelle via CSS

Pour donner un aspect programmation à vos lignes de code, rendez-vous dans Apparence puis Editeur. Modifiez ensuite le fichier style.css de votre thème.

Recherchez tout d’abord si la balise pre est présente ou non. Si ce n’est pas le cas, ajoutez des propriétés CSS dans le même genre que celles-ci :

Ceci aura pour conséquence d’appliquer un style au pré-formaté.

pre {
background:none repeat scroll #f9f9f9;
border-left:5px solid #ccc;
clear:both;
font:normal normal normal 11px/18px Monaco, monospace;
margin-bottom:18px;
overflow:auto;
padding:10px 15px;
}

Différence entre la balise pre et code ?

La première différence à mes yeux reste que la balise pre s’utilise pour un paragraphe alors que la balise code peut s’appliquer pour un mot dans un paragraphe.

Par exemple, si vous consultez le code source de cet article via le navigateur vous vous apercevrez que j’ai utilisé les 2 types de balises.

Il existe sans doute d’autres différences mais je ne les connais pas !

Cette technique fonctionne avec du code HTML, CSS mais notamment PHP. Je n’ai pas essayé pour d’autres langages mais je vous invite à la tester car elle présente le gros avantage de ne pas avoir recours à des plugins souvent très lourds (nombreuses feuilles de styles CSS et requêtes).

Crédits photo : Laughing Squid

17 commentaires

  1. truffo

    La différence entre la balise code et pre est fondamentale.

    La balise indique un texte pré-formaté, idéalement elle ne devrait jamais être utilisé et être remplacer par du css (le jour l’ensemble des navigateurs le permettra).

    La balise code indique un code informatique.

    Une bonne utilisation voudrait que l’on utilise la balise code stylé comme la balise pre, mais ca n’est pas trop possible aujourd’hui.

    1. Aurélien Denis auteur de l’article

      En effet, si l’utilisation d’un plugin oblige l’insertion de shortcode ou autre code spécifique, il te faudra les supprimer. C’est pour cela que l’insertion de code doit être bien réfléchie dès le début pour être la moins contraignante par la suite.

      Dans mon code, ce n’est que du HTML ni plus ni moins. Liberté totale donc !

  2. 4h18

    Le seul petit bemol, c’est que le code est assez « illisible » sans la coloration syntaxique.

    De fait, le côté « éducatif » du code dans un article perd un peu de son sens.

    Il est vrai que ce type de plugin est assez lourd, mais pour une fois, je dirais qu’il n’est pas inutile de le conserver.

  3. Julien

    Merci pour cette astuce que je ne connaissais pas, je me suis arraché la tête pendant 1 heure pour trouver une solution et la voilà enfin!

    Merci beaucoup ça marche à 100%!!!

  4. Gustave

    Bonjour, je souhaite mettre de la publicité sur mon blog. On me dit de « copier coller ces scripts dans le code sources de vos sites ». Mais je ne trouve pas où se situe ce fameux code sources… ? Merci de votre aide. Gustave

    1. Aurélien Denis auteur de l’article

      Si vous n’êtes pas développeur, je vous recommande de faire très attention avant d’aller modifier dans Apparence > Editeur, le code de votre thème. Le plus simple est de se limiter aux widgets de type texte pour faire cela dans un premier temps.

      1. financequebecconseils

        Bonjour, Si Editeur n apparait pas est-ce le theme qui ne permet pas l accès au code? Comment connaitre les thèmes qui le permettent ? Merci de votre aide..

  5. Fabien

    Bonjour !

    Si je souhaite ajouter un script de google analytics, puis-je le mettre dans une page ou dans un article ?

    Si non, comment puis-je avoir accès au code source ?

    Merci !
    Fabien

  6. globereveuse

    Bonjour à tous !!!

    Besoin de votre aide !! J’ai un blog sous wordpress et voici ce que l’on me demande :

    Afin de proposer votre site aux annonceurs, nous devons d’abord nous assurer que vous êtes bien le propriétaire de globereveuse.com.
    Veuillez sélectionner une méthode de vérification :

    Vérification par commentaire HTML (recommandé pour les blogs hébergés sur des plateformes externes)

    Insérez dans le code source de votre site (invisible pour les internautes)
    Cliquez sur le bouton Vérifier ci-dessous.
    Supprimez du code source de votre site

    Je ne sais pas ce qu’est mon soure code ! Ou je le trouve? et comment je procède !

    merci de votre aide à tous !

    Aurélie

    1. Aurélien Denis auteur de l’article

      Bonjour,

      vous n’êtes pas du tout dans le bon tutoriel.

      Ce qu’il vous ait demandé nécessite d’insérer une ligne de code dans la partie de votre site. Il vous faut modifier le fichier header.php de votre thème WordPress à l’aide d’un client FTP.

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX