FacetWP – Star Rating

FacetWP Star Rating: Eine umfassende Anleitung

Die FacetWP Star Rating-Funktionalität ermöglicht es Nutzern, Beiträge oder Produkte anhand der gewählten (durchschnittlichen) Bewertung zu filtern. Diese Funktion ist besonders nützlich für Webseiten, die Produkte oder Dienstleistungen bewerten, sei es im E-Commerce, in Blogs oder anderen Inhaltsformaten. In diesem Artikel werden wir sämtliche Aspekte der FacetWP Star Rating-Funktion detailliert behandeln, einschließlich der verfügbaren Optionen, der Implementierung und der individuellen Anpassung.

Entwicklung

Was sind Facetten und warum sind sie wichtig?

Facetten sind Filter, die es Benutzern ermöglichen, gezielt nach Inhalten zu suchen, die ihren Interessen entsprechen. Ein Star Rating ist eine spezifische Art von Facette, die Bewertungen im Bereich von 1 bis 5 Sternen anzeigt und es den Nutzern ermöglicht, gezielt nach Inhalten zu filtern, die ihren gewünschten Qualitätsstandards entsprechen. Diese Art von Benutzerinteraktion ist entscheidend, um die Nutzererfahrung zu verbessern und die Verweildauer auf der Seite zu erhöhen. Studien haben gezeigt, dass Benutzer dazu neigen, Produkte oder Dienste mit hohen Bewertungen eher zu wählen, was die Relevanz solcher Filter weiter unterstreicht.

Verfügbare Optionen

1. Datenquelle
   Die Datenquelle ist das benutzerdefinierte Feld, das den (durchschnittlichen) Bewertungswert enthält. Der Wert muss eine ganze Zahl zwischen 1 und 5 sein. Bei E-Commerce-Seiten können WooCommerce-Bewertungen genutzt werden.

2. Bewertungssymbole
   Die Verwendung von Icons zur Darstellung der Bewertungen ist von großer Bedeutung. Neben den bestehenden Standard-Icons haben Sie die Möglichkeit, Unicode-Icons, benutzerdefinierte SVG-Icons oder Webfont-Icons zu verwenden. Diese Flexibilität hilft, das Nutzererlebnis zu individualisieren.

3. Geisterbewertungen anzeigen
   Mit dieser Einstellung können mindestens fünf Icons angezeigt werden, selbst wenn es keine passenden Bewertungen gibt. Dies kann für die Benutzer visuell ansprechend sein und das Design verbessern, da es eine konsistentere Form bietet.

4. Farbe
   Die Basisfarbe der Bewertungssymbole kann angepasst werden. Dies ermöglicht es, die Symbole nahtlos in das Design der Webseite einzufügen.

5. Ausgewählte Farbe
   Benutzer können auch eine unterschiedliche Farbe für Hover- und ausgewählte Zustände der Icons definieren. Dies verbessert die Benutzerführung und sorgt für visuelle Klarheit.

6. Rückgängig machen Farbe
   Diese Einstellung zeigt einen visuellen Hinweis an, dass Nutzer ihre Auswahl zurücksetzen können. Es könnte in der gleichen Farbe wie die Basisfarbe gestaltet werden oder in einer Farbe, die mehr Aufmerksamkeit auf die Rücksetzung lenkt.

7. Geisterfarbe
   Die Farbschemata für Geister-Icons helfen, eine klare Differenzierung zwischen verfügbaren und nicht verfügbaren Bewertungen zu schaffen.

Die Implementierung der Star Rating Facette

Auswahl des Datenquellenfeldes

Um die Facette zu nutzen, müssen Sie ein benutzerdefiniertes (numerisches) Feld auswählen, das den durchschnittlichen Bewertungswert speichert. Wenn Sie fortgeschrittene benutzerdefinierte Felder (Advanced Custom Fields) verwenden, können Sie ein „Zahlen“-Feld erstellen und die minimale und maximale Bewertung auf 1 bzw. 5 setzen.

Verwendung der WooCommerce-Bewertungen

