Mieux Filtrer ses listes WordPress avec Ajax et WP_Query
2 j'aime6,915 vues
Le document présente des techniques pour améliorer le filtrage des listes dans WordPress en utilisant AJAX, offrant des solutions personnalisées pour les entreprises comme Mr. Wilkins, un distributeur de nourriture pour chien. Il discute des avantages de WordPress pour la gestion des listes, les défis du filtrage traditionnel, et propose des plugins et une approche basée sur customisation avec wp_query et AJAX pour un meilleur ciblage des données. En conclusion, cette méthode assure une meilleure expérience utilisateur et un site plus attrayant, tout en simplifiant le développement.
![JSON
JSON (JavaScript Object Notation) est un format de données
textuelles, générique,[...]Il permet de représenter de l’information
structurée. (Wikipédia)
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
Réponse à la requête d’AJAX:](https://image.slidesharecdn.com/pptwordcamplisteajaxv1-1-130630070854-phpapp02/85/Mieux-Filtrer-ses-listes-WordPress-avec-Ajax-et-WP_Query-38-320.jpg)
Mieux Filtrer ses listes WordPress avec Ajax et WP_Query
- 1. Mieux Filtrer vos listes avec AJAX *** Trucs et conseils pour mieux filtrer vos listes WordPress via AJAX
- 2. Symetris libère votre potentiel web. *** • Fondée à Montréal en 2004 • 9 spécialistes web à l’interne • Développement de sites web qui vont au-delà du marketing • Maîtrise des CMS open-source • Optimisation pour les appareils mobiles Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 3. Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion Qui sommes-nous? Brad Muncs Président Symetris 12 ans d’expérience dans le web Je mange du web matin, midi et soir Matthieu Gadrat Développeur PHP et Lead technologique 4 ans d’expérience avec des CMS open-source Amateur de ski
- 4. Ordre du jour 1. Les listes dans WordPress 2. Améliorer les filtres avec AJAX 3. Jetons un coup d’oeil au code 4. Conclusion Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 5. - 1 - Pourquoi WordPress est un outil de choix pour nos clients? Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 6. WordPress est plus qu’un blogue • CMS complet • Différent type de contenu (Post types) • Catégorisation facile à utiliser • WordPress est bon pour générer des listes Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 7. Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion Mr. Wilkins Mr Wilkins est un distributeur de nourriture pour chien • Entreprise de taille moyenne • Distribue à des détaillants (B2B) • A besoin d'un catalogue en ligne pour présenter ses produits Prenons comme exemple d’entreprise :
- 8. • WordPress est donc l'outil parfait pour un catalogue • Parfait pour Mr Wilkins Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 9. Dans WordPress, les listes sont déjà présentes • Liste de post • Archives • Catégories • Tags Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 10. Filtrage traditionnel dans WordPress • Via les URL • Par catégorie ou tag Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 11. Bénéfices • Ça fonctionne «Out of the box » • Intuitif • Pas de code Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 12. Obstacles pour les utilisateurs • Plus il y a de données, plus c’est laborieux • Pas de «Custom fields» • Pas de filtre complémentaire (Faceted search) • Visuellement décevant • La page doit être rafraichie à chaque nouvelle requête Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 13. • Contiennent beaucoup de données • Incluent des spécifications (Custom Fields) • Doivent être efficaces Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion Les listes de produit de Mr Wilkins:
- 14. Pour atteindre les objectifs de Mr. Wilkins, il faut étendre les fonctionnalités de filtre de WordPress Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 15. - 2 - Mieux filtrer les listes de « POST » dans WordPress Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 16. Plugin disponibles • Faceted Search • http://wordpress.org/plugins/faceted-search/ • Catégories / Tags • wp-posts Filter • http://wordpress.org/plugins/wp-posts-filter/ • Catégories / Tags Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 17. Plugin disponibles • ajax posts Filter • http://wordpress.org/plugins/ajax-post-filter/ • Quicksand jQuery Post filter • http://wordpress.org/plugins/quicksand-jquery-post-filter/ • Utilise jQuery Quicksand • Mauvais pour gros volume de données • ETC… Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 18. Il est possible que l'une de ces solutions, ou un autre plugin soient suffisants... ... Mr Wilkins, lui, n'est pas satisfait Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 19. Nous allons donc lui créer une solution personnalisée en utilisant AJAX avec WordPress (et WP_Query) Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 20. WP_Query est un objet à l’origine de la création des listes dans WordPress En fait, c’est le dénominateur commun de toute les requêtes. • WP_Query est roi • WP_Query est puissant • WP_Query est flexible Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 21. Qu'est-ce qu'AJAX? Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 22. Définition • Asynchronous JavaScript And XML • Échange de donnée XML et Javascript de manière asynchrone lors de la navigation d'un utilisateur sur une même page web. Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 23. Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 24. Avantages • Performant pour l'affichage d'un grand nombre de données (en petites doses) • Feedback constant à l'utilisateur • Permet des effets Javascript « Fancy » Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 25. Inconvénients • Attention à l'accessibilité • Si le JavaScript est désactivé, ça ne marchera simplement pas • Effort supplémentaire pour le SEO Mais nous pouvons les surmonter Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 26. Bénéfices de faire un module personnalisé • Utiliser WP_Query • Fonctionne avec tous les types de données ainsi que tous les champs • « Fancy » Javascript Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 27. Mr. Wilkins a hâte de commencer! Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 28. - 3 - Jetons un coup d'oeil au code Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 29. Dans WordPress, il y a déjà un mécanisme pour traiter les requêtes en AJAX pour la section « admin » • /wp-admin/admin-ajax.php • /wp-admin/admin-ajax.php?action=mon_callback • Toutes requête à ce fichier seront envoyées à la fonction appelé dans l'argument "action" Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 30. Créons un simple plugin • Post type • Taxonomie • Un Widget (affiche le filtre et le contenu) • Javascript • AJAX Callback Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 31. Détail des filtres Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 32. Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 33. Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 34. Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 35. Détail du contenu WP_Query et sa« Loop » Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 36. Le Javascript • N’oubliez pas d’inclure le JavaScript • Sur le premier chargement de la page: Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 37. Écouter les changements du formulaire et faire un « POST » Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 38. JSON JSON (JavaScript Object Notation) est un format de données textuelles, générique,[...]Il permet de représenter de l’information structurée. (Wikipédia) Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion Réponse à la requête d’AJAX:
- 39. Traitement de la réponse Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 40. Dernière étape: Le « Callback » Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 41. Envoyer la réponse JSON Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 42. Démo fonctionnelle Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 43. Les « Mais » • Beaucoup de données, utiliser un « Pager » ou un « infinite scroll » (comme Facebook) • Pas de Javascript? • Afficher le bouton «Submit» du formulaire et s'assurer que le « Widget » prenne en compte les requêtes POST • Référencement (SEO) • XML Sitemap très important pour compenser Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 44. - 4 - Conclusion Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 45. Bénéfices pour le client • Les clients de Mr. Wilkins trouvent rapidement ce dont ils ont besoin. • Le site de Mr Wilkins est plus attrayant que celui de ses compétiteurs. • Mr Wilkins peut utiliser le CMS pour augmenter son volume de contenu tout en gardant un site performant. Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 46. Bénéfices pour le développeur • Il n'a pas eu à se battre avec un plugin pour la présentation des produits • Facilité d’ajouter des champs et/ou filtres • Il a pu utiliser le merveilleux et plein de ressource WP_Query. • Son code est facilement réutilisable pour son prochain projet peut importe les post types ou taxonomie Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 47. Cette technique n'est pas juste valable pour les « Posts » • Users • Catégories • Commentaires Et permet un filtrage avancé • Sélectionner le nombre d’items par page • Filtrer sur la langue • Filtrer sur des plages de données (« range ») Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 48. Bref, que retenir ? Pas la peine d’utiliser un plugin existant pour filtrer des listes. Avec WP_Query et AJAX, vous bénéficiez d’un contrôle supérieur sur vos listes de données sans pour autant alourdir votre travail. Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
- 49. Merci ! Des questions Contactez-nous : info@symetris.ca brad@symetris.ca / matthieu@symetris.ca Présentation PPT disponible sur Slideshare Code on Github (https://github.com/symetris/wordcamp2013)