Grundlagen #
Standardmäßig sind die Sterne-Bewertungen wie folgt aufgebaut:
- 1 Grafik für den grauen (inaktiven) Hintergrund
- 1 Grafik für den gelben (aktiven) Vordergrund
Bei einer Produkt-Bewertung von 4 Sternen, werden demnach 4 aktive und 1 inaktiver Stern zu sehen sein.
Quellen für eigene Grafiken #
Du kannst dir eigene Sterne-Grafiken mit einem Bildbearbeitungs-Programm selbst erstellen oder auf Ressourcen wie z.B. Iconfinder zurückgreifen. Als Format sollte SVG gewählt werden. Alternativen wären PNG und GIF. Anschließend die Dateien auf deinem Server (z.B. über die WordPress Mediathek) hochladen.
Standard-Größen #
Über die Plugin-Einstellungen (oder per Shortcode) kann für die Darstellung der Sterne-Bewertungen zwischen den folgenden drei Größen gewählt werden:
- Klein = 16px * 16px
- Mittel = 20px * 20px
- Groß = 30px * 30px
Bei der Auswahl der eigenen Grafiken sollte deshalb auf eine SVG (oder PNG/GIF) Datei mit mind. 30px * 30px geachtet werden.
Grafiken per CSS austauschen #
In den Plugin-Einstellungen unter dem Reiter „Ausgabe“, Abschnitt „Sterne-Bewertungen“ bitte „Eigener Style“ auswählen. Anschließend können die Grafiken ganz einfach via CSS ausgetauscht werden:
Variante 1: Beide Grafiken ersetzen #
.aawp .aawp-star-rating--custom,
.aawp-star-rating--custom,
a.aawp-star-rating--custom {
background-image: url('https://domain.de/path-to-images/star.png');
}.aawp .aawp-star-rating--custom > span,
.aawp-star-rating--custom > span,
a.aawp-star-rating--custom > span {
background-image: url('https://domain.de/path-to-images/star-active.png');
}Variante 2: Beide Grafiken ersetzen und eigene Größe festlegen #
In diesem Beispiel verwenden wir eine horizontale Grafik und legen als Größe 32px * 16px fest.
.aawp .aawp-star-rating--custom,
.aawp-star-rating--custom,
a.aawp-star-rating--custom {
height: 16px;
width: 32px;
background-size: 32px 16px;
background-image: url('https://domain.de/path-to-images/star.png');
}
.aawp .aawp-star-rating--custom > span,
.aawp-star-rating--custom > span,
a.aawp-star-rating--custom > span {
height: 16px;
width: 32px;
background-size: 32px 16px;
background-image: url('https://domain.de/path-to-images/star-active.png');
}Variante 3: Nur noch eine Vordergrundgrafik verwenden #
In diesem Beispiel wollen wir nur noch die aktive Sternanzahl ausgeben und verzichten auf den nicht verfügbaren Stern.
.aawp .aawp-star-rating--custom,
.aawp-star-rating--custom,
a.aawp-star-rating--custom {
background-image: none;
}
.aawp .aawp-star-rating--custom > span,
.aawp-star-rating--custom > span,
a.aawp-star-rating--custom > span {
background-image: url('https://domain.de/path-to-images/star-active.png');
} Die zuvor genannten CSS-Styles sollten in den Plugin-Einstellungen (Reiter „Ausgabe“), in das Feld „Eigenes CSS“ eingegeben werden. Alternativ kannst du sie auch in dein Child-/Theme auslagern, wenn du vor jede Deklarierung .aawp-custom voranstellst: z.B.
<code lang="css">.aawp-custom .aawp .aawp-star-rating--custom { ... }</code>