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.

$.post(
            ajaxurl,{},
            function( response ) {}
);

$.post(

ajaxurl,{},

function( response ) {}

);

Ensuite, nous devons préciser quel script php nous voulons utiliser pour télécharger la liste des projets. Ce script sera créé dans le fichier functions.php de notre thème - nous l'appellerons : get_projects(). En outre, nous devons préciser le type de projet que nous voulons télécharger. Comme il s'agit du script initial qui lit la liste des projets, nous voulons télécharger tous les types de projets. La variable qui contient le type de projet est $projectType.

$.post(
            ajaxurl,
            {
                'action' : 'get_projects',
                'projectType' : 'wszystkie'
            },
            function( response ) {}
);

$.post(

ajaxurl,

{

'action' : 'get_projects',

'projectType' : 'wszystkie'

function( response ) {}

);

Lorsque nous avons exécuté notre script côté serveur, nous avons reçu une réponse qui est au format JSON. Nous devons convertir la réponse en utilisant le style intégré parseJSON() et la placer dans les conteneurs appropriés sur notre site. Nous mettons nos projets dans un conteneur créé précédemment - projets-container.

(function($){
    $(document).ready(function(){
        $.post(
            ajaxurl,
            {
                'action' : 'get_projects',
                'projectType' : 'wszystkie'
            },
            function( response ) {
                $data=$.parseJSON(response);
                $('.projects-container').html($data[0]);
            }
        );
    });
})(jQuery);

(function($){

$(document).ready(function(){

$.post(

ajaxurl,

{

'action' : 'get_projects',

'projectType' : 'wszystkie'

function( response ) {

$data=$.parseJSON(response);

$('.projects-container').html($data[0]);

}

);

});

})(jQuery);

Le choix du type de projet doit encore être traité. Nous supposons que chaque type de projet aura une classe .type de projet, et le type de projet actuellement sélectionné aura en outre une classe .type-active. Les types de projets seront dans le .types-container. Après avoir cliqué sur un type de projet donné, vérifiez où se trouve la class .type-active dans notre conteneur et supprimez-la de l'emplacement précédent, puis ajoutez-la à la nouvelle.

 $(document).on('click', ".project-type" ,function(){
           $('.projects-types').find('.type-active').removeClass('type-active');
            $(this).addClass('type-active');
});

$(document).on('click', ".project-type" ,function(){

$('.projects-types').find('.type-active').removeClass('type-active');

$(this).addClass('type-active');

});

Après avoir ajouté une classe active pour notre type de projet actuel, utilisez $.post() pour sélectionner le type de projet actuel. La réponse est analysée à partir de JSON et ensuite "mise" dans notre conteneur de projet.

 $.post(
                ajaxurl,
                {
                     'action' : 'get_projects',
                     'projectType' : $(this).data("projectType")
                },
                function( response ) {
                    $data=$.parseJSON(response);
                    $('.projects-container').html($data[0]);
                }
            );

$.post(

ajaxurl,

{

'action' : 'get_projects',

'projectType' : $(this).data("projectType")

function( response ) {

$data=$.parseJSON(response);

$('.projects-container').html($data[0]);

}

);

L'ensemble de notre redo-script.js :

(function($){
    $(document).ready(function()
{
        $.post(
            ajaxurl,
            {
                'action' : 'get_projects',
                'projectType' : 'wszystkie'
            },
            function( response ) {
                $data=$.parseJSON(response);
                $('.projects-container').html($data[0]);
                $('.projects-types').html($data[1]);
            }
        );
        $(document).on('click', ".project-type" ,function(){
           $('.projects-types').find('.type-active').removeClass('type-active');
            $(this).addClass('type-active');
            $.post(
                ajaxurl,
                {
                     'action' : 'get_projects',
                     'projectType' : $(this).data("projectType")
                },
                function( response ) {
                    $data=$.parseJSON(response);
                    $('.projects-container').html($data[0]);
                }
            );
           
        });
    });
})(jQuery);

(function($){

$(document).ready(function()

{

$.post(

ajaxurl,

{

'action' : 'get_projects',

'projectType' : 'wszystkie'

function( response ) {

$data=$.parseJSON(response);

$('.projects-container').html($data[0]);

$('.projects-types').html($data[1]);

}

);

$(document).on('click', ".project-type" ,function(){

$('.projects-types').find('.type-active').removeClass('type-active');

$(this).addClass('type-active');

$.post(

ajaxurl,

{

'action' : 'get_projects',

'projectType' : $(this).data("projectType")

function( response ) {

$data=$.parseJSON(response);

$('.projects-container').html($data[0]);

}

);

});

})(jQuery);

Script côté serveur - comment gérer AJAX dans WordPress

Les fonctions AJAX sont programmées dans le fichier functions.php. La première étape consiste à enregistrer notre script JS - redo-script.js, et à définir ajaxurl. Nous allons donc créer une fonction add_js_scripts_redo() dans laquelle nous allons ajouter notre script et corriger ajaxurl.

function add_js_scripts_redo() {
        wp_enqueue_script( 'redoscript', get_template_directory_uri().'/js/redo-script.js', array('jquery'), 1, 1, 1 );

		if ( isset($_SERVER['HTTPS']) )  
       	$protocol = 'https://';  
   		 else  
       	$protocol = 'http://';  
		   
        // pass Ajax Url to script.js
        wp_localize_script('redoscript', 'ajaxurl' , admin_url( 'admin-ajax.php', $protocol ) );
    }
    add_action('wp_enqueue_scripts', 'add_js_scripts_redo');

function add_js_scripts_redo() {

wp_enqueue_script( 'redoscript', get_template_directory_uri().'/js/redo-script.js', array('jquery'), 1, 1, 1 );

if ( isset($_SERVER['HTTPS']) )

$protocol = 'https://';

else

$protocol = 'http://';

// pass Ajax Url to script.js

wp_localize_script('redoscript', 'ajaxurl' , admin_url( 'admin-ajax.php', $protocol ) );

}

add_action('wp_enqueue_scripts', 'add_js_scripts_redo');

Vous devez maintenant créer la fonction que nous avons définie dans le script JS - get_projects().

La première étape de get_projects() consiste à télécharger le paramètre $projectType qui a été envoyé par $. post().

function get_projects() {
$param = $_POST['projectType'];
}

function get_projects() {

$param = $_POST['projectType'];

}

Nous passons maintenant à la vérification du paramètre. Si la variable $param == 'all' - alors nous obtenons la liste complète des projets, quel que soit le type de projet. Sinon, vérifiez le type de projet qui contient le projectType envoyé. Nous supposons que le projectType envoyé contiendra l'ID du type de projet.

function get_projects() {
$param = $_POST['projectType'];
		if($param == 'wszystkie') {
			$projectsQuery = new WP_Query(array( 
				'post_type' => 'projekty',
				'posts_per_page'   => -1,
				'orderby' => 'title',
				'order'   => 'ASC'
			));
		}
		else {
			$projectsQuery = new WP_Query(array( 
				'post_type' => 'projekty',
				'posts_per_page'   => -1,
				'orderby' => 'title',
				'order'   => 'ASC',
				'tax_query' => array(
					array(
						'taxonomy' => 'typ_projektu',
						'field' => 'ID',
						'terms' => $param,
						)
				),
			));
		}
}

function get_projects() {

$param = $_POST['projectType'];

if($param == 'wszystkie') {

$projectsQuery = new WP_Query(array(

'post_type' => 'projekty',

'posts_per_page' => -1,

'orderby' => 'title',

'order' => 'ASC'

));

}

else {

$projectsQuery = new WP_Query(array(

'post_type' => 'projekty',

'posts_per_page' => -1,

'orderby' => 'title',

'order' => 'ASC',

'tax_query' => array(

array(

'taxonomy' => 'typ_projektu',

'field' => 'ID',

'terms' => $param,

)

));

}

Nous devons également préparer une structure qui sera envoyée par la JSON.

Nous avons déjà une liste de projets selon le type de projet envoyé par $.post() type de projet que nous stockons dans le $projectsQuery. Il nous manque une liste des types de projets que nous chargerions dans notre conteneur - types-container. Nous le récupérons en utilisant la fonction PHP disponible dans WordPress - WP_Term_Query(), qui récupérera une liste d'informations taxonomiques sur le service.

$projectsTypeQuery = new WP_Term_Query( array(
				'taxonomy' => 'typ_projektu',
				'hide_empty' => false,
    			'order'   => 'DESC',
		) );

$projectsTypeQuery = new WP_Term_Query( array(

'taxonomy' => 'typ_projektu',

'hide_empty' => false,

'order' => 'DESC',

) );

Pour pouvoir travailler sur les listes téléchargées $projectsQuery et $projectsTypeQuery nous devons choisir ce qui nous intéresse dans ces listes : posts et taxonomies. Nous les assignons aux variables appropriées.

$projekty=($projectsQuery->posts);
$typyProjektow=($projectsTypeQuery->terms);

1 2	$projekty=($projectsQuery->posts); $typyProjektow=($projectsTypeQuery->terms);

Nous préparons des tableaux vierges, que nous enverrons finalement en utilisant AJAX et le json_encode(), qui codera nos données en code JSON. Le premier tableau stockera les projets html et nous l'appellerons $projectsString. Le tableau suivant stockera la liste des types de projets - $typesString. Le dernier tableau stockera notre code JSON et sera envoyé en utilisant la fonction echo - nous l'appellerons $contents.

$projektyString = [];
$typyString = [];
$contents = [];

$projektyString = [];

$typyString = [];

$contents = [];

Nous commencerons par charger la liste des projets dans $projectsString[]. Un seul projet sera affiché dans la balise <a> avec .project-card. Il contiendra un lien vers le projet et une image du projet. Chaque projet sera chargé en utilisant la boucle foreach.

foreach($projekty as $projekt) {
	$projektyString[] = '<a class="project-card" href="'. get_permalink($projekt->ID) .'"><img src="'.get_the_post_thumbnail_url($projekt->ID).'"/></a>';		
}

foreach($projekty as $projekt) {

$projektyString[] = '<a class="project-card" href="'. get_permalink($projekt->ID) .'"><img src="'.get_the_post_thumbnail_url($projekt->ID).'"/></a>';

}

Nous avons une liste de projets à envoyer. Nous devons maintenant créer une liste de types de projets. Nos taxonomies contiennent les noms des types de projets appropriés, que nous afficherons plus tard dans le .types-container, mais que faire si nous voulons afficher tous les projets ? Un certain type de projet doit en être responsable. La valeur initiale envoyée dans projectType, après le chargement du script, nous envoie projectType=='all'. Nous devons donc ajouter à $typesString[] le type de projet responsable de tous les projets, puis nous chargeons les autres types de projet par boucle foreach standard. Le type de projet sera affiché dans la balise <a> et contiendra des classes prédéfinies : . project-type et class .type-active, qui sera initialement attribué au type de projet - all. Chaque type de projet doit contenir l'attribut data-project-type, qui enregistrera l'ID du type de projet, et pour tous les projets, il enregistrera la chaîne - "all". La balise affichera le nom du type de projet.

$typyString[] = '<a class="project-type type-active" data-project-type="wszystkie">Wszystkie</a>';
foreach($typyProjektow as $typ) {
	$typyString[] = '<a class="project-type" data-project-type="'.$typ->term_id.'">'.$typ->name.'</a>';
}

$typyString[] = '<a class="project-type type-active" data-project-type="wszystkie">Wszystkie</a>';

foreach($typyProjektow as $typ) {

$typyString[] = '<a class="project-type" data-project-type="'.$typ->term_id.'">'.$typ->name.'</a>';

}

À la fin, ajoutez nos forums à un forum vide $contents et codez avec json_encode(). Send with an echo and kill the get_projects() with die()..

$contents = json_encode([ $projektyString, $typyString ]);	
echo $contents;
die();

$contents = json_encode([ $projektyString, $typyString ]);

echo $contents;

die();

Il faut encore ajouter deux actions, avec les préfixes wp_ajax et wp_ajax_nopriv - ce sont les hook'i de WordPress, qui nous permettent de créer nos propres requêtes AJAX, suivies du nom de l'action qui les utilisera. Hook wp_ajax- pour les utilisateurs connectés, wp_ajax_nopriv - pour les utilisateurs non connectés. Dans notre cas, il importe peu que l'utilisateur soit connecté (n'importe qui peut afficher une liste de projets).

add_action( 'wp_ajax_get_projects', 'get_projects' );
add_action( 'wp_ajax_nopriv_get_projects', 'get_projects' );

1 2	add_action( 'wp_ajax_get_projects', 'get_projects' ); add_action( 'wp_ajax_nopriv_get_projects', 'get_projects' );

L'ensemble du code contenu dans functions.php:

function add_js_scripts_redo() {
        wp_enqueue_script( 'redoscript', get_template_directory_uri().'/js/redo-script.js', array('jquery'), 1, 1, 1 );

		if ( isset($_SERVER['HTTPS']) )  
       	$protocol = 'https://';  
   		 else  
       	$protocol = 'http://';  
		   
        // pass Ajax Url to script.js
        wp_localize_script('redoscript', 'ajaxurl' , admin_url( 'admin-ajax.php', $protocol ) );
    }
    add_action('wp_enqueue_scripts', 'add_js_scripts_redo');

    add_action( 'wp_ajax_get_projects', 'get_projects' );
	add_action( 'wp_ajax_nopriv_get_projects', 'get_projects' );
	function get_projects() {
		$param = $_POST['projectType'];
		if($param == 'wszystkie') {
			$projectsQuery = new WP_Query(array( 
				'post_type' => 'projekty',
				'posts_per_page'   => -1,
				'orderby' => 'title',
				'order'   => 'ASC'
			));
		}
		else {
			$projectsQuery = new WP_Query(array( 
				'post_type' => 'projekty',
				'posts_per_page'   => -1,
				'orderby' => 'title',
				'order'   => 'ASC',
				'tax_query' => array(
					array(
						'taxonomy' => 'typ_projektu',
						'field' => 'ID',
						'terms' => $param,
						)
				),
			));
		}
		$projectsTypeQuery = new WP_Term_Query( array(
				'taxonomy' => 'typ_projektu',
				'hide_empty' => false,
    			'order'   => 'DESC',
		) );

		$projekty=($projectsQuery->posts);
		$typyProjektow=($projectsTypeQuery->terms);

		$projektyString = [];
		$typyString = [];
		$contents = [];

        foreach($projekty as $projekt) {
				$projektyString[] = '<a class="project-card" href="'. get_permalink($projekt->ID) .'"><img src="'.get_the_post_thumbnail_url($projekt->ID).'"/></a>';
		}
		$typyString[] = '<a class="project-type type-active" data-project-type="wszystkie">Wszystkie</a>';
		foreach($typyProjektow as $typ) {
			$typyString[] = '<a class="project-type" data-project-type="'.$typ->term_id.'">'.$typ->name.'</a>';
		}
		
		$contents = json_encode([ $projektyString, $typyString ]);
		echo $contents;
        die();
	}

function add_js_scripts_redo() {

wp_enqueue_script( 'redoscript', get_template_directory_uri().'/js/redo-script.js', array('jquery'), 1, 1, 1 );

if ( isset($_SERVER['HTTPS']) )

$protocol = 'https://';

else

$protocol = 'http://';

// pass Ajax Url to script.js

wp_localize_script('redoscript', 'ajaxurl' , admin_url( 'admin-ajax.php', $protocol ) );

}

add_action('wp_enqueue_scripts', 'add_js_scripts_redo');

add_action( 'wp_ajax_get_projects', 'get_projects' );

add_action( 'wp_ajax_nopriv_get_projects', 'get_projects' );

function get_projects() {

$param = $_POST['projectType'];

if($param == 'wszystkie') {

$projectsQuery = new WP_Query(array(

'post_type' => 'projekty',

'posts_per_page' => -1,

'orderby' => 'title',

'order' => 'ASC'

));

}

else {

$projectsQuery = new WP_Query(array(

'post_type' => 'projekty',

'posts_per_page' => -1,

'orderby' => 'title',

'order' => 'ASC',

'tax_query' => array(

array(

'taxonomy' => 'typ_projektu',

'field' => 'ID',

'terms' => $param,

)

));

}

$projectsTypeQuery = new WP_Term_Query( array(

'taxonomy' => 'typ_projektu',

'hide_empty' => false,

'order' => 'DESC',

) );

$projekty=($projectsQuery->posts);

$typyProjektow=($projectsTypeQuery->terms);

$projektyString = [];

$typyString = [];

$contents = [];

foreach($projekty as $projekt) {

$projektyString[] = '<a class="project-card" href="'. get_permalink($projekt->ID) .'"><img src="'.get_the_post_thumbnail_url($projekt->ID).'"/></a>';

}

$typyString[] = '<a class="project-type type-active" data-project-type="wszystkie">Wszystkie</a>';

foreach($typyProjektow as $typ) {

$typyString[] = '<a class="project-type" data-project-type="'.$typ->term_id.'">'.$typ->name.'</a>';

}

$contents = json_encode([ $projektyString, $typyString ]);

echo $contents;

die();

}

En plein dans le mille ! Script AJAX en cours d'exécution, filtrage des messages

Nous avons reçu un script de travail qui nous lit des messages d'un type sélectionné en utilisant AJAX dans WordPress. Aux conteneurs précédemment créés, le script ajoute des types de projets et des projets d'un type donné. Après avoir cliqué sur un type donné, une requête est envoyée au serveur, qui nous renvoie des projets correctement filtrés.

Summing

Dans ce tutoriel, nous vous avons montré comment ajouter un simple script AJAX pour filtrer les messages personnalisés dans WordPress. L'ajout de scripts AJAX dans WordPress n'est pas difficile, mais vous devez connaître certaines des caractéristiques de base de WordPress, que nous avons présentées dans cet article.

Si vous souhaitez en savoir plus sur WordPress ou sur les créateurs de pages tels que WPBakery ou Elementor - veuillez consulter la liste des articles : Articles utiles.