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;
    }

16 commentaires

  • 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 (169 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 (169 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 (169 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 (169 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 (169 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 !!!!

  • L'ourson mal léché (1 comments), le 25 mai 2013

    Bonjour,

    J’ai tester en mode HTML sans repasser en mode visuel et chez moi cela ne marche pas.
    Je suis en WP 3.5.1. Par contre la méthode de George fonctionne sans soucis.

    Merci pour l’astuce.

    Néanmoins, je trouve dommage de devoir s’embêter autant ou de devoir installer un plugin et passer par des shortcodes. Si quelqu’un trouve un moyen de modifer le WP pour que ce soit intégrable sans s’embêter, ca m’intéresse :)

  • alruna (1 comments), le 1 juin 2013

    Merci beaucoup pour votre information concernant le plugin Inline Javascript.
    Je l’ai installé sur une version 3.4.1 et pour le moment :
    il fonctionne et il ne semble pas créer de problèmes avec les autres plugins installés.

  • Petit slideshow en jquery « Le Blog de Cyol, le 8 janvier 2014

    […] PS : Merci à LE GLOB DE BARGEO pour son astuce permettant d’intégrer du javascript directement dans le corps d’un article WordP… […]

Poster un commentaire

Subscribe without commenting