Comment créer un filtre pour charger un message personnalisé avec AJAX dans WordPress ?

Dans cet article, nous vous montrerons comment charger facilement et rapidement des messages personnalisés en utilisant AJAX dans WordPress.

La tâche consistera à créer un filtre pour les types de projets, ce qui nous permettra de charger une liste de projets avec le type sélectionné.

WordPress – comment créer un filtre AJAX ?

Qu’est-ce que vous devez savoir

Tout d’abord, vous devez connaître la page du constructeur WPBakery sur laquelle nous basons la construction de notre site web. Dans nos guides précédents, vous trouverez toutes les connaissances nécessaires pour comprendre le processus de création de widgets pour WPBakery.
Lien vers l’article : REDO JSComposer Additional – plugin ajoutant un widget à WPBakery.
Lien vers le plugin WPBakery : https://wpbakery.com/
Si vous ne connaissez pas WPBaker, vous devez connaître la page d’un autre constructeur – Elementor. C’est l’un des plugins les plus connus pour la création de pages web sous WordPress. Pour comprendre comment fonctionne notre plugin pour la création de widgets pour Elementor – lire l’article : Propre plugin ajoutant un widget au plugin Elementor
Lien vers le plugin Elementor : https://elementor.com/
Si vous ne connaissez pas AJAX dans WordPress – lisez cet article et essayez d’en faire un exemple vous-même : AJAX dans WordPress – un guide complet
Nous nous appuyons sur les compétences de base en programmation de PHP, et sur la capacité à créer du code HTML et CSS. Si vous avez lu nos guides précédents, la création d’un curseur ne devrait pas être difficile.
Lien vers la liste des articles précédents : Articles.

Nous créons une structure pour charger la liste AJAX

Nous commencerons par créer une structure html dans laquelle nous chargerons une liste de messages personnalisés. Nous utiliserons pour cela WPBakery Page Builder.

Nous utiliserons des postes de type « Projets » prêts à l’emploi et créerons une fonction AJAX, qui chargera la liste des projets de ce type. Le type de projet sera stocké dans la taxonomie « Type de projet ». Si vous ne savez pas comment ajouter la taxonomie pour le type de poste douanier, je vous renvoie à l’article : Comment ajouter la taxonomie pour le type de poste douanier (Custom Post Type UI)

Dans la page cible, où la liste des projets doit être affichée, nous créons une structure :

Filtre-conteneur
- Types-container
- Projets-container

Enfin, nous chargerons une liste de types de projets dans le Types-container en utilisant AJAX avec le réglage par défaut pour afficher tous les projets dans le Projects-container. Après avoir cliqué sur un type de projet donné, la liste des projets sera « filtrée » et seuls les projets de ce type seront affichés.

Dans WPBakery, la structure devrait ressembler à ceci :

AJAX script loading custom posts WordPress

Nous créons un script AJAX en utilisant jQuery dans le thème WordPress

Nous allons créer un script JS. Dans le dossier de notre thème, nous recherchons le dossier js et nous y créons un fichier .js dans lequel nous placerons notre script. Dans notre cas, ce sera redo-script.js.

Pour que le script fonctionne correctement, vous aurez besoin d’un jQuery biobook – assurez-vous que votre thème le possède.

La principale fonction qui nous permet d’utiliser AJAX est : $.post(), qui envoie les données au serveur en utilisant HTTP POST Request. A l’intérieur, vous devez placer une url qui contient admin-ajax.php (dans WordPress, ce fichier est responsable du transfert de données en utilisant ajax). L’url correcte sera placée dans le $ajaxurl et l’enverra plus tard dans functions.php.