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