À travers des exemples concrets, nous illustrerons comment l’usage d’AJAX, de JSON et de WP_query peuvent améliorer la gestion et le filtrage (ex: multiples catégories) de listes d’information dynamiques dans un environnement WordPress. Préalables: Bonne connaissance du HTML, du PHP et du Javascript. Idéalement une connaissance de AJAX. Comprendre le code généré par WordPress (“the loop”). Compréhension des “custom post type”. Note: Cette conférence s’adresse principalement à des personnes avec des connaissances en programmation.

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)