Personnaliser le widget Publications avec Custom Query Filter

Vous en aviez déjà entendu parler, mais comme moi, vous n’en aviez pas besoin jusqu’au jour où … finalement, vous en avez besoin. Ici on va évoquer les Custom Query Filter pour personnaliser le widget Publication (Posts Widget) d’Elementor. Cet article s’adresse aux personnes adeptes du low-code ; on fera du PHP mais sans VS Code ou compagnie.

Éléments de contexte

Récemment, j’ai développé un agenda minimaliste pour un site WordPress. Voici très brièvement ce qui était attendu concernant ce module :

  • les utilisateurs peuvent créer, modifier et supprimer des événements ;
  • un événement comporte un titre, un texte descriptif et les propriétés suivantes :
    • un champs relationnel pour le lier à un article ;
    • une date de début ;
    • une heure de début ;
    • une date de fin ;
    • une heure de fin ;
    • un lieu ;
  • une page Agenda doit permettre d’afficher les événements à venir et en cours.

Pré-requis

Il faut ajouter un Custom Post Type qui permettra de gérer un nouveau type de publication. Et pour ça, vous pouvez utiliser le plugin CPT UI qui fait bien le travail.

Déclaration du Custom Post Type evenement

Il faut ensuite pouvoir créer les propriétés associées. Et cela se fait via ACF.

Le groupe ACF Informations événement et les champs associés

Nous aurons besoin de personnaliser la présentation des événements dans les widget de publications. Il sera en effet nécessaire d’afficher, en plus du libellé, la date de début des événements ainsi que les lieux où ils se déroulent. L’article Elementor : Personnaliser le widget Publications avec Ele Custom Skin vous sera utile.

Et enfin, comme nous allons écrire quelques lignes de PHP, je vous propose d’installer l’extension Code Snippets.

Création de la page Agenda

Afin de pouvoir réaliser la page Agenda, nous allons devoir créer plusieurs briques qu’il suffira d’assembler avec Elementor.

Création de la boucle personnalisée

Avec Ele Custom Skin, vous allez pouvoir créer le bloc qui se répètera dans le Widget Publications. Ce bloc ira récupérer le titre de l’événement, le lieu ainsi que la date de début. Vous pourrez compléter à votre guise, l’idée étant ici de vous montrer le mécanisme.

Ajoutez un modèle Elementor de type Boucle, et nommez-le Événements.

Ajoutez une section à une colonne. Et dans cette dernière, placez un Titre de publication et deux champs texte. Ces derniers vont être alimentés par des valeurs dynamiques, à savoir le lieu et la date de début de l’événement. Voici, et pour chacun, comment procéder en trois étapes :

Indiquer la source de contenu
La source est un champs ACF
Choix du champs ACF concerné

Création de la requête personnalisée

Grâce à Code Snippets, vous pouvez ajouter du code PHP. Allez dans la rubrique Snippet et ajoutez un nouvel extrait. Collez-y le code suivant :

/**
 * Update the query to use specific post types.
 *
 * @since 1.0.0
 * @param \WP_Query $query The WordPress query instance.
 */
function my_query_by_post_types( $query ) {
	
	// Récupération de la Meta Query courante
	$meta_query = $query->get( 'meta_query' );

	// Si la Meta Query n'existe pas, on l'initialise
	if ( ! $meta_query ) {
		$meta_query = [];
	}
	
	// Ajout du filtre qui nous intéresse : nous désirons récupérer les événements qui ont lieu actuellement ou qui n'ont pas encore eu lieu
	$meta_query[] = [
		'key' => 'date_de_debut',
		'value' => date('Ymd'),
		'compare' => '>=',
	];

	$query->set( 'meta_query', $meta_query );
	$query->set( 'orderby', ['date_de_debut' =>'ASC'] ); // En toute logique, on veut ordonner les événements dans l'ordre
}
add_action( 'elementor/query/yet_to_come', 'my_query_by_post_types' ); // Notez bien cette ligne, on y renseigne l'ID de la requête personnalisée

Comme indiqué en commentaire, la dernière ligne permet d’indiquer le nom de la requête personnalisée que vous devrez référencer dans le Widget Publications. Dans notre cas, l’ID est yet_to_come.

Vous pouvez spécifier le scope en indiquant que le hook ne doit être actif uniquement que dans l’interface publique.

Source initiale : https://developers.elementor.com/docs/hooks/custom-query-filter/#filter-posts-by-the-posts-metadata-in-a-portfolio-widget

Utilisation de la requête personnalisée

Créer une nouvelle page avec une section d’une colonne dans laquelle vous allez placer un Widget Publications. Par défaut, ce dernier vous remonte les derniers articles.

Mise en page (Layout)

Pour l’habillage, sélectionnez Personnalisé et le modèle créé précédemment.

Requête (Query)

Dans la rubrique Requête, spécifiez la source, à savoir les publications de type événement (1). Dans le champs ID de requête, indiquez le nom de notre requête personnalisée : yet_to_come (2).

Si vous avez saisi quelques jeux d’essai, vous devriez voir apparaitre les événements qui répondent aux critères de filtres définis dans le code PHP saisi via Code Snippets.

Informations utiles concernant les Custom Query Filter

La requête que vous utilisez via cette méthode détermine totalement les éléments qui vont être affichés. Cela signifie qu’elle surcharge la requête WP_Query et la configuration du bloc Elementor. Modifions notre requête pour préciser le type de contenu :

/**
 * Update the query to use specific post types.
 *
 * @since 1.0.0
 * @param \WP_Query $query The WordPress query instance.
 */
function my_query_by_post_types( $query ) {
	
	//Filtre du type de contenu
	$query->set( 'post_type', [ 'evenement ] );

	// Récupération de la Meta Query courante
	$meta_query = $query->get( 'meta_query' );

	// Si la Meta Query n'existe pas, on l'initialise
	if ( ! $meta_query ) {
		$meta_query = [];
	}
	
	// Ajout du filtre qui nous intéresse : nous désirons récupérer les événements qui ont lieu actuellement ou qui n'ont pas encore eu lieu
	$meta_query[] = [
		'key' => 'date_de_debut',
		'value' => date('Ymd'),
		'compare' => '>=',
	];

	$query->set( 'meta_query', $meta_query );
	$query->set( 'orderby', ['date_de_debut' =>'ASC'] ); // En toute logique, on veut ordonner les événements dans l'ordre
}
add_action( 'elementor/query/yet_to_come', 'my_query_by_post_types' ); // Notez bien cette ligne, on y renseigne l'ID de la requête personnalisée

En ligne 10, nous avons ajouté une instruction pour préciser quel type de contenu nous voulons afficher.

$query->set( 'post_type', [ 'evenement ] );

Avec ce snippet à jour, quelle que soit la source indiquée dans le panneau de configuration Elementor, à savoir articles ou pages par exemple, le Widget Publications n’affichera que les événements.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *