FacetWP – Beaver Builder

FacetWP und Beaver Builder: Eine umfassende Anleitung zur Integration

Die Kombination von FacetWP und Beaver Builder verbessert die Benutzererfahrung auf Websites erheblich, indem sie leistungsstarke Filterfunktionen für verschiedene Inhaltslisten bereitstellt. In diesem Artikel werden wir die Möglichkeiten erörtern, wie FacetWP zusammen mit Beaver Builder eingesetzt werden kann, und wir werden detailliert auf die Schritte eingehen, um Inhaltsmodulen durch die Implementierung von Facetten mehr Funktionalität zu verleihen.

Überblick über die unterstützten Module

Bei der Integration von FacetWP in Beaver Builder stehen verschiedene Modultypen zur Verfügung, die eine nahtlose Nutzung der Filtermöglichkeiten ermöglichen. Hier sind die unterstützten Module:

• Posts: Das grundlegende Modul, um Blog-Posts anzuzeigen.
• WooCommerce: Für Nutzer, die E-Commerce-Funktionalitäten benötigen, erlaubt dieses Modul die Integration von Produkten.
• Advanced Posts: Voraussetzung hierfür ist das Ultimate Addons for Beaver Builder Plugin, das erweiterte Funktionen für Post-Listen bietet.
• Woo Products: Ebenfalls ein Modul, das das Ultimate Addons Plugin erfordert und spezifisch für WooCommerce-Produkte konzipiert ist.
• Content Grid: Dieses Modul benötigt das PowerPack Plugin und bietet eine flexible Möglichkeit, Inhalte in einem Raster anzuzeigen.
• Product Grid: Für die Präsentation von Produkten in einem Raster, benötigt dieses Modul WooPack.

Anwendung von FacetWP mit Beaver Builder

Um die FacetWP-Funktionen in einem der unterstützten Module zu nutzen, müssen die Benutzer einige grundlegende Schritte befolgen:

1. Aktivieren Sie die FacetWP-Einstellungen: Die Benutzeroberfläche der Modulbearbeitung enthält ein neues “FacetWP”-Einstellungsfeld. Stellen Sie sicher, dass diese Option aktiviert ist, damit FacetWP den Inhalt des Moduls für die Filterung nutzen kann.

2. Fügen Sie Facetten hinzu: Bei der Bearbeitung einer Seite im visuellen Modus von Beaver Builder können Sie durch Klicken auf das blaue plus-Symbol verfügbare Module anzeigen. In diesem Bereich finden Sie die neue “FacetWP”-Sektion, in der Sie “Facet” auswählen und vorhandene Facetten hinzufügen können.

Zusätzlich bieten andere FacetWP-Funktionen wie Sortierung, Selektionen und mehr ebenfalls Module, die Sie in Ihre Designstrategie integrieren können.

Pagination: Möglichkeiten und Optionen

Ein wichtiger Aspekt der Nutzung von FacetWP ist die Pagination, d.h. die Seitenanzahl, die es Benutzern ermöglicht, durch eine Liste von Beiträgen zu navigieren. FacetWP erkennt in den meisten Fällen automatisch die nummerierte Pagination von Beaver Builder. Benutzern steht jedoch auch die Option offen, die Pagination auf “None” zu setzen und stattdessen einen Pager-Facet zu verwenden. Dies kann insbesondere nützlich sein, wenn eine spezifische Interaktion zwischen den Facetten und der Seitenanzahl erforderlich ist.

Archive-Seiten anpassen

Die Integration von Beaver Themer ermöglicht die Gestaltung von Archive-Seiten, einschließlich Blogbeitragsarchiven und Taxonomiearchiven. Um sicherzustellen, dass die WordPress-Archivabfrage sowohl für Beaver Builder als auch für FacetWP funktioniert, müssen Sie in Ihrem Posts-Modul den Content > Source auf “Main Query” setzen. Dies stellt sicher, dass die Benutzer die Inhalte so erhalten, wie sie beabsichtigt sind, und die Filterung reibungslos abläuft.

Anpassung der Beitragsmodul-Abfrage

Für benutzerdefinierte Anpassungen an der Abfrage eines Posts-Moduls können Entwickler den Hook fl_builder_loop_query_args verwenden. Dies ermöglicht es, spezifische Anpassungen vorzunehmen, wie beispielsweise das Anzeigen bestimmter benutzerdefinierter Beitragstypen oder die Anordnung der Beiträge zu ändern. Die folgende PHP-Funktion zeigt, wie man die Sortierung auf der Startseite anpasst:

php
function my_query_order( $query_args ) {
if ( is_front_page() ) {
$query_args['orderby'] = array(
'date' => 'DESC', // Primärsortierung: nach Datum
'title' => 'ASC' // Sekundärsortierung: alphabetisch nach Titel
);
}
return $query_args;
}
add_filter( 'fl_builder_loop_query_args', 'my_query_order' );

Entwickler können durch die Verwendung von Hooks wie diesen individuelle Anforderungen umsetzen und so die Suchergebnisse und die Anzeige von Inhalten optimieren.

Fehlerbehebung: Unerwünschtes Scrollen verhindern

Ein häufiges Problem bei der Nutzung von Beaver Builder mit FacetWP ist, dass die Seite beim Laden automatisch nach oben scrollt. Normalerweise sollte dieses Verhalten aufgrund der JavaScript-Funktionalität von FacetWP nicht auftreten. Sollten jedoch Scroll-Probleme auftreten, könnte folgende Lösung helfen:

Überprüfen Sie die Browser-Konsole auf Fehler mit FLBuilderLayout. Diese Fehler können auftreten, wenn Beaver Builder seine JavaScript-Assets nicht korrekt im Footer lädt. Um dies zu beheben, sollten die Benutzer folgende Schritte durchführen:

1. Einstellungen anpassen: Deaktivieren Sie die Option “Render CSS/JS assets inline” in den Beaver Builder Einstellungen.
2. CSS/JS-Filter entfernen: Falls der Filter fl_builder_render_assets_inline manuell hinzugefügt wurde, sollte dieser entfernt werden.
3. Caching-Plugins: Überprüfen Sie die Einstellungen Ihrer Caching- oder Optimierungs-Plugins, um sicherzustellen, dass JavaScripts nicht verzögert oder zusammengeführt werden.

Durch diese Anpassungen können viele Probleme mit unerwartetem Scrollen gelöst werden.

Spezielle Anpassungen für PowerPack Content Grid

Wenn Sie PowerPack Content Grid Module auf einer Seite verwenden, die auch FacetWP-aktivierte Post-Listings enthält, können unerwartete automatische Scrolling-Effekte auftreten, insbesondere bei vorab geladenen Facettauswahlen. Um diese Effekte zu verhindern, kann der folgende Code in die functions.php Ihrer (Child-)Theme-Datei eingefügt werden:

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 );

Diese Anpassung stellt sicher, dass keine unerwünschten Scroll-Effekte auftreten, was die Benutzererfahrung weiter optimiert.

Changelog und aktuelle Änderungen

Die kontinuierliche Verbesserung der Kompatibilität zwischen Beaver Builder und FacetWP wird durch regelmäßige Updates gewährleistet. Hier sind einige der bedeutendsten Änderungen:

• Version 1.4.2: Verbesserungen am Update-Script zur Unterstützung der ‘defer’-Strategie und der Einbettung in den Footer, um das ‘FLBuilderLayout is not defined’-Problem zu beheben.
• Version 1.4.1: Prioritätsanpassungen am fl_builder_loop_query_args Hook für eine bessere Kompatibilität mit Ultimate Addons.
• Version 1.4: Unterstützung für FacetWP 3.9 und Entfernung der “offset”-Einstellung von Beaver Builder, wenn FacetWP aktiviert ist.
• Weitere Fixes: Diverse Verbesserungen an der WooCommerce-Integration und der Abfrageerkennung.

Diese Aktualisierungen zeigen das Engagement des Teams, sicherzustellen, dass die Integration zwischen diesen leistungsstarken Tools erlaubt, dass Benutzer eine reibungslose und effektive Webseite erstellen können.

Mit der richtigen Kombination von FacetWP und Beaver Builder können Benutzer eine ansprechende und interaktive Website erstellen. Durch die Anpassung von Modulen, Abfragen und das Verhindern unerwünschter Effekte schaffen Sie eine optimale Benutzererfahrung und erhöhen die Effizienz Ihrer Website.