Salut à tous,
Je cherche a apprendre comment faire un site WP en full ajax avec WP. J'ai mes recherches perso mais si vous avez des tips ou des references je suis prenneur.
Mon idée est de faire de belles transitions entre les pages un peut a la façon de la grande époque de flash.
En gros il me faudrait chopper les event du menu OU d'un lien pour déclancher un envenement qui fairait le bousin ( une class JS transtion qui fait l'annimation + requette ajax et mets a jour le contenu... )
Avez vous quelque conseils, trucs et astuces ou n'importe quoi qui vous semble bien vu niveau technique?
Merci!
5 réponses
Salut,
J'avais eu la même problématique que toi il y a quelques années et après avoir passé un moment sur une solution maison j'ai opté pour AAPL (Advanced Ajax Page Loader) un très bon plug que j'ai pas mal customisé (notamment sur les transitions ou les appels JS après changement de page) tu peux le voir en action ici : http://cnek.fr
Pas de problème particulier pour le référencement ou analytics. (Google, pour Piwik j'arrive pas, grosse flemme)
Sinon depuis y'a eu de grosses perspectives dans ce domaine avec WP-API comme indiqué plus haut sur ce fil.
Des bonhommes sont en train de créer un front, style WebApp pour WP, avec React.js, c'est encore expérimental.
http://themeshaper.com/2015/05/07/theming-with-the-rest-api-meet-picard/
...ça a l'air prometteur.
Après y'a deux écoles c'est comme d'hab.
Perso je rêve d'une expérience à la "Flash" (les bons côtés uniquement hein ;)...) en HTML5.
On y vient mais plus du côté de WebGL, les sites traditionnels sont encore frileux (à juste titre, ça pose encore de nombreux challenges un full AJAX)
Mais il est fort probable que WP évolue vers un pur backend et gestionnaire de contenu avec du front 100% détaché vu l'explosion des devices de toutes formes.
my 2 cents...
@+
Hello Xiflex,
Je te conseil ce tutoriel qui est très bien fait : http://www.seomix.fr/navigation-ajax/
Merci pour vos réponses.
Je fais des tests quand j'ai le temps depuis quelques jours. Ca avance lentement car j'ai pleins d'autres trucs a faire, mais effectivement la question du referencement se pose. Il faut tester mais apperement cela fonctionne. L'idée d'avoir un # dans l URL me deplais mais bon, à tester tester tester....
Voici la liste des quelques liens que j'utilise pour faire mes recherche/tests: (si ça peut aider qqun...)
http://codyhouse.co/gem/animated-page-transition/
http://www.seomix.fr/navigation-ajax/
http://boiteaweb.fr/la-navigation-avec-ajax-7743.html
http://www.wp-spread.com/tuto-ajax-wordpress-methode-simple/
http://www.deluxeblogtips.com/2010/05/how-to-ajaxify-wordpress-theme.html
https://css-tricks.com/video-screencasts/81-ajaxing-a-wordpress-theme/
http://www.codeinwp.com/blog/load-old-wordpress-posts-on-the-same-page-with-ajax/
Voila, si vous avez d'autres resources, je suis preneur !
Merci à vous.
Salut et merci pour ta réponse qui m'apporte des éléments nouveaux.
J'ai mis un peut de coté le 100% ajax car cela pose encore quelques problemes. Mais j'ai pu faire un petit bout de code qui marche plutôt bien pour balancer une animation entre les chargements de pages.
L'idée est la suivante:
- mettre une classe sur tous les liens du site qui vont vers une autre page du site.
- capturer l'evenemt click en js, chopper l'attribut href, déclancher l'animation* et a la fin de l'animation faire un window location avec l attr precedement stocké en var
- la nouvelle page se charge et notre div en position fixed possede par defaut la class qui donne width 100%. on écoute window.onload et on retir la class width100% -> transition en sens arriere.
*par exemple on a une div en position fixed en width 0% height 100%; au click on ajoute une class qui donne width 100% avec un transition css
Cela impose d'avoir des temps chargement tolerable mais ça marche bien. C'est une base assez facile a mettre en place.
Voili, ça aidera peut etre qq'un.