KI-Bilder in WooCommerce kennzeichnen

Script-Tag einbinden

<script src="https://www.ai-label.app/widget.js" defer></script>

• Ohne Code: mit dem Plugin WPCode (früher „Insert Headers and Footers“). Im Menü „Code Snippets“ fügen Sie das Script-Tag in das Feld für den Kopfbereich („Scripts in Header“) ein und speichern.
• Im Child-Theme: in der functions.php mit wp_enqueue_script(). Dort überschreibt ein Theme-Update Ihre Änderung nicht.

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script( 'ai-label', 'https://www.ai-label.app/widget.js', array(), null, array( 'strategy' => 'defer' ) );
} );

Öffnen Sie danach eine Produktseite und eine Kategorieseite mit markiertem Bild. Das Label erscheint oben rechts auf dem Bild, auch auf den Produktkarten.

Bilder markieren

Welche Bilder ein Label brauchen, entscheiden Sie, etwa mit dem Pflicht-Check. Das Widget kennzeichnet nur markierte Bilder, auf drei kombinierbaren Wegen:

• Attribut am Bild: data-ai-label="generated" für vollständig mit KI erzeugte Bilder, data-ai-label="modified" für mit KI veränderte Fotos.
• Dateiname mit Kennung vor der Endung: vase--ai.jpg oder vase--ai-mod.jpg.
• Alt-Text, der mit „(KI-generiert)“ oder „(Mit KI verändert)“ endet.

In WooCommerce markieren Sie über den Alt-Text in der Mediathek, zu finden unter Medien in den Details des Bildes. Produktbild und Galerie setzen Sie im Produkt-Editor in der rechten Spalte, beide verweisen auf Dateien der Mediathek.

Der Dateiname funktioniert in WordPress nicht. Die Funktion sanitize_file_name() fasst beim Hochladen mehrere Bindestriche zu einem zusammen. Aus vase--ai.jpg wird vase-ai.jpg, und das Widget erkennt die Kennung nicht mehr. Das Attribut data-ai-label setzen Sie nur in Vorlagen des Child-Themes.

WordPress · WooCommerce/ Mediathek / Anhang-Details

AI

kerze.jpg

Alternativtext

Duftkerze im Glas (KI-generiert)

KI-generiert

Duftkerze im Glas24,90 €

Vase aus Steinzeug32,00 €

KI-generiert

Pilzleuchte59,00 €

Stolpersteine

• Verzögertes JavaScript: Optimierungs-Plugins halten Skripte teils zurück, bis der Besucher scrollt, tippt oder die Maus bewegt, bei WP Rocket etwa mit „Delay JavaScript execution“. Dann fehlt das Label beim ersten Blick. Tragen Sie widget.js bei „Excluded JavaScript Files“ oder in der Ausnahmeliste Ihres Plugins ein.
• Seiten-Cache: Leeren Sie nach dem Einbinden den Cache des Caching-Plugins und gegebenenfalls des CDN.
• Zoom und Vollbild: Die Produktgalerie vergrößert Bilder beim Überfahren und zeigt sie auf Klick im Vollbild. Prüfen Sie, ob das Label dort erscheint.
• Leere Alt-Texte: Fehlt der Alt-Text, setzen manche Themes den Produktnamen ein. Dann fehlt der Zusatz, und das Bild bleibt ohne Label.

Grenzen des Widgets

• Das Widget erreicht nur <img>-Elemente auf Seiten mit dem Skript. Hintergrundbilder aus dem Stylesheet und Bilder unter 48 Pixeln (einstellbar mit data-min) bleiben ohne Label.
• Warenkorb und Kasse zeigen oft nur kleine Vorschaubilder. Prüfen Sie beide Seiten.
• E-Mails wie Bestellbestätigungen erreicht es nicht. Für Bilder außerhalb der Website erzeugen Sie mit KI-Bild kennzeichnen eine Kopie mit eingebranntem Label.
• Datenschutz: Beim Laden von ai-label.app sieht unser Hoster wie bei jedem Abruf die IP-Adresse. Cookies setzt das Skript nicht. Erwähnen Sie die Einbindung in Ihrer Datenschutzerklärung.

Native App

Eine eigene App für WooCommerce ist geplant, einen Termin gibt es noch nicht.