31 Dec Comment intégrer Supersized dans une page WordPress
la version 3.1.1 de Supersized a vu le jour et une nouvelle version de mon tutoriel est disponible.
Je voulais vraiment utiliser Supersized comme diaporama en fond de page sur mon site web basé sur WordPress. Après beaucoup d’expérimentation, j’ai finalement réussi à l’intégrer dans une page WordPress. Il semble que je ne sois pas le seul qui ait essayé de le faire et j’ai donc pensé que mon expérience pourrait être utile pour d’autres. Voici comment je l’ai fait. Je ne suis pas un spécialiste de la programmation et cela peut donc sans doute être fait de manière plus efficace; mais le principal est que ça fonctionne ! Vous pouvez vous rendre compte du résultat sur ma page A propos.
Voyez ci-dessous la procédure que j’ai utilisée.
Je n’ai rien modifié au code lui-même et tout le crédit pour la réalisation de ce superbe diaporama en fond de page va à Sam Dunn de buildinternet.com !
Mon but était uniquement d’avoir un diaporama sans navigation en fond de page dans une page web mais je pense que tout ce qui suit devrait rester valable si vous voulez utiliser Supersized comme fond pour un Post (billet) ou si vous voulez inclure la partie navigation de Supersized.
Ce tutoriel est basé sur l’idée que vous voulez conservez vos templates pour les pages inchangés. Donc, j’ai créé un nouveau groupe de css, page template et header pour la page dans laquelle je voulais intégrer Supersized.
Voici la procédure à suivre :
1. Téléchargez le fichier Supersized 3.0.zip depuis buildinternet.com. Copiez le contenu du dossier Supersized dans le dossier du thème que vous allez utiliser (dans : www.votresiteweb.com/wordpress/wp-content/themes/votrethemefavori/supersized/)
2. Dans le dossier de votre theme, faites une copie du header standard en lui donnant un nouveau nom (p.ex. header-supersized.php).
Allez dans l’Appearance Editor de WordPress (désolé, j’utilise la version anglophone de WordPress et ne connais pas les traductions françaises) et éditez ce nouveau fichier header-supersized. A la fin du <head>, ajoutez les scripts pour Supersized (ci-dessous). Vous ne pouvez pas copier de texte de cette page mais ce code provient directement du fichier default.html qui se trouve dans le dossier Supersized. Vous pouvez le copier à partir de là.
Au début du <body>, ajoutez les lignes suivantes :
Cette dernière ligne est importante: le div content-wrapper commence ici dans le template header mais n’est pas fermé dans ce fichier. Il le sera seulement plus tard dans le template page (voir ci-dessous).
Toutes les options peuvent être modifiées selon vos désirs, en suivant l’usage décrit sur le site de Supersized. N’oubliez pas d’ajouter des images dans le dossier slides bien sûr. Ci-dessus, l’exemple contient deux images mais vous pouvez en ajouter autant que vous le voulez, en vous assurant de ne pas mettre de virgule après la dernière image.
3. Dans le dossier de votre theme, faites une copie du template standard pour une page, en lui donnant un nouveau nom (p.ex. Supersized Page Template).
Allez dans l’Appearance Editor de WordPress et éditez ce nouveau template. Au début du template, il ne faut pas appeler le header standard mais bien le nouveau, en remplaçant :
par
Ceci appelle le nouveau header que nous venons de créer et contenant le code de Supersized.
Ajoutez les lignes suivantes à la fin du template page :
CORRECTION : Vous devez faire une copie du fichier footer.php, en le renommant en footer-supersized.php. Les lignes suivantes doivent alors être ajoutées à la fin du fichier footer-supersized.php file (au lieu du template de page), juste avant wp_footer();
Comme vous le voyez, le div content-wrapper est fermé ici.
La toute dernière ligne appelle Supersized lui-même.
Dans ce cas, vous devez bien sûr aussi modifier l’appel au footer, à la fin du template de page : au lieu d’appeler le footer standard, remplacer :
par
4. Copiez l’intégralité du contenu du fichier supersized.css dans le Stylesheet (style.css) ou ajouter un appel au fichier supersized.css dans votre nouveau header (header-supersized.php).
5. Si vous utilisez le plugin WP-Minify, assurez-vous d’exclure supersized.3.0.js de minify, sinon Supersized ne fonctionne pas correctement.
6. Bien sûr, n’oubliez pas de vous assurez que votre theme a bien un fond transparent !
Tout devrait maintenant être prêt ! Jusqu’à présent, je l’ai testé avec succès avec WordPress 3.0.4 dans Chrome 8.0 et Firefox 3.6. J’ai des problèmes avec IE8 : il se comporte de manière aléatoire et, parfois, il me faut plusieurs tentatives avant d’obtenir la page. Cela prend aussi parfois un temps très long pour charger la première image ou il reste en suspens en train de charger indéfiniment… IE6 fonctionne mais il semble que l’image ne soit pas correctement redimensionnée : il reste une bande noire en bas de page. La bonne nouvelle est que cela fonctionne sans problème avec IE9beta !
Voilà, profitez de Supersized dans WordPress !
J’espère que tout ceci est clair. Si vous avez des questions, n’hésitez pas à me demander. Et si vous avez amélioré mon approche, dites-le moi !
DORS SINTRUMENTAL
Posted at 00:01h, 19 Aprilsalut!!
ton tuto est super interresant!
mais le probleme c’est que sa fonctionne pas, les images ne se chargent pas.
pourtant j’ai bien suivie ton tuto avec la version 3.0 normalement sa dois marché sans probleme.
j’espere que tu pourrais m’aider par la suite.
merci d’avance
Webouriffant
Posted at 14:44h, 19 OctoberHello, jette un oeil à cet article http://garvinmedia.com/2011/04/wordpress-supersized-the-right-way/ qui fait référence à ce tuto