Für Websites, die WooCommerce nutzen, ist es einfach, die durchschnittlichen Produktbewertungen zu verwenden. Der Datenquelle-Wert muss auf das „Durchschnittliche Bewertung“-Feld gesetzt werden.

Anpassung der Bewertungssymbole

Benutzerdefinierte PHP-Codes sind eine effektive Möglichkeit, die Icons anzupassen. Hier ein Beispiel, wie Sie die Bewertungssymbole ändern können:

php
add_filter( 'facetwp_ratings_icon', function( $icon, $is_disabled, $facet ) {
if ( $facet['name'] === 'my_star_rating_facet' ) {
$icon = '✪'; // Benutzen Sie "circled white star"
}
return $icon;
}, 10, 3 );

Unterschiedliche Icons für Geisterbewertungen

Wenn Geisterbewertungen aktiviert sind, können Sie verschiedene Icons für nicht vorhandene Bewertungen festlegen. Dies könnte helfen, visuell ansprechendere und informativere Gesichtspunkte für die Benutzer bereitzustellen.

php
add_filter( 'facetwp_ratings_icon', function( $icon, $is_disabled, $facet ) {
if ( $facet['name'] === 'my_star_rating_facet' && $is_disabled ) {
$icon = '☆'; // offenes Sternsymbol
}
return $icon;
}, 10, 3 );

SVG-Icons verwenden

Eine weitere interessante Möglichkeit zur Anpassung sind SVG-Icons. SVGs bieten eine hohe grafische Flexibilität, insbesondere wenn das Design für verschiedene Bildschirmgrößen optimiert werden muss.

php
add_filter( 'facetwp_ratings_icon', function( $icon, $is_disabled, $facet ) {
if ( $facet['name'] === 'my_star_rating_facet') {
$icon = '<svg><!-- SVG Code Hier --></svg>';
}
return $icon;
}, 10, 3 );

Styling der Bewertungsicons

Die Gestaltung der Bewertungsicons kann mit CSS leicht angepasst werden. Eine einfache Möglichkeit, den Abstand zwischen den Icons zu erhöhen und die Größe der Icons zu ändern, könnte folgenden Code enthalten:

css
.star-rating-icon {
margin-right: 6px;
font-size: 22px;
}

Setzen einer Hover-Farbe, die sich von der ausgewählten Farbe unterscheidet

Um eine bessere Benutzererfahrung zu bieten, könnten Sie auch eine etwas andere Farbgebung für den Hover-Zustand im Vergleich zu dem ausgewählten Zustand verwenden, um einen klaren visuellen Indikator zu bieten:

css
.star-rating-icon:hover {
color: #f3ca1e; /* Dunkleres Gelb für Hover */
}

Verstecken der Facettenanzahl

Falls gewünscht, kann die Anzeige der Facettenanzahl, die im „& up“-Label erscheint, ebenfalls angepasst oder versteckt werden, um ein klareres Design zu fördern.

php
add_action( 'wp_head', function() {
// Custom PHP hier
}, 100 );

Ändern oder Übersetzen der Textlinks

Mit Hilfe der gettext-Funktion können Sie Texte für die „& up“- und „Rückgängig“-Links ändern oder übersetzen:

php
add_filter( 'gettext', function( $translated_text, $untranslated_text, $domain ) {
if ( 'fwp-front' === $domain ) {
if ( $translated_text === '& up' ) {
$translated_text = 'Und mehr';
}
if ( $translated_text === 'Undo' ) {
$translated_text = 'Zurücksetzen';
}
}
return $translated_text;
}, 10, 3 );

Durch die Anpassungen und Flexibilität, die die FacetWP Star Rating-Funktion bietet, können Webseitenbetreiber eine einzigartige und benutzerfreundliche Schnittstelle schaffen. Indem verschiedene Symbole, Farben und Stile verwendet werden, können Sie sicherstellen, dass die Benutzererfahrung personalisiert und faszinierend bleibt. Diese Investition in die Benutzerinteraktion kann dazu beitragen, die Conversion-Raten zu steigern und die Kundenbindung zu erhöhen.