Nutri-Score

Nutri-Score bewertet die ernährungsphysiologische Qualität eines Produkts auf einer Skala von A (am besten) bis E (am schlechtesten). In Polen ist er freiwillig, aber zunehmend beliebt. Polski for WooCommerce zeigt die Nutri-Score-Kennzeichnung auf der Produktseite an.

Was ist Nutri-Score

Das Nutri-Score-System stuft Lebensmittelprodukte anhand eines Algorithmus ein, der Folgendes berücksichtigt:

Negative Bestandteile (Minuspunkte):

Energiewert
Zucker
gesättigte Fettsäuren
Salz (Natrium)

Positive Bestandteile (Pluspunkte):

Obst, Gemüse, Nüsse, Öle (Raps-, Walnuss-, Olivenöl)
Ballaststoffe
Eiweiß

Auf Grundlage der Punktebilanz erhält das Produkt eine Bewertung:

Stufe	Farbe	Punktebereich (feste Lebensmittel)	Beschreibung
A	Dunkelgrün (#038141)	-15 bis -1	Höchste ernährungsphysiologische Qualität
B	Hellgrün (#85BB2F)	0 bis 2	Gute ernährungsphysiologische Qualität
C	Gelb (#FECB02)	3 bis 10	Durchschnittliche ernährungsphysiologische Qualität
D	Orange (#EE8100)	11 bis 18	Geringe ernährungsphysiologische Qualität
E	Rot (#E63E11)	19 bis 40	Niedrigste ernährungsphysiologische Qualität

Konfiguration

Modul aktivieren

Gehen Sie zu WooCommerce > Einstellungen > Polski > Lebensmittel und aktivieren Sie das Untermodul “Nutri-Score”.

Einstellungen

Einstellung	Standard	Beschreibung
Nutri-Score aktivieren	Nein	Aktiviert die Anzeige der Kennzeichnung
Position auf der Produktseite	Unter dem Preis	Wo die Kennzeichnung angezeigt wird
Auf der Auflistung anzeigen	Ja	Ob auf Kategorieseiten angezeigt wird
Größe der Kennzeichnung	Normal	`small`, `normal`, `large`
Stil der Kennzeichnung	Vollständig	`full` (alle Buchstaben), `compact` (nur aktiver Buchstabe)

Nutri-Score einem Produkt zuweisen

Wählen Sie im Produkteditor auf dem Tab “Lebensmittel” die Nutri-Score-Stufe aus der Dropdown-Liste:

A - Höchste ernährungsphysiologische Qualität
B - Gute ernährungsphysiologische Qualität
C - Durchschnittliche ernährungsphysiologische Qualität
D - Geringe ernährungsphysiologische Qualität
E - Niedrigste ernährungsphysiologische Qualität

Das Plugin berechnet den Nutri-Score nicht automatisch - Sie müssen die Bewertung Ihres Produkts kennen. Zur Berechnung können Sie den offiziellen Rechner oder Daten des Herstellers verwenden.

Generiertes HTML

Die Nutri-Score-Kennzeichnung wird als eine Reihe von HTML-Elementen mit dedizierten CSS-Klassen gerendert:

<div class="polski-nutri-score polski-nutri-score--active-c">
    <span class="polski-nutri-score__label">Nutri-Score</span>
    <div class="polski-nutri-score__badges">
        <span class="polski-nutri-score__badge polski-nutri-score__badge--a">A</span>
        <span class="polski-nutri-score__badge polski-nutri-score__badge--b">B</span>
        <span class="polski-nutri-score__badge polski-nutri-score__badge--c polski-nutri-score__badge--active">C</span>
        <span class="polski-nutri-score__badge polski-nutri-score__badge--d">D</span>
        <span class="polski-nutri-score__badge polski-nutri-score__badge--e">E</span>
    </div>
</div>

CSS-Klassen pro Stufe

Das Plugin generiert CSS-Klassen für jede Stufe und ermöglicht so die vollständige Kontrolle über das Styling:

Container-Klassen

Klasse	Beschreibung
`.polski-nutri-score`	Hauptcontainer
`.polski-nutri-score--active-a`	Aktive Stufe A
`.polski-nutri-score--active-b`	Aktive Stufe B
`.polski-nutri-score--active-c`	Aktive Stufe C
`.polski-nutri-score--active-d`	Aktive Stufe D
`.polski-nutri-score--active-e`	Aktive Stufe E
`.polski-nutri-score--small`	Kleine Größe
`.polski-nutri-score--normal`	Normale Größe
`.polski-nutri-score--large`	Große Größe

Kennzeichnungs-Klassen

Klasse	Beschreibung
`.polski-nutri-score__badge`	Jede Kennzeichnung (Buchstabe)
`.polski-nutri-score__badge--a`	Kennzeichnung A
`.polski-nutri-score__badge--b`	Kennzeichnung B
`.polski-nutri-score__badge--c`	Kennzeichnung C
`.polski-nutri-score__badge--d`	Kennzeichnung D
`.polski-nutri-score__badge--e`	Kennzeichnung E
`.polski-nutri-score__badge--active`	Aktive (ausgewählte) Kennzeichnung

Standard-CSS-Stile

Das Plugin enthält integrierte CSS-Stile für die Nutri-Score-Kennzeichnung:

.polski-nutri-score {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0.5em 0;
}

.polski-nutri-score__label {
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
    margin-bottom: 0.3em;
}

.polski-nutri-score__badges {
    display: inline-flex;
    gap: 2px;
    border-radius: 4px;
    overflow: hidden;
}

.polski-nutri-score__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    font-weight: 700;
    font-size: 0.85em;
    color: #fff;
    opacity: 0.35;
    transition: opacity 0.2s, transform 0.2s;
}

.polski-nutri-score__badge--active {
    opacity: 1;
    transform: scale(1.15);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Farben pro Stufe */
.polski-nutri-score__badge--a {
    background-color: #038141;
}

.polski-nutri-score__badge--b {
    background-color: #85BB2F;
}

.polski-nutri-score__badge--c {
    background-color: #FECB02;
    color: #333;
}

.polski-nutri-score__badge--d {
    background-color: #EE8100;
}

.polski-nutri-score__badge--e {
    background-color: #E63E11;
}

/* Größen */
.polski-nutri-score--small .polski-nutri-score__badge {
    width: 1.5em;
    height: 1.5em;
    font-size: 0.7em;
}

.polski-nutri-score--large .polski-nutri-score__badge {
    width: 2.5em;
    height: 2.5em;
    font-size: 1em;
}

Stile überschreiben

Um das Aussehen der Kennzeichnung in Ihrem Theme anzupassen, überschreiben Sie die CSS-Klassen in der Datei style.css des Themes:

/* Beispiel: quadratische Kennzeichnungen mit abgerundeten Ecken */
.polski-nutri-score__badges {
    gap: 4px;
    border-radius: 0;
}

.polski-nutri-score__badge {
    border-radius: 6px;
    width: 2.2em;
    height: 2.2em;
}

/* Beispiel: dunkles Theme */
.polski-nutri-score__label {
    color: #ccc;
}

.polski-nutri-score__badge {
    opacity: 0.25;
}

Programmatischer Zugriff

Nutri-Score eines Produkts abrufen

$nutri_score = get_post_meta($product_id, '_polski_nutri_score', true);
// Gibt zurück: 'a', 'b', 'c', 'd', 'e' oder '' (leer)

Nutri-Score setzen

update_post_meta($product_id, '_polski_nutri_score', 'b');

HTML-Filter der Kennzeichnung

add_filter('polski/nutri_score/html', function (string $html, string $score, int $product_id): string {
    // HTML der Kennzeichnung ändern
    return $html;
}, 10, 3);

Bedingte Anzeige

add_filter('polski/nutri_score/display', function (bool $display, int $product_id): bool {
    // Nutri-Score für Produkte ohne ausgefüllte Nährwerte ausblenden
    $nutrients = get_post_meta($product_id, '_polski_nutrients', true);

    if (empty($nutrients)) {
        return false;
    }

    return $display;
}, 10, 2);

CSV-Import

CSV-Spalte	Beschreibung	Werte
`polski_nutri_score`	Nutri-Score-Stufe	`a`, `b`, `c`, `d`, `e`

Beispiel:

"Apple",a
"Potato chips",d
"Cola",e
"Natural yogurt",b

Schema.org

Das Plugin fügt den Nutri-Score zu den strukturierten Daten des Produkts hinzu:

{
    "@type": "Product",
    "additionalProperty": [
        {
            "@type": "PropertyValue",
            "name": "Nutri-Score",
            "value": "B"
        }
    ]
}

Die Nutri-Score-Kennzeichnung enthält ARIA-Attribute für Screenreader:

<div class="polski-nutri-score" role="img" aria-label="Nutri-Score: C - durchschnittliche ernährungsphysiologische Qualität">

Jede inaktive Kennzeichnung hat aria-hidden="true", und die aktive hat aria-current="true".

Häufige Probleme

Die Kennzeichnung wird nicht angezeigt

Prüfen Sie, ob das Untermodul Nutri-Score aktiviert ist
Stellen Sie sicher, dass dem Produkt eine Nutri-Score-Stufe zugewiesen ist
Überprüfen Sie, ob das CSS des Plugins geladen wird (kein Konflikt mit Optimierungs-Plugins)

Die Farben der Kennzeichnung weichen von den Erwartungen ab

Das Theme kann die Hintergrundfarben überschreiben. Verwenden Sie spezifischere CSS-Selektoren oder fügen Sie !important hinzu:

.polski-nutri-score__badge--a {
    background-color: #038141 !important;
}

Die Kennzeichnung ist zu groß oder zu klein

Ändern Sie die Größe in den Einstellungen (WooCommerce > Einstellungen > Polski > Lebensmittel > Nutri-Score > Größe der Kennzeichnung) oder überschreiben Sie die CSS-Größenklasse.