Il peut souvent être utile d’insérer du javascript dans un post, notamment si l’on veut écrire un tutoriel sur le sujet.
Dans la théorie, WordPress, depuis la version 2.8.6, permet son utilisation. Dans la pratique… l’éditeur visuel pose souvent problème.
Le codex WordPress, pour outrepasser les problèmes éventuels de javascript, conseille l’utilisation du plugin TextControl. Je me suis empressé de le tester, mais ce dernier pose de nombreux problèmes d’encodage.
Refusant de m’avouer vaincu face à un problème aussi trivial, j’ai continué mes tests et recherches, pour parvenir à une solution simplissime : pour insérer du javascript dans le contenu d’un article, il suffit de désactiver l’éditeur visuel ! Ce qui se fait aisément dans votre profil utilisateur.
La marche à suivre la plus simple, à mon avis, est d’écrire “normalement” son article, d’enregistrer le brouillon, puis de désactiver l’éditeur visuel afin de finir l’édition du post en y incluant le javascript souhaité.
Voici un exemple de cette “technique” permettant même de se servir de jQuery :
- Démo
- JS
jQuery(function($){
$(‘#test .demo div a’).click(function(){
alert(“Bravo, vous avez lu ce post jusqu’au bout et même testé cet exemple!”);
return false;
});
$(‘#test .demo div’).show();
$(‘#test a.title’).click(function(){
$(‘#test a.title’).next(‘div’).hide().parent().removeClass(‘selected’);
$(this).next(‘div’).show().parent().addClass(‘selected’);
$(‘#test’).height($(this).next(‘div’).height()+50);
return false;
});
$(‘#test’).height($(‘#test .selected div’).height()+50);
}); - CSS
#test {
position:relative;
padding-bottom: 10px;
}
#test li {
display: inline;
margin-right: 5px;
}
#test li.selected {
border: solid black;
border-width: 0px 0px 1px 1px;
}
#test div {
display: none;
}
#test .selected div {
position:absolute;
top: 20px;
}
kayorn (6 comments), le 18 décembre 2010
Bonjour,
J’aimerais que ce soit aussi simple mais malheureusement, je ne dispose que d’un seul fichier dans lequel j’ai un code javascript suivi du html et qui fonctionne très bien.
si je rentre la totalité du script, même en html, je ne déclenche jamais le javascript.
j’ai même activé Exec-PHP.
rien
George (168 comments), le 19 décembre 2010
Il est possible que certains plugins installés interfèrent avec cette méthode…
Wordpress est-il à jour ?
Si ton javascript fait appel à jQuery, l’utilisation du $ est-elle correcte ?
Dans le doute, rempaces tous les $ par jQuery.
J’ai besoin d’un peu plus d’infos si tu veux de l’aide…
kayorn (6 comments), le 19 décembre 2010
bonjour,
j’ai mis la page en ligne pour essai ici
http://www.web2aconcept.fr/CalculIMC.html
la seule soluce que j’ai pu trouver, c’est de placer cette page en src d’un iframe placé dans le post.
George (168 comments), le 20 décembre 2010
La faute n’en revient pas à WordPress mais à ton code.
D’une part, en affichant la source de la page que tu as mis en ligne pour essai, j’ai pu voir qu’il y avait d’innombrables sauts de ligne superfétatoires.
Hors, même en mode html, WordPress va transformer un saut de ligne en contenu d’une balise <p>.
En les supprimant, tu résoudra la moitié de tes problèmes.
La moitié seulement, car ton JS n’attends pas que la page soit chargée.
Pour résoudre ce second problème, il suffit de le placer à l’intérieur d’une déclaration jQuery du type :
jQuery(function($){
//mettre le code ici
});
ou un équivalent, par exemple :
window.onload = function() {
//mettre le code ici
}
En espérant avoir été clair
kayorn (6 comments), le 21 décembre 2010
Bonjour,
J’ai fait les modifs mais ça ne donne rien.
J’ai désactivé l’éditeur (plugin TinyMCE Advanced)
J’ai d’abord essayé sur la page http://www.web2aconcept.fr/CalculIMC.html
ça fonctionne avec tes modifs
George (168 comments), le 21 décembre 2010
En définitive, ça marche sous WordPress ou pas ? Je n’ai pas bien compris…
Si ça ne fonctionne pas, il reste toujours une alternative : éditer ton post directement en SQL (via phpmyadmin par exemple).
Pour cela, trouve l’ID de ton post (présent à la fin de l’url quand tu l’édites), recherche dans la table wp_posts l’article correspondant, et édite le champs post_content de la ligne ayant à la fois la bonne ID et la valeur publish dans le champs post_status.
Sans avoir accès à l’admin de ton blog, je vois mal ce que je peux faire de plus pour toi, désolé.
kayorn (6 comments), le 21 décembre 2010
non sous wordpress, le script ne s’exécute pas.
J’ai essayé également avec myadmin, le tableau s’affiche mais javascript ne veut rien savoir.
Je ne vais pas t’ennuyer indéfiniment avec ce gadget.
Je l’afficherai en iframe.
kayorn (6 comments), le 24 décembre 2010
j’ai oublié de te remercier!
Joyeux Noël
George (168 comments), le 24 décembre 2010
Joyeux Noël à toi aussi !
Et désolé de ne pas avoir pu t’aider.
Ce n’est pas évident quand on n’a pas accès directement au code…
kayorn (6 comments), le 24 décembre 2010
Bonjour,
Ce matin j’ai trouvé un plugin qui fait cela… c’est Inline Javascript Plugin (trouvé en associant Geoportail et wordpress).
J’ai testé en entrant un script API du contrat Geoportail et ça fonctionne.
J’ai pas testé pour le script qui nous intéresse mais a priori, ça devrait le faire.
Il suffit de mettre dans le contenu, le code (html et javascript) entre les 2 balises [inside] et [/inside].
George (168 comments), le 24 décembre 2010
Merci pour l’info, ça peux toujours servir.
Fabrizio (1 comments), le 20 février 2011
Merci bien pour ce petit tutto qui m’aura bien servi. J’ai testé différent plugins qui demandent beaucoup de manipulations pour au final avoir le même résultats que celui du paramétrage de son compte utilisateur. Merci !!!
britain (2 comments), le 25 janvier 2012
passer en mode HTML, mettre le code et enregistrer l’article, SURTOUT NE PAS REPASSER EN MODE VISUEL !!!!