Mieux Filtrer vos listes avec AJAX
***
Trucs et conseils pour mieux filtrer
vos listes WordPress via AJAX
Symetris libère votre potentiel web.
***
• Fondée à Montréal en 2004
• 9 spécialistes web à l’interne
• Développement de s...
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
Qui sommes-nous?
Brad Muncs
Président Symetris
12 an...
Ordre du jour
1. Les listes dans WordPress
2. Améliorer les filtres avec AJAX
3. Jetons un coup d’oeil au code
4. Conclusi...
- 1 -
Pourquoi WordPress est
un outil de choix
pour nos clients?
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Cod...
WordPress est plus qu’un blogue
• CMS complet
• Différent type de contenu (Post types)
• Catégorisation facile à utiliser
...
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
Mr. Wilkins
Mr Wilkins est un distributeur de
nourri...
• WordPress est
donc l'outil parfait
pour un catalogue
• Parfait pour
Mr Wilkins
Briser la glace WordPress
Filtrer avec
AJ...
Dans WordPress, les listes sont déjà
présentes
• Liste de post
• Archives
• Catégories
• Tags
Briser la glace WordPress
Fi...
Filtrage traditionnel dans WordPress
• Via les URL
• Par catégorie ou tag
Briser la glace WordPress
Filtrer avec
AJAX
Déta...
Bénéfices
• Ça fonctionne «Out of the box »
• Intuitif
• Pas de code
Briser la glace WordPress
Filtrer avec
AJAX
Détail du...
Obstacles pour les utilisateurs
• Plus il y a de données, plus c’est laborieux
• Pas de «Custom fields»
• Pas de filtre co...
• Contiennent
beaucoup de
données
• Incluent des
spécifications
(Custom Fields)
• Doivent être efficaces
Briser la glace W...
Pour atteindre les
objectifs de
Mr. Wilkins, il faut
étendre les
fonctionnalités de filtre
de WordPress
Briser la glace Wo...
- 2 -
Mieux filtrer les listes
de « POST » dans WordPress
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Concl...
Plugin disponibles
• Faceted Search
• http://wordpress.org/plugins/faceted-search/
• Catégories / Tags
• wp-posts Filter
•...
Plugin disponibles
• ajax posts Filter
• http://wordpress.org/plugins/ajax-post-filter/
• Quicksand jQuery Post filter
• h...
Il est possible que l'une de ces solutions,
ou un autre plugin soient suffisants...
... Mr Wilkins, lui, n'est pas satisfa...
Nous allons donc lui créer une
solution personnalisée en utilisant
AJAX avec WordPress
(et WP_Query)
Briser la glace WordP...
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 ...
Qu'est-ce qu'AJAX?
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
Définition
• Asynchronous JavaScript And XML
• Échange de donnée XML et Javascript de manière
asynchrone lors de la naviga...
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
Avantages
• Performant pour l'affichage d'un grand nombre de données
(en petites doses)
• Feedback constant à l'utilisateu...
Inconvénients
• Attention à l'accessibilité
• Si le JavaScript est désactivé, ça ne marchera simplement
pas
• Effort suppl...
Bénéfices de faire un module personnalisé
• Utiliser WP_Query
• Fonctionne avec tous les types de données
ainsi que tous l...
Mr. Wilkins a hâte de commencer!
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
- 3 -
Jetons un coup d'oeil au code
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
Dans WordPress, il y a déjà un mécanisme pour traiter
les requêtes en AJAX
pour la section « admin »
• /wp-admin/admin-aja...
Créons un simple plugin
• Post type
• Taxonomie
• Un Widget (affiche le filtre et le contenu)
• Javascript
• AJAX Callback...
Détail des filtres
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
Détail du contenu WP_Query et sa« Loop »
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
Le Javascript
• N’oubliez pas d’inclure le JavaScript
• Sur le premier chargement de la page:
Briser la glace WordPress
Fi...
Écouter les changements du formulaire et
faire un « POST »
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conc...
JSON
JSON (JavaScript Object Notation) est un format de données
textuelles, générique,[...]Il permet de représenter de l’i...
Traitement de la réponse
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
Dernière étape: Le « Callback »
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
Envoyer la réponse JSON
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
Démo fonctionnelle
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
Les « Mais »
• Beaucoup de données, utiliser un « Pager » ou un
« infinite scroll » (comme Facebook)
• Pas de Javascript?
...
- 4 -
Conclusion
Briser la glace WordPress
Filtrer avec
AJAX
Détail du
Code
Conclusion
Bénéfices pour le client
• Les clients de Mr. Wilkins trouvent
rapidement ce dont ils ont besoin.
• Le site de Mr Wilkins ...
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’aj...
Cette technique n'est pas juste valable
pour les « Posts »
• Users
• Catégories
• Commentaires
Et permet un filtrage avanc...
Bref, que retenir ?
Pas la peine d’utiliser un plugin existant
pour filtrer des listes.
Avec WP_Query et AJAX, vous bénéfi...
Merci !
Des questions
Contactez-nous :
info@symetris.ca
brad@symetris.ca / matthieu@symetris.ca
Présentation PPT disponibl...
Prochain SlideShare
Chargement dans…5
×

Mieux Filtrer ses listes WordPress avec Ajax et WP_Query

5 353 vues

Publié le

À 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.

0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
5 353
Sur SlideShare
0
Issues des intégrations
0
Intégrations
109
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Mieux Filtrer ses listes WordPress avec Ajax et WP_Query

  1. 1. Mieux Filtrer vos listes avec AJAX *** Trucs et conseils pour mieux filtrer vos listes WordPress via AJAX
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. - 2 - Mieux filtrer les listes de « POST » dans WordPress Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
  16. 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. 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. 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. 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. 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. 21. Qu'est-ce qu'AJAX? Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
  22. 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. 23. Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
  24. 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. 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. 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. 27. Mr. Wilkins a hâte de commencer! Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
  28. 28. - 3 - Jetons un coup d'oeil au code Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
  29. 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. 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. 31. Détail des filtres Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
  32. 32. Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
  33. 33. Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
  34. 34. Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
  35. 35. Détail du contenu WP_Query et sa« Loop » Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
  36. 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. 37. Écouter les changements du formulaire et faire un « POST » Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
  38. 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. 39. Traitement de la réponse Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
  40. 40. Dernière étape: Le « Callback » Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
  41. 41. Envoyer la réponse JSON Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
  42. 42. Démo fonctionnelle Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
  43. 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. 44. - 4 - Conclusion Briser la glace WordPress Filtrer avec AJAX Détail du Code Conclusion
  45. 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. 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. 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. 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. 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)

×