Die Herausforderung der KI-Bildkennzeichnung
Als begeisterter Blogger und Hobbyscripter stieß ich auf ein praktisches Problem(chen): Immer häufiger nutze ich KI-Tools wie DALL-E, Firefly und Midjourney für Bilder, um zu testen, was die KI so kann. Vereinzelt verwendete ich auch welche auf WordPress-Blogs.
Dabei wurde mir schnell klar, dass ich diese KI-generierten Bilder irgendwie kennzeichnen sollte bzw. möchte – nicht nur der Transparenz wegen, sondern auch, weil ich selbst gerne den Überblick behalten wollte.Zuerst versuchte ich es mit manuellen HTML-Codes und Bildunterschriften. Aber mal ehrlich: Bei der wachsenden Anzahl an Bildern wurde das schnell mühsam und unübersichtlich. Als DevOps Engineer liegt mir Automatisierung im Blut, und so begann ich in meiner Freizeit zu tüfteln.
Das Ergebnis meiner Bastelei ist das DWC AI Image Marker Plugin.
DarkWolfCave.de
Es macht genau das, was ich für meinen eigenen Blog benötigte: Mit einem einzigen Klick in der Medienbibliothek erscheint ein einheitliches Badge auf KI-Bildern. Keine komplizierte Konfiguration, kein Herumhantieren mit Code-Schnipseln. Da ich täglich selbst damit arbeite, habe ich besonderen Wert auf Einfachheit gelegt. Was als kleine Lösung für meinen eigenen Blog begann, teile ich jetzt gerne mit anderen WordPress-Enthusiasten – denn ich bin sicher, ich bin nicht der Einzige, der nach einer praktischen Lösung für dieses Problem gesucht hat.
Was macht das DWC AI Image Marker Plugin besonders?
Das Plugin erweitert die WordPress-Medienbibliothek um eine simple Checkbox-Funktion. Bilder, die als KI-generiert markiert werden, erhalten automatisch ein einheitliches, professionell gestaltetes Badge. Dies ermöglicht:
- Zentrale Verwaltung: Überblick und Kontrolle aller KI-Bilder an einem Ort
- Automatische Kennzeichnung: Einheitliche Badges für konsistente Transparenz
- Flexible Positionierung: Wählbare Badge-Position für optimale Sichtbarkeit
- Individuelle Anpassung: Konfigurierbarer Badge-Text und Design
- Responsive Darstellung: Perfekte Anzeige auf allen Geräten
Warum sollte ich WordPress KI-Bilder kennzeichnen?
Transparenz bei KI-generierten Bildern:
Eine zukünftige Anforderung
Ab dem 2. August 2026 tritt im Rahmen des EU AI Acts eine neue Regelung in Kraft, die für viele Website-Betreiber und Content-Ersteller relevant sein wird. Diese Verordnung sieht vor, dass bestimmte KI-generierte Inhalte gekennzeichnet werden müssen. Betroffen sind insbesondere:
- “Deepfakes” – Bilder, die realen Personen oder Orten täuschend ähnlich sehen
- Inhalte zu Themen von öffentlichem Interesse wie Politik, Klima oder Gesundheit
- Bilder, die im Rahmen einer beruflichen oder gewerblichen Tätigkeit verwendet werden
Diese Kennzeichnungspflicht zielt darauf ab, Transparenz zu gewährleisten und das Vertrauen in digitale Medien zu stärken. Auch wenn nicht jedes KI-generierte Bild automatisch unter diese Regelung fällt, ist es ratsam, sich frühzeitig mit den Anforderungen vertraut zu machen.
Das DWC AI Image Marker Plugin bietet eine praktische Lösung, um diesen zukünftigen Anforderungen gerecht zu werden. Es ermöglicht eine einfache und flexible Kennzeichnung von KI-generierten Bildern direkt in Ihrer WordPress-Umgebung. Durch die Integration dieses Tools kannst du:
- KI-generierte Bilder automatisch mit einem anpassbaren Badge versehen
- Die Kennzeichnung effizient über Bulk-Aktionen in der Medienbibliothek verwalten
- Dich auf kommende regulatorische Anforderungen vorbereiten
Indem du das Plugin jetzt schon einsetzt, schaffst du nicht nur Transparenz für deine Besucher, sondern bereitest dich auch proaktiv auf zukünftige gesetzliche Vorgaben vor. Ob man es letztlich so benötigt und einsetzen muss, wird sich zeigen. Ich finde es aber okay, wenn man KI-Bilder auch als solche kenntlich macht. Einfach aus Respekt vor »echten« Künstlern, daher werde ich WordPress KI-Bilder kennzeichnen.
Installation & Erste Schritte
Systemvoraussetzungen
Nach der Installation kannst du sofort beginnen, deine WordPress KI-Bilder zu kennzeichnen. Der Prozess ist intuitiv und benötigt keine speziellen Vorkenntnisse.
- WordPress 6.0 oder höher
- PHP 7.2 oder aktueller
- Administratorrechte
⚠️ Wichtig: Erstelle vor der Installation ein Backup deiner WordPress-Installation für maximale Sicherheit. Automatisch, vor jedem Installieren, macht dies zum Beispiel UpdraftPlus in der Pro-Version!
Du wirst hier einen groben Überblick finden.
Allerdings biete ich dir auch noch etwas mehr Support an:
- Du benötigst persönlichen Support
- Du möchtest von Beginn an Unterstützung bei deinem Projekt
- Du möchtest ein hier vorgestelltes Plugin durch mich installieren und einrichten lassen
- Du würdest gerne ein von mir erstelltes Script etwas mehr an deine Bedürfnisse anpassen
Für diese Punkte und noch einiges mehr habe ich einen limitierten
VIP-Patreon Tarif
eingerichtet. Falls er dir dort zurzeit nicht angeboten wird,
kontaktiere mich bitte über Discord und wir finden eine Lösung!
Installation in 3 einfachen Schritten
- Download
- Lade die ZIP-Datei aus meinem Github (darkwolfcave) herunter
- Speichere sie lokal auf deinem Computer (nicht entpacken)
- WordPress-Installation
- Navigiere zu: WordPress Dashboard > Plugins > Installieren
- Wähle “Plugin hochladen”
- Wähle die heruntergeladene ZIP-Datei
- Klicke auf “Jetzt installieren”
- Aktivierung
- Klicke auf “Plugin aktivieren”
- Warte die Bestätigung ab
- Fertig!
Grundeinstellungen & Konfiguration
Plugin-Einstellungen anpassen
- Zugriff auf Einstellungen
- WordPress Dashboard > Einstellungen > AI Image Marker
- Badge-Konfiguration
- Text festlegen: Standard ist “KI-generiert”
- Position wählen:
- Oben links (Standard)
- Oben rechts
- Unten links
- Unten rechts
- Design anpassen (aktuell nur über CSS)
- Hintergrundfarbe
- Schriftart
- Transparenz
- Randabstände
- Einstellungen speichern
- “Änderungen speichern” klicken
KI-Bilder professionell markieren
Bilder markieren
Das Plugin zum WordPress KI-Bilder kennzeichnen bietet zwei Möglichkeiten, Bilder als KI-generiert zu markieren:
Einzelne Bilder markieren:
- Öffne die Medienbibliothek
- Klicke auf das gewünschte Bild
- Aktiviere die Checkbox “KI-generiertes Bild”
- die Änderungen werden direkt gespeichert
Mehrere Bilder gleichzeitig markieren:
- Wechsel in der Medienbibliothek zur Listenansicht
- Wähle die zu markierenden Bilder aus
- Öffne das Dropdown-Menü “Mehrere Dateien bearbeiten”
- Wähle “Als KI-generiert markieren”
- Bestätige die Aktion
💡 Tipp: Die Bulk-Aktion eignet sich besonders, wenn du viele KI-Bilder auf einmal importierst oder markieren möchtest.
Medienbibliothek-Integration
Um WordPress KI-Bilder zu kennzeichnen, erweitert das Plugin die Medienbibliothek um folgende Funktionen:
- Zusätzliche Spalte: 🤖-Icon für KI-Bilder, “-” für normale Bilder
- Massenaktionen: KI-Status für mehrere Bilder gleichzeitig setzen oder entfernen
- Einzelbild-Bearbeitung: Checkbox im Medien-Dialog zum schnellen Umschalten des KI-Status
- Filterung: Filterung nach KI- und normalen Bildern
Kompatibilität
Das Plugin wurde intensiv getestet mit:
- WordPress Block Editor (Gutenberg)
- GenerateBlocks / GeneratePress
- Standard WordPress Themes
❗Hinweis: Die Kompatibilität mit spezifischen Page-Buildern kann variieren. Teste das Plugin in einer Entwicklungsumgebung.
Design & Anpassungsmöglichkeiten
Badge-Gestaltung nach deinen Vorstellungen
Es gibt umfangreiche Anpassungsoptionen über die CSS-Datei. Bald wird dies auch über das Admin-Menü möglich sein:
.ai-image-badge { position: absolute !important; background-color: rgba(0, 0, 0, 0.7); color: white !important; padding: 5px 10px !important; border-radius: 4px !important; font-size: 12px !important; display: flex !important; align-items: center !important; gap: 5px !important; z-index: 999999 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important; margin: 0 !important; line-height: 1.4 !important; cursor: help; }
Responsive Darstellung
Das Badge passt sich automatisch verschiedenen Bildschirmgrößen an:
- Desktop: Optimale Standardgröße
- Tablet: Angepasste Mittelgröße
- Smartphone: Kompakte mobile Darstellung
FAQ´s
Ja, alle Bildmarkierungen werden sicher in der WordPress-Datenbank gespeichert und bleiben bei Updates bestehen.
Der DWC-AI-Image-Marker wurde für maximale Performance entwickelt. Der Einfluss auf die Ladezeit ist minimal, da das Plugin ressourcenschonend arbeitet und optimiertes Caching nutzt.
Ja, du kannst das Badge über die Plugin-Einstellungen oder per CSS-Anpassung temporär deaktivieren. Die Markierungen in der Medienbibliothek bleiben dabei erhalten.
Absolut! Du kannst die Position jederzeit zentral in den Plugin-Einstellungen ändern. Die Änderung wird automatisch auf alle markierten Bilder angewendet.
Du hast weitere Fragen oder benötigst Hilfe? Gerne versuche ich im Rahmen meiner Möglichkeiten dich zu unterstützen. Dafür kannst du hier die Kommentar-Sektion (nicht vergessen Antworten zu abonnieren) nutzen oder du schaust auf meinem Discord-Kanal vorbei.
Funktionsweise des Plugins
Hier erfährst du im Detail, wie das Plugin WordPress KI-Bilder kennzeichnet und welche technischen Prozesse im Hintergrund ablaufen. Viel Spaß!
Falls du dich auch mit WordPress und Plugins beschäftigst oder es lernen möchtest, kann ich dir folgende Bücher empfehlen:
Werbung
Vorschau | Produkt | Preis | |
---|---|---|---|
|
WordPress 6 – Das Praxisbuch: Für Einsteiger und… |
24,95 EUR |
Bei Amazon kaufen |
|
WordPress – Plugins, Themes und Blöcke entwickeln:… |
49,90 EUR |
Bei Amazon kaufen |
|
WordPress Plugin Development Cookbook – Third Edition:… |
27,99 EUR |
Bei Amazon kaufen |
Letzte Aktualisierung am 14.02.2025 (Preise können abweichen) / Infos zu Affiliate Links / Bilder von der Amazon Product Advertising API
Affiliate – Links
DarkWolfCave.de ist Teilnehmer des Amazon-Partnerprogramm, das zur Bereitstellung eines Mediums für Webseiten konzipiert wurde, mittels dessen durch die Platzierung von Partner-Links zu Amazon.de Entgelte verdient werden können.
Technische Details
📟Github: Da ich dieses Plugin erweitern und pflegen werde, kann der in diesem Guide gezeigte Code vielleicht etwas abweichen. Den aktuellen findest du aber immer in meinem GitHub.
Frontend-Implementierung
Das Plugin verwendet PHP und JavaScript für die DOM-Manipulation. Beispiel des generierten HTML:
<div class="ai-image-wrapper"> <div class="ai-image-badge">KI-generiert</div> <img src="..." alt="..." /> </div>
Dazugehöriges CSS für responsive Darstellung:
.ai-image-wrapper { position: relative !important; display: inline-block !important; width: max-content; margin: 0 !important; padding: 0 !important; } .ai-image-wrapper img { display: block; max-width: 100%; height: auto; margin: 0 !important; } .ai-image-badge { position: absolute !important; background-color: rgba(0, 0, 0, 0.7); color: white !important; padding: 5px 10px !important; border-radius: 4px !important; font-size: 12px !important; display: flex !important; align-items: center !important; gap: 5px !important; z-index: 999999 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important; margin: 0 !important; line-height: 1.4 !important; cursor: help; } .ai-image-badge::before { content: "🤖"; font-size: 14px; margin-right: 5px; } .ai-image-badge:hover::after { content: "Dieses Bild wurde mit KI generiert"; position: absolute !important; background-color: rgba(0, 0, 0, 0.9) !important; color: white !important; padding: 8px !important; border-radius: 4px !important; white-space: nowrap !important; font-size: 11px !important; z-index: 999999 !important; pointer-events: none !important; } @media (max-width: 768px) { .ai-image-badge { font-size: 10px !important; padding: 4px 8px !important; } .ai-image-badge::before { font-size: 12px; } }
Leistungsoptimierungen
Das Plugin wurde für optimale Leistung entwickelt:
- Minimale DOM-Manipulationen
- Effiziente CSS-Selektoren
- Caching von Optionsabfragen
- Optimierte Datenbankabfragen
Sicherheitsaspekte
Folgende Sicherheitsmaßnahmen wurden implementiert:
- Nonce-Validierung bei Formularen
- ABSPATH-Check zur Verhinderung direkter Dateiaufrufe
- Sanitization aller Eingaben
- Berechtigungsprüfungen (
manage_options
)
DWC AI Image Marker – Technische Dokumentation
💻Info: Du möchtest dein eigenes Plugin erstellen, aber weißt nicht wie? Dann könnte dieser Beitrag dir weiterhelfen.
1. Überblick
Das WordPress-Plugin “DWC AI Image Marker” markiert automatisch KI-generierte Bilder mit einem konfigurierbaren Badge und ermöglicht eine zentrale Verwaltung dieser Bilder im WordPress-Backend.
Version: 1.0.1
- Lizenz: GPL v2 oder neuer
- Autor: DarkWolfCave.de
2. Funktionsumfang
Hauptfunktionen
- Automatische Badge-Platzierung auf KI-Bildern
- Konfigurierbare Badge-Position (oben/unten, links/rechts)
- Anpassbarer Badge-Text
- Integration in WordPress-Medienbibliothek
- Bulk-Aktionen für Medienverarbeitung
- Responsive Design
Technische Features
- Unterstützung für WordPress Core Image Blocks
- GenerateBlocks Integration
- DOM-Manipulation für Badge-Implementierung
- Medienübersicht mit KI-Status
- Bulk-Verarbeitung von Medieneinträgen
3. Installation
- Plugin in WordPress hochladen
- Plugin aktivieren
- Standardeinstellungen werden automatisch erstellt:
- Badge-Text: “KI-generiert”
- Position: Oben links
4. Konfiguration
Admin-Bereich
- Zugangspfad: WordPress-Admin → Einstellungen → AI Image Marker
- Einstellungsoptionen:
- Badge-Text: Frei wählbarer Text
- Position: 4 Auswahlmöglichkeiten
- Oben links
- Oben rechts
- Unten links
- Unten rechts
5. Medienbibliothek-Integration
Neue Spalte
- Anzeige des KI-Status durch Icons:
- 🤖 = KI-generiertes Bild
- − = Kein KI-Bild
Bulk-Aktionen
- “Als KI-generiert markieren”
- “KI-Markierung entfernen”
- Statusmeldungen nach Bulk-Aktionen
Einzelbild-Bearbeitung
- Checkbox im Medien-Dialog
- Sofortige Aktualisierung des KI-Status
6. Frontend-Implementierung
CSS-Struktur
.ai-image-wrapper { position: relative !important; display: inline-block !important; width: max-content; margin: 0 !important; padding: 0 !important; } .ai-image-wrapper img { display: block; max-width: 100%; height: auto; margin: 0 !important; } .ai-image-badge { position: absolute !important; background-color: rgba(0, 0, 0, 0.7); color: white !important; padding: 5px 10px !important; border-radius: 4px !important; font-size: 12px !important; display: flex !important; align-items: center !important; gap: 5px !important; z-index: 999999 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important; margin: 0 !important; line-height: 1.4 !important; cursor: help; }
Responsive Verhalten
- Mobile Anpassung ab 768px
- Reduzierte Badge-Größe
- Optimierte Touch-Bereiche
7. Entwickler-API
Hooks und Filter
// KI-Status prüfen get_post_meta($image_id, '_is_ai_generated', true) // KI-Status setzen update_post_meta($post_id, '_is_ai_generated', '1') // KI-Status entfernen delete_post_meta($post_id, '_is_ai_generated')
8. Sicherheitsmerkmale
- Nonce-Validierung bei Formularen
- ABSPATH-Check
- Sanitization der Einstellungen
- Berechtigungsprüfung (manage_options)
9. Fehlerbehebung
Bekannte Probleme:
- Badge-Anzeige bei verschachtelten Blocks prüfen
- CSS-Spezifität bei Theme-Konflikten beachten
- DOM-Manipulation bei komplexen Layouts verifizieren
Lösungsansätze:
- CSS-Prioritäten durch !important gesetzt
- DOM-Struktur durch Wrapper gesichert
- Responsive Anpassungen implementiert
10. Performance
Optimierungen:
- Minimale DOM-Manipulationen
- Effiziente CSS-Selektoren
- Cached Optionsabfragen
- Optimierte Datenbankabfragen
11. Kompatibilität
Getestet mit:
- WordPress Core Blocks
- GenerateBlocks
- Gängige WordPress-Themes
- Performance-Plugins
Technische Erklärung
Header-Kommentar
/** * Plugin Name: DWC AI Image Marker * Plugin URI: https://github.com/DarkWolfCave/dwc-ai-image-marker/archive/refs/heads/main.zip * Description: Markiert KI-generierte Bilder automatisch mit einem Badge und verwaltet diese zentral in WordPress. * Version: 1.0.1 * Author: DarkWolfCave.de * Author URI: https://darkwolfcave.de * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: dwc-ai-marker */
Dieser Header enthält die Metadaten des Plugins, einschließlich Name, Beschreibung, Version, Autor und Lizenzinformationen. Diese Informationen werden im WordPress-Plugin-Manager angezeigt.
Sicherheitscheck
if (!defined('ABSPATH')) { exit; }
Dieser Sicherheitscheck stellt sicher, dass die Datei nicht direkt ausgeführt wird, sondern nur über WordPress-Zugriff hat. ABSPATH
ist in WordPress definiert und der Check verhindert unautorisierten Zugriff.
Hauptklasse: DWC_AI_Image_Marker
class DWC_AI_Image_Marker { private $version = '1.0.1'; private $options = null; public function __construct() { add_action('init', array($this, 'init')); if (is_admin()) { add_action('admin_menu', array($this, 'add_admin_menu')); add_action('admin_init', array($this, 'register_settings')); add_filter('bulk_actions-upload', array($this, 'add_bulk_actions')); add_filter('handle_bulk_actions-upload', array($this, 'handle_bulk_actions'), 10, 3); add_action('admin_notices', array($this, 'bulk_action_notices')); add_filter('manage_upload_columns', array($this, 'add_media_columns')); add_action('manage_media_custom_column', array($this, 'manage_media_custom_column'), 10, 2); add_filter('manage_upload_sortable_columns', array($this, 'register_sortable_columns')); add_action('pre_get_posts', array($this, 'sort_columns')); } add_action('wp_enqueue_scripts', array($this, 'enqueue_styles')); add_filter('render_block', array($this, 'handle_generateblocks_image'), 10, 3); } // ... weitere Methoden }
Die Hauptklasse DWC_AI_Image_Marker
bildet das Kernstück des Plugins. Sie initialisiert alle notwendigen Funktionen und Hook-Registrierungen für die Verwaltung und Anzeige von KI-generierten Bildern in WordPress.
Klassenstruktur:
class DWC_AI_Image_Marker
: Hauptklasse des Plugins, kapselt sämtliche Logik und Funktionsaufrufe.
Klassenvariablen:
private $version = '1.0.1';
: Speichert die aktuelle Plugin-Version.private $options = null;
: Zwischenspeicher für Plugin-Optionen.
Konstruktor-Methode:
public function __construct()
:- Wird beim Erstellen einer Klasseninstanz ausgeführt.
- Registriert verschiedene WordPress-Hooks.
Allgemeine Hooks:
add_action('init', array($this, 'init'));
:- Registriert
init
-Methode für WordPress-Initialisierung.
- Registriert
Admin-spezifische Hooks:
if (is_admin()) { ... }
: Prüft auf Admin-Bereich-Ausführung.add_action('admin_menu', ...)
: Fügt Menüeinträge hinzu.add_action('admin_init', ...)
: Registriert Plugin-Einstellungen.add_filter('bulk_actions-upload', ...)
: Erweitert Bulk-Aktionen.add_filter('handle_bulk_actions-upload', ...)
: Verarbeitet Bulk-Aktionen.add_action('admin_notices', ...)
: Zeigt Admin-Benachrichtigungen.add_filter('manage_upload_columns', ...)
: Fügt Medienbibliothek-Spalte hinzu.add_action('manage_media_custom_column', ...)
: Befüllt Custom-Spalte.add_filter('manage_upload_sortable_columns', ...)
: Macht Spalte sortierbar.add_action('pre_get_posts', ...)
: Implementiert Spalten-Sortierung.
Frontend-Hooks:
add_action('wp_enqueue_scripts', ...)
: Bindet Frontend-Styles ein.add_filter('render_block', ...)
: Bearbeitet GenerateBlocks-Bildblöcke.
Medienbibliothek-Erweiterungen
Diese Methoden erweitern die WordPress-Medienbibliothek um Funktionen zur Kennzeichnung und Verwaltung von KI-generierten Bildern.
public function add_media_columns($columns) { $columns['ai_generated'] = __('KI-generiert', 'dwc-ai-marker'); return $columns; } public function manage_media_custom_column($column_name, $post_id) { if ($column_name === 'ai_generated') { $is_ai = get_post_meta($post_id, '_is_ai_generated', true); if ($is_ai) { echo '<span style="font-size: 16px; display: inline-block; padding-left: 5px;" title="KI-generiertes Bild">🤖</span>'; } else { echo '<span style="color: #ccc; display: inline-block; padding-left: 5px;" title="Kein KI-Bild">−</span>'; } } } public function register_sortable_columns($columns) { $columns['ai_generated'] = 'ai_generated'; return $columns; } public function sort_columns($query) { if (!is_admin() || !$query->is_main_query() || $query->get('post_type') !== 'attachment') { return; } $orderby = $query->get('orderby'); if ($orderby === 'ai_generated') { $query->set('meta_key', '_is_ai_generated'); $query->set('orderby', 'meta_value'); } }
Spalte hinzufügen:
add_media_columns
: Fügt eine neue Spalte ‘KI-generiert’ zur Medienbibliothek hinzu.
Spalteninhalt befüllen:
manage_media_custom_column
: Zeigt ein Roboter-Emoji für KI-generierte Bilder oder einen Strich für normale Bilder an.
Sortierbare Spalten registrieren:
register_sortable_columns
: Macht die ‘KI-generiert’-Spalte sortierbar.
Sortierlogik implementieren:
sort_columns
: Implementiert die Sortierlogik für die ‘KI-generiert’-Spalte basierend auf dem Meta-Wert ‘_is_ai_generated’.
Einstellungen und Admin-Funktionen
Diese Methoden sind für die Verwaltung der Plugin-Einstellungen und die Implementierung von Admin-Funktionalitäten zuständig.
public function register_settings() { register_setting( 'dwc_ai_marker_settings_group', 'dwc_ai_marker_settings', array( 'sanitize_callback' => array($this, 'sanitize_settings'), 'default' => array('badge_text' => 'KI-generiert') ) ); } public function sanitize_settings($input) { $sanitized = array(); $sanitized['badge_text'] = sanitize_text_field($input['badge_text']); $valid_positions = array('top-left', 'top-right', 'bottom-left', 'bottom-right'); $sanitized['position'] = in_array($input['position'], $valid_positions) ? $input['position'] : 'top-left'; return $sanitized; } public function add_bulk_actions($bulk_actions) { $bulk_actions['mark_ai_generated'] = __('Als KI-generiert markieren', 'dwc-ai-marker'); $bulk_actions['unmark_ai_generated'] = __('KI-Markierung entfernen', 'dwc-ai-marker'); return $bulk_actions; } public function handle_bulk_actions($redirect_to, $doaction, $post_ids) { if ($doaction !== 'mark_ai_generated' && $doaction !== 'unmark_ai_generated') { return $redirect_to; } $updated = 0; foreach ($post_ids as $post_id) { if ($doaction === 'mark_ai_generated') { update_post_meta($post_id, '_is_ai_generated', '1'); $updated++; } elseif ($doaction === 'unmark_ai_generated') { delete_post_meta($post_id, '_is_ai_generated'); $updated++; } } $redirect_to = add_query_arg(array( 'bulk_ai_marker_updated' => $updated, 'bulk_action' => $doaction ), $redirect_to); return $redirect_to; } public function bulk_action_notices() { if (!empty($_REQUEST['bulk_ai_marker_updated'])) { $updated = intval($_REQUEST['bulk_ai_marker_updated']); $action = $_REQUEST['bulk_action']; $message = ''; if ($action === 'mark_ai_generated') { $message = sprintf( _n( '%s Bild wurde als KI-generiert markiert.', '%s Bilder wurden als KI-generiert markiert.', $updated, 'dwc-ai-marker' ), number_format_i18n($updated) ); } else { $message = sprintf( _n( 'KI-Markierung wurde von %s Bild entfernt.', 'KI-Markierung wurde von %s Bildern entfernt.', $updated, 'dwc-ai-marker' ), number_format_i18n($updated) ); } echo '<div class="updated notice is-dismissible"><p>' . esc_html($message) . '</p></div>'; } }
Einstellungen registrieren:
register_settings
: Registriert die Plugin-Einstellungen in WordPress.
Einstellungen bereinigen:
sanitize_settings
: Bereinigt und validiert die Eingaben für die Plugin-Einstellungen.
Bulk-Aktionen hinzufügen:
add_bulk_actions
: Fügt benutzerdefinierte Bulk-Aktionen zur Medienbibliothek hinzu.
Bulk-Aktionen verarbeiten:
handle_bulk_actions
: Verarbeitet die benutzerdefinierten Bulk-Aktionen für KI-Bilder.
Admin-Benachrichtigungen:
bulk_action_notices
: Zeigt Benachrichtigungen nach der Ausführung von Bulk-Aktionen an.
Frontend-Funktionalitäten
Diese Methoden sind für die Frontend-Darstellung und die Modifikation von Bildblöcken zuständig.
public function enqueue_styles() { wp_enqueue_style( 'dwc-ai-marker', $this->get_plugin_url() . 'css/dwc-ai-marker.css', array(), $this->version ); $options = $this->get_options(); $position = isset($options['position']) ? $options['position'] : 'top-left'; $css = ".ai-image-badge {"; switch($position) { case 'top-right': $css .= "left: auto !important; right: 10px !important; top: 10px !important; bottom: auto !important;"; break; case 'bottom-left': $css .= "left: 10px !important; right: auto !important; top: auto !important; bottom: 10px !important;"; break; case 'bottom-right': $css .= "left: auto !important; right: 10px !important; top: auto !important; bottom: 10px !important;"; break; default: // top-left $css .= "left: 10px !important; right: auto !important; top: 10px !important; bottom: auto !important;"; } $css .= "}"; wp_add_inline_style('dwc-ai-marker', $css); } public function handle_generateblocks_image($block_content, $block, $instance) { if (isset($block['blockName']) && $block['blockName'] === 'generateblocks/image') { $attributes = isset($block['attrs']) ? $block['attrs'] : null; $image_id = isset($attributes['mediaId']) ? $attributes['mediaId'] : null; if ($image_id && get_post_meta($image_id, '_is_ai_generated', true)) { $dom = new DOMDocument(); @$dom->loadHTML(mb_convert_encoding($block_content, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD); $img = $dom->getElementsByTagName('img')->item(0); if ($img) { $wrapper = $dom->createElement('div'); $wrapper->setAttribute('class', 'ai-image-wrapper'); $badge = $dom->createElement('div'); $badge->setAttribute('class', 'ai-image-badge'); $options = get_option('dwc_ai_marker_settings'); $badge_text = isset($options['badge_text']) ? $options['badge_text'] : 'KI-generiert'; $badge->appendChild($dom->createTextNode($badge_text)); $img->parentNode->insertBefore($wrapper, $img); $wrapper->appendChild($badge); $wrapper->appendChild($img); $block_content = $dom->saveHTML(); } } } return $block_content; } public function modify_image_block($block_content, $block) { $image_id = isset($block['attrs']['id']) ? $block['attrs']['id'] : null; if ($image_id && get_post_meta($image_id, '_is_ai_generated', true)) { $dom = new DOMDocument(); @$dom->loadHTML(mb_convert_encoding($block_content, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD); $img = $dom->getElementsByTagName('img')->item(0); if ($img) { $wrapper = $dom->createElement('div'); $wrapper->setAttribute('class', 'ai-image-wrapper'); $badge = $dom->createElement('div'); $badge->setAttribute('class', 'ai-image-badge'); $options = get_option('dwc_ai_marker_settings'); $badge_text = isset($options['badge_text']) ? $options['badge_text'] : 'KI-generiert'; $badge->appendChild($dom->createTextNode($badge_text)); $img->parentNode->insertBefore($wrapper, $img); $wrapper->appendChild($badge); $wrapper->appendChild($img); $block_content = $dom->saveHTML(); } } return $block_content; }
Styles einbinden:
enqueue_styles
:- Bindet das Haupt-CSS-File des Plugins ein.
- Generiert und fügt dynamisches CSS basierend auf den Plugin-Einstellungen hinzu.
- Passt die Position des KI-Badges entsprechend der Benutzereinstellungen an.
GenerateBlocks-Bilder behandeln:
handle_generateblocks_image
:- Prüft, ob es sich um einen GenerateBlocks-Bildblock handelt.
- Fügt bei KI-generierten Bildern ein Badge hinzu.
- Nutzt DOM-Manipulation, um das Badge zum Bild hinzuzufügen.
Standard-Bildblöcke modifizieren:
modify_image_block
:- Ähnlich wie
handle_generateblocks_image
, aber für Standard-WordPress-Bildblöcke. - Prüft, ob das Bild KI-generiert ist und fügt gegebenenfalls ein Badge hinzu.
- Verwendet ebenfalls DOM-Manipulation zur Anpassung des HTML-Outputs.
- Ähnlich wie
Hilfsfunktionen
private function get_options() { if ($this->options === null) { $this->options = get_option('dwc_ai_marker_settings', array('badge_text' => 'KI-generiert')); } return $this->options; } private function get_plugin_url() { return plugin_dir_url(__FILE__); } private function get_plugin_path() { return plugin_dir_path(__FILE__); }
Plugin-Optionen abrufen:
get_options
:- Ruft die Plugin-Einstellungen ab und speichert sie zwischen.
- Vermeidet wiederholte Datenbankabfragen durch Caching.
Plugin-URL ermitteln:
get_plugin_url
: Gibt die URL des Plugin-Verzeichnisses zurück.
Plugin-Pfad ermitteln:
get_plugin_path
: Gibt den Serverpfad des Plugin-Verzeichnisses zurück.
Plugin-Initialisierung und Hooks
$dwc_ai_image_marker = new DWC_AI_Image_Marker(); register_activation_hook(__FILE__, 'dwc_ai_marker_activate'); register_deactivation_hook(__FILE__, 'dwc_ai_marker_deactivate'); function dwc_ai_marker_activate() { if (!get_option('dwc_ai_marker_settings')) { update_option('dwc_ai_marker_settings', array( 'badge_text' => 'KI-generiert', 'position' => 'top-left' )); } } function dwc_ai_marker_deactivate() { // Hier können Deaktivierungsroutinen hinzugefügt werden }
Plugin-Instanziierung:
- Erstellt eine Instanz der Hauptklasse
DWC_AI_Image_Marker
.
Aktivierungshook:
dwc_ai_marker_activate
:- Wird bei der Plugin-Aktivierung ausgeführt.
- Setzt Standardeinstellungen, falls noch keine vorhanden sind.
- Initialisiert die Plugin-Optionen mit Standardwerten für den Badge-Text und die Position.
Deaktivierungshook:
dwc_ai_marker_deactivate
:- Wird bei der Plugin-Deaktivierung ausgeführt.
- Aktuell leer, bietet aber Raum für zukünftige Deaktivierungsroutinen.
- Könnte genutzt werden, um temporäre Daten zu bereinigen oder Einstellungen zurückzusetzen.
Zusammenfassung
Das DWC AI Image Marker Plugin bietet eine umfassende Lösung zur Kennzeichnung und Verwaltung von KI-generierten Bildern in WordPress. Es integriert sich nahtlos in die WordPress-Medienbibliothek und den Gutenberg-Editor sowie GenerateBlocks.
Hauptfunktionen:
- Erweiterung der Medienbibliothek um KI-Bildkennzeichnung
- Anpassbare Badge-Darstellung im Frontend
- Bulk-Aktionen zur effizienten Verwaltung von KI-Bildern
- Kompatibilität mit Standard-WordPress-Bildblöcken und GenerateBlocks
- Flexible Einstellungsmöglichkeiten für Administratoren
Das Plugin nutzt WordPress-Hooks und -Filter extensiv, um seine Funktionalität zu integrieren, ohne den Core-Code zu modifizieren. Es verwendet DOM-Manipulation zur dynamischen Anpassung von Bildblöcken und bietet eine benutzerfreundliche Schnittstelle zur Verwaltung von KI-generierten Bildern.
Die Struktur des Plugins folgt bewährten WordPress-Entwicklungspraktiken, einschließlich der Verwendung von Klassen zur Kapselung der Funktionalität, der Implementierung von Sicherheitsüberprüfungen und der Bereitstellung von Aktivierungs- und Deaktivierungshooks für eine saubere Installation und Entfernung.
Entwickler können das Plugin leicht erweitern oder anpassen, indem sie zusätzliche Methoden zur Hauptklasse hinzufügen oder die bestehenden Filter und Aktionen nutzen.