Voici mon premier "plugin" pour WordPress, enfin, plugin, c'est un bien grand mot, tout au plus un "filtre" mais comme tout le monde à l'air d'appeler cela un plugin...

Je me suis inspiré du WordPress Video Plugin d'Olivier Wunder.

Ce filtre intègre donc une playlist Deezer, une playlist imeem (ou un titre) dans WordPress, de façon simple, avec un code valide XHTML et accessible.

La syntaxe est la suivante :

- Pour une playlist Deezer [deezer + path + id + texte alternatif],
par exemple [deezer + 2548914 + 328169 + BestOf Editors (en flash)] affichera la playlist Deezer ayant un path=2548914, un id=328169 et rajoutera le texte alternatif "BestOf Editors (en flash)".

- Pour une playlist imeem [Pimeem + id + texte alternatif],
par exemple [Pimeem + VHIDyftK8k + Pardonne moi (Mylene Farmer/Benny Benassi)-Crazy (Seal)-The world is mine (David Guetta) (en flash)] affichera la playlist imeem ayant un id=VHIDyftK8k et rajoutera le texte alternatif "Pardonne moi (Mylene Farmer/Benny Benassi)-Crazy (Seal)-The world is mine (David Guetta) (en flash)".

- Pour un titre unique imeem [Mimeem + id + texte alternatif],
par exemple [Mimeem + akKQVny8q2 + Zazie - Je suis un homme (en flash)] affichera le titre ayant un id=akKQVny8q2 et rajoutera le texte alternatif "Zazie - Je suis un homme (en flash)".

Le code est donc à mettre entre crochet et chaque paramètre est séparé du suivant par un espace, le signe plus et un autre espace.

Le premier paramètre est le type de playlist (deezer, Pimeem, Mimeem avec P pour playlist, M pour monotitre).

Le dernier paramètre, le texte alternatif, ne doit pas contenir de caractères accentués (é, è, à, ...), il sert aux personnes n'ayant pas le plugin flash d'installé, aux aveugles, aux moteurs de recherches et devrait contenir une très courte description du contenu.

Vous pouvez allez voir sur mon blog de test WordPress, un billet contenant les 3 codes et leur rendu.

Je n'ai pas testé ce plugin ailleurs que sur le WordPress français 2.3.1 que j'ai installé, je ne sais donc pas s'il fonctionne avec d'autres configurations, il est livré tel quel, point !

Vous pouvez télécharger l'archive zip, décompactez là, uploadez le fichier di.php dans le dossier wordpress/wp-content/plugins, ensuite activez-le dans votre menu Plugins et c'est tout.

Suis-je clair ?

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 )

... non, pas mon blog, je reste sous DotClear mais je me suis installé un blog sous WordPress pour aider les copains et les copines qui galèrent grave avec WordPress. Cela sera tout de suite plus facile pour tester les modifications et pour mieux les guider.

C'est un WordPress en version 2.3.1 et français que j'ai installé.

J'espère que les changements que j'ai proposé cette nuit à MarcelDugomier sont bien ceux qu'il attendait (et sinon, je me replongerais dans le code).

Je m'attaque très prochainement aux soucis des Playmobils Estropiés & Associés.

Alors, ne soyez pas trop étonnés si débarquent bientôt des tutoriels pour WordPress, je ne peux délibérément pas les laisser se débrouiller tout seul

Je ne vous présenterais pas WordPress, je ne suis pas là pour cela mais par exemple, revoir les validités XHTML pour WordPress des tutoriels que j'ai présenté pour DotClear (Vidéos YouTube/Dailymotion, Deezer/Blogmusik) alors que l'éditeur visuel de WordPress est actif, si, cela visiblement il y a des demandes !

L'éditeur visuel de WordPress, tout comme celui de DotClear 2, c'est de la merde (purement subjectif comme constatation) et avec l'un, comme avec l'autre, pour ne pas avoir de transformation arbitraire du code, il est préférable de les désactiver. Sous DotClear 2, la présence d'une syntaxe Wiki relativise le problème, ce n'est pas le cas sous WordPress.

Beaucoup ne peuvent pas coder en XHTML instinctivement et ne peuvent donc pas se passer de ces éditeurs. L'insertion de codes de type flash (comme YouTube et autres) pose alors problème, surtout pour ceux qui veulent rester valide XHTML. Je vais tacher de les aider...

Recuperation MMS impossible

=>Détails du message :

De
Sujet

Cela aide, hein...