FacetWP – Beaver Builder

Intégration de FacetWP avec Beaver Builder : Optimisez vos listings de publications

L’intégration de FacetWP avec Beaver Builder et, de manière optionnelle, Beaver Themer, permet de dynamiser vos listings de publications sur votre site WordPress. Ce guide va vous aider à comprendre comment tirer parti de ces outils pour créer des expériences utilisateur personnalisées et efficaces.

Développement

Pourquoi choisir FacetWP avec Beaver Builder ?

Facetter vos contenus offre une meilleure expérience de navigation pour vos utilisateurs. Avec FacetWP et Beaver Builder, vous pouvez facilement ajouter des facettes (filtres) à vos listings de publications, ce qui permet à vos visiteurs de trier et filtrer le contenu selon leurs préférences. Cette fonctionnalité est particulièrement utile pour les sites de commerce électronique, les blogs avec de nombreux articles, ou même pour les portfolios artistiques.

Modules pris en charge

1. Publications : Utilisez la fonctionnalité de faceting pour les listes de vos articles.
2. WooCommerce : Améliorez votre boutique en ligne avec des options de filtrage avancées.
3. Publications avancées : Disponible avec le plugin Ultimate Addons pour Beaver Builder.
4. Produits Woo : Également disponible avec le plugin Ultimate Addons pour Beaver Builder.
5. Grille de contenu : Nécessite le plugin PowerPack pour une efficacité optimale.
6. Grille de produits : Peut être utilisé avec WooPack pour améliorer vos listings de produits.

Comment activer FacetWP dans un module ?

Pour activer FacetWP, ouvrez le module de votre choix dans Beaver Builder. Dans l’écran d’édition, vous trouverez une nouvelle option “FacetWP”. Il suffit de la régler sur “Activé” pour que FacetWP utilise la liste pour le filtrage. Ajoutez ensuite des facettes en naviguant dans le mode visuel de Beaver Builder. Cliquez sur le bouton bleu “+” pour voir les modules disponibles et sélectionnez l’option “Facet”.

Pagination et pages d’archive

FacetWP détecte généralement la pagination numérotée de Beaver Builder. Toutefois, si vous le souhaitez, vous pouvez modifier la pagination du module à “Aucune” et utiliser un facette de pagination à la place. Une intégration avec Beaver Themer permet également de concevoir des mises en page pour les pages d’archive, essentielles pour les blogs, les archives de taxonomies, etc. Il est crucial de régler la source de contenu dans le module de publication sur “Main Query” afin que la requête d’archive de WordPress soit utilisée pour Beaver Builder et FacetWP.

Personnaliser la requête de module de publications

Lorsque vous souhaitez adapter la requête d’un module de publications, vous pouvez exploiter le hook fl_builder_loop_query_args. Ce hook fonctionne de manière semblable au hook pre_get_posts de WordPress, permettant une personnalisation poussée de la requête, par exemple, pour afficher uniquement des types de publications spécifiques ou des métas particuliers.

Voici un exemple de code pour implémenter un tri personnalisé :

php
function my_query_order( $query_args ) {
if ( is_front_page() ) {
$query_args['orderby'] = array(
'date' => 'DESC', // Tri principal : par date de publication
'title' => 'ASC' // Tri secondaire : par titre de publication
);
}
return $query_args;
}
add_filter( 'fl_builder_loop_query_args', 'my_query_order' );

Vous pouvez ajouter ce code dans le fichier functions.php de votre thème enfant ou utiliser un plugin de snippets.

Gestion des erreurs de défilement

Beaver Builder a tendance à faire défiler la page vers le haut du module lorsque la page se charge. Ce problème est généralement corrigé par l’ajout de FacetWP, car son addon désactive cette fonction. Cependant, si vous remarquez que la page se déplace au chargement, une erreur JavaScript peut être présente. Des erreurs telles que FLBuilderLayout is not defined vous indiqueront que l’ordre de chargement des scripts est incorrect.

Pour résoudre ce problème, vous devez d’abord vérifier que l’option “Rendre les actifs CSS/JS inline” dans les paramètres Beaver Builder est désactivée. Assurez-vous également qu’aucun filtre ne gère le rendu des actifs inline par votre thème enfant ou plugins tiers.

Correctifs pour le module Content Grid de PowerPack

Si vous utilisez le module Content Grid de PowerPack en conjonction avec un listing de publications activé par FacetWP, vous pourriez rencontrer des défilements automatiques indésirables lorsque la page se charge avec une sélection de facette. Pour éviter cela, ajoutez ce code à votre fichier functions.php :

php
add_action( 'pp_cg_before_posts', function( $settings, $query ) {
$paged = $GLOBALS['wp_the_query']->get( 'paged' );
$paged = ( $paged < 2 ) ? 0 : $paged;
$GLOBALS['wp_the_query']->set( 'page', $paged );
$GLOBALS['wp_the_query']->set( 'paged', $paged );
}, 10, 2 );

Changelog et mises à jour

Version 1.4.2 : Correction du script d’enregistrement pour prendre en charge les stratégies de différé et in_footer, résolvant l’erreur ‘FLBuilderLayout is not defined’.
Version 1.4.1 : Priorité de changement pour la compatibilité avec UABB.
Version 1.4 : Mise à jour de JavaScript pour supporter FacetWP 3.9 et modification de certains réglages de pagination.
Version 1.3.3 : Résolution des problèmes avec le module WooCommerce et détection de requêtes.
Version 1.3.2 : Ajout de support pour le module “Woo Products” d’UABB et correction de diverses fonctionnalités.

En intégrant FacetWP à Beaver Builder, vous maximisez les capacités de filtrage et de tri de votre site. Cette combinaison est idéale pour rendre l’expérience utilisateur plus intuitive et agréable, en garantissant que vos visiteurs trouvent rapidement ce qu’ils recherchent. Que ce soit pour un site de commerce électronique ou pour un blog avec une vaste archive, cette solution fait vraiment la différence. En variant vos méthodes de tri et d’affichage, vous pouvez créer des pages interactives qui incitent au clic et à l’engagement. Utiliser des facettes dans vos listes de publications enrichit non seulement l’expérience utilisateur mais améliore également le référencement de votre site en rendant votre contenu plus accessible et pertinent pour les recherches effectuées par vos visiteurs.