KI-Bilder in WooCommerce kennzeichnen

Script-Tag einbinden

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

Für WooCommerce gilt dasselbe wie für jede WordPress-Seite. Zwei Wege:

• Ohne Code: das 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(). Ein Child-Theme sorgt dafür, dass ein Update des Themes Ihre Änderung nicht überschreibt.

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

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

Bilder markieren

Das Widget kennzeichnet nur Bilder, die Sie markiert haben. Ob ein Bild ein Label braucht, entscheiden Sie, zum Beispiel mit dem Pflicht-Check. Drei Wege, die sich kombinieren lassen:

• Attribut am Bild: data-ai-label="generated" für vollständig mit KI erzeugte Bilder, data-ai-label="modified" für Fotos, die mit KI verändert wurden.
• 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. Der Zusatz hilft zugleich Screenreadern.

Am einfachsten in WooCommerce ist der Alt-Text in der Mediathek. Öffnen Sie unter Medien die Details des Bildes und ergänzen Sie den Alternativtext um „(KI-generiert)“ oder „(Mit KI verändert)“. 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.

Stolpersteine

• Verzögertes JavaScript: Optimierungs-Plugins halten Skripte teils zurück, bis der Besucher scrollt, tippt oder die Maus bewegt, bei WP Rocket etwa „Delay JavaScript execution“. Das Label erschiene dann erst danach, also nicht beim ersten Blick. Tragen Sie widget.js bei „Excluded JavaScript Files“ ein oder nutzen Sie die Ausnahmeliste Ihres Plugins.
• 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 auch 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 Bilder als <img> auf Seiten, auf denen das Skript läuft. Hintergrundbilder aus dem Stylesheet und Bilder unter 48 Pixeln (einstellbar mit data-min) bekommen kein Label.
• Warenkorb und Kasse zeigen oft nur kleine Vorschaubilder. Sehr kleine Bilder bekommen kein Label. Prüfen Sie beide Seiten selbst.
• Bestellbestätigungen per E-Mail erreicht es nicht. Wo Sie ein Bild außerhalb der Website zeigen, hilft eine Kopie mit eingebranntem Label aus KI-Bild kennzeichnen.
• Datenschutz: Das Skript wird von ai-label.app geladen. Dabei sieht unser Hoster die IP-Adresse wie bei jedem Abruf. Es setzt keine Cookies. 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. Bis dahin funktioniert das Widget ohne Installation im System. Wenn Sie möchten, schreiben wir Ihnen einmal zum Start.

Keine Rechtsberatung. Die Inhalte erklären die Rechtslage auf Grundlage der Primärquellen, sie ersetzen keine Prüfung im Einzelfall.