Je vais essayer de vous montrer qu'il est possible d'intégrer un player Deezer / Blogmusik dans un billet de WordPress, malgré la présence de l'éditeur visuel qui casse la code et le tout passant la validation XHTML.

1 - Prérequis :

- Je ne suis pas un pro de WordPress, je fais cela pour aider, alors attention aux commentaires. Si vous êtes un pro de WordPress et que vous savez mieux faire que moi, commencez déjà par vous poser la question comment cela se fait que c'est à moi qu'on vienne demander de l'aide et pas à vous... Par contre, tout commentaire venant apporter sa pierre à l'édifice est le bienvenu.

- Dans Options / Ecriture (de votre WordPress), assurez-vous d'avoir décoché l'option "WordPress doit automatiquement corriger les balises XHTML non valides". Parce que si vous ne savez pas mettre vos "simples" balises XHTML valides et que vous comptez sur WordPress pour le faire à votre place, on n'est pas sortie de l'auberge ! D'ailleurs, dans ce cas, je ne sais même pas ce que vous faites ici à lire ce tutoriel, c'est pour vous du chinois, ne vous infligez pas ce supplice

2 - Afin de travailler sur du concret, je vais résoudre le problème de Jérôme du blog Playmobils Estropiés & Associés : intégration d'une playlist Deezer dont il m'a donné le code fourni par Deezer.

Le code non valide :

<div style="width:180px;height:236px;">
<object width="180" height="236">
<param name="movie" value=" http://www.deezer.com/embedded/widget.swf?path=2548914&lang=fr&autoplay=0&id=328169"></param>
<embed src=" http://www.deezer.com/embedded/widget.swf?path=2548914&lang=fr&autoplay=0&id=328169" type="application/x-shockwave-flash" width="180" height="220">
</embed>
</object>
</div>

En suivant le protocole que j'avais donné pour rendre un code Blogmusik valide XHTML, cela ne fonctionne pas, pourquoi ? (alors que cela fonctionne très bien avec DotClear 1 et DotClear 2)

Le code obtenu est pourtant valide XHTML :

<div style="text-align: center;">
<object type="application/x-shockwave-flash" data="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" width="180" height="220">
<param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" />
<p>Editors - BestOf (en flash)</p>
</object>
</div>

Parce que l'éditeur visuel de WordPress tente de modifier le code et le "casse" ! Je vais donc vous proposer plusieurs façon de faire et vous laisser choisir celle qui vous plait le mieux :

• a) Utiliser les propriétés du Doctype transitionnel - Intégration à l'aide d'une iframe

La plupart des thèmes sous WordPress ont un Doctype XHTML transitionnel et permettent donc l'utilisation des "iframe" (qu'il n'est pas possible d'utiliser lorsque l'on code en XHTML strict). En intégrant le code du player Deezer par iframe, l'éditeur visuel ne verra pas le code du player, n'y mettra pas son nez et ne le cassera pas, nananère !

Commencez donc par vérifier que votre Doctype est bien un transitionnel en vous positionnant sur l'une des pages de votre blog et en demandant à votre navigateur d'afficher le code source. La première ligne se doit d'être le Doctype, si cette ligne contient le mot "Transitional", c'est gagné, vous pouvez utiliser les "iframe". (Si vous préférez regarder les fichiers de votre thème, jetez un oeil du côté du header.php)

La manipulation que je vous propose est donc toute simple, copiez le code valide XHTML utilisé juste au-dessus dans un fichier que vous nommez par exemple "Deezer1.html". Uploadez-le dans un répertoire précis sur votre hébergement (je l'ai mis dans un répertoire /share/ de mon répertoire wordpress) et utilisez ce code que vous mettez dans votre billet :

<p style="text-align: center"><iframe src="http://votrenomdedomaine/share/Deezer1.html" class="deezer" align="middle" frameborder="0" width="220" height="270" ></iframe></p>

Il faut bien évidemment adapter le chemin du src selon votre paramétrage.
Si vous avez envie de personnaliser la présentation par CSS, rajouter une classe "deezer" dans votre "style.css".
Attention, le player ayant width="180" et height="220", il faut que l'iframe soit plus grande que lui si vous ne voulez pas voir apparaitre de disgracieux ascenseurs ! Après plusieurs essais avec différents navigateurs, il semblerait que width="220" et height="270" soient les meilleurs paramètres pour l'iframe.

Lorsque vous voudrez intégrer une autre playlist, il suffira de recopiez le fichier Deezer1.html dans par exemple un Deezer2.html, de modifiez les DEUX "path", les DEUX "id" et le texte alternatif (compris entre <p> et </p>) puis de mettre dans votre billet, le même code de l'iframe en remplaçant Deezer1.html par Deezer2.html etc...

Pour voir le rendu ou vérifier la validité XHTML de cet exemple, je vous invite à lire "Deezer dans une iframe" sur mon blog de test WordPress.

• b) Méthode "à l'arrache"

