Le but de ce tutoriel est de montrer comment utiliser l'insertion d'un code source (html, php, java, ...) affiché comme du texte (donc sans être exécuté) dans un article WordPress et sans passer par une extension. Il y a deux types de manipulation à faire : insérer quelques lignes de commandes dans header.php de WordPress et l'intégration elle-même dans un article. Je me suis basé sur sur SHJS (Syntax Highlighting in JavaScript), un programme en JavaScript qui met en évidence les passages de code source dans les documents HTML. SHJS est distribué sous licence GNU General Public License version 3.
- Tout d'abord, il faut télécharger, décompresser et mettre le dossier shjs-0.6 dans /votre/blog/wp-content. Téléchargement : shjs-0.6.zip ou shjs-0.6.tar.gz.
- Le script à insérer en toute première ligne de header.php (attention, ne pas insérer ce code dans single.php ou autre, car cela provoque des erreurs d'affichage avec Internet Explorer) :
<!-- Add shjs --> <script type="text/javascript" src="./wp-content/shjs-0.6/sh_main.js"></script> <script type="text/javascript" src="./wp-content/shjs-0.6/lang/sh_php.js"></script> <script type="text/javascript" src="./wp-content/shjs-0.6/lang/sh_html.js"></script> <link type="text/css" rel="stylesheet" href="./wp-content/shjs-0.6/css/sh_dull.css"> <body onload="sh_highlightDocument();"> <!-- Fin shjs -->
Explications :
Cette ligne charge le script principal de SHJS :
<script type="text/javascript" src="./wp-content/shjs-0.6/sh_main.js"></script>
Cette ligne charge la prise en charge du langage PHP :
<script type="text/javascript" src="./wp-content/shjs-0.6/lang/sh_php.js"></script>
Cette ligne charge la prise en charge du langage HTML :
<script type="text/javascript" src="./wp-content/shjs-0.6/lang/sh_html.js"></script>
Il existe d'autre langages pris en charge comme Bison, C, C++, C#, ChangeLog, CSS, Desktop files, Diff, Flex, GLSL, Haxe pour les principaux. Ils se trouvent dans ./wp-content/shjs-0.6/lang. À vous de les ajouter en fonction de vos besoins.
Cette ligne charge le style d'affichage (couleur de fond, couleur du texte, pour visualiser les différents styles c'est sur cette page) :
<link type="text/css" rel="stylesheet" href="./wp-content/shjs-0.6/css/sh_dull.css">
Ils se trouvent dans ./wp-content/shjs-0.6/css. À vous de le changer en fonction de vos besoins.
- Il faut désormais pré-formater les codes sources que vous voulez afficher dans votre article (c'est le gros point négatif de cette méthode sans plugin) : les symboles < (inférieur), les > (supérieur) et guillemet (2 traits verticaux) doivent être convertis en < et > et " pour pouvoir être affichés sans être interprétés en tant que code à proprement dit, exemple :
Pour afficher :
<script type="text/javascript" src="./wp-content/shjs-0.6/sh_main.js"></script>
Il faut formater comme ceci :
<script type="text/javascript" src="./wp-content/shjs-0.6/sh_main.js"></script>
Pour convertir et vous aider à mettre en page, voici un outil indispensable pour faire ce formatage, aidez-vous de cette application :
du_code_source_au_html ou bien cette application.
- Une fois avoir pré-formaté les codes sources, il suffit de les insérer dans le corps de votre article en basculant du mode "visuel" en monde "HTML" et le coller ces balises :
<pre class="sh_html"> votre code source pré-formaté </pre>
Voilà votre code source s'affiche dans un joli cadre avec des couleurs en fonction du contenu. J'espère avoir été suffisant clair, si vous avez des questions ou des idées à me soumettre, n'hésitez-pas à me contacter par commentaire ou par courriel.
bonjour je voudrais savoir comment faire pour que mon site chois en 1ére pajes merci de me répondre....
aider moi a référencer mon site je suis un jeune créateur merci beaucoup....
http://www.france-devis-demenagement.fr/
Google n'est peut-être pas l'ami que l'on croit, mais il a l'avantage de répondre à nos questions : ici
Bonjour. Avez vous des conseils pour augmenter la visibilité d'un site web ?
Bonjour, éventuellement, est ce que ce code permet de corriger le html. Des fois, nous sommes amenés à faire des modifications en ligne directement.
Bonjour,
Très bon article
Merci pour cet excellent article