Enfin, pas tout à fait car même en forçant, l'éditeur fait des siennes mais enfin bon, on en est pas très loin...

Reprenez le code valide XHTML du dessus. Positionnez votre curseur sur le début de la dernière ligne (le </div>) et faite un "backspace" pour la coller à la ligne précédente. Recommencez la même chose avec la ligne précédente (le </a> que vous collez à l'<img...> du dessus) et encore et encore jusqu'au <div style et obtenir un bloc supprimé de ses retours à la ligne. Faites la même chose avec le deuxième </div> et supprimer les deux balises <p> et </p> du texte alternatif pour obtenir quelque chose de ce genre :

<div style="text-align: center;"><object type="application/x-shockwave-flash" data="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" width="180" height="236"><param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" />Editors - BestOf (en flash)</object></div>

Ecrivez votre billet sous WordPress comme d'habitude mais sans insérer le code du player. Allez désactiver l'éditeur visuel (Utilisateurs / Modifier / décochez "Utiliser l'éditeur visuel pour écrire" puis cliquez sur le bouton "Mettre à jour l'utilisateur"). Retournez dans votre billet, insérer le bloc de code modifié (supprimé de ses retours charriots) et publier directement. Vous pouvez ensuite réactiver l'éditeur visuel mais si vous le réactivez, si vous retournez voir votre billet, surtout ne le modifiez pas, le code serait "cassé" ! Pour modifiez votre billet, il faut IMPERATIVEMENT penser à désactiver l'éditeur visuel avant de retourner sur le billet.

Pour voir le rendu ou vérifier la validité XHTML de cet exemple, je vous invite à lire "Deezer à l'arrache" sur mon blog de test WordPress.

• c) Méthode "Je veux modifier le billet après coup avec l'éditeur visuel actif mais pas utiliser d'iframe", alors il va falloir plus de deux neurones en marche" - Not blonde inside - Brun très foncé exigé

Je vais modifier le code utilisé dans le point (b) afin qu'il dérange le moins possible l'éditeur visuel. Il le dérangera quand même donc il faudra faire attention avant de publier ou de modifier votre billet de le remodifier légèrement à chaque fois.

Insérer donc ce code à la place :

<p style="text-align: center"><object type="application/x-shockwave-flash" data="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" height="236" width="180"><param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169"></param>Editors - BestOf (en flash)</object></p>

D'une fois sur l'autre, quand vous changez de playlist, il faut changer les DEUX "path", les deux "id" et le texte alternatif compris entre la balise </param> et la balise </object> (dans cette exemple, j'ai mis "Editors - BestOf (en flash)" comme texte alternatif).

Vous intégrez ce code dans votre billet au dernier moment, juste avant la publication, comme indiqué au point (b) précédent.

Lorsque vous voulez modifier votre billet, juste avant d'enregistrer, retournez sur le code du player. Vous constaterez que l'éditeur a rajouté un saut de ligne derrière le width="180"> soit juste avant le <param name="movie" . Il suffit de se positionner devant le <param name="movie" et de faire un backspace pour le recollez au width="180">. Si vous ne le faites pas, la fois suivante, il déplacera carrément le </object></p> derrière le width="180"> et le code sera complètement inutilisable, non seulement vous perdrez la validité XHTML mais aussi le player ne fonctionnera plus correctement. Et oui, c'est cela que d'avoir un éditeur visuel qui se mêle de ce qui ne le regarde pas

Pour voir le rendu ou vérifier la validité XHTML de cet exemple, je vous invite à lire "Deezer" sur mon blog de test WordPress.

AMUSEZ VOUS BIEN...

(Vous pouvez poser des questions s'il y a des choses qui ne vous semble pas claires, je ne mords pas, enfin, pas souvent )