5
(1)

WordPress KI-Bilder kennzeichnen: Automatische Markierung leicht gemacht

Erstellt / aktualisiert

wichtige Informationen...

Affiliate - Offenlegung

Auf meiner Seite verwende ich sogenannte Affiliate-Links, diese sind mit einem gekennzeichnet, damit du diese auch direkt erkennen kannst.
Sobald du über so einen Link das Produkt kaufen würdest, erhalte ich möglicherweise eine Provision vom jeweiligen Anbieter. Außerdem entstehen für Dich natürlich keine zusätzlichen Kosten!
Mich unterstützt du damit aber enorm und trägst dazu bei, dass es auch in Zukunft weitere Guides und Vorstellungen von mir hier geben wird.

Ich empfehle nur Tools / PlugIns / Anbieter / Produkte, hinter denen ich auch wirklich stehe, bzw. bei denen ich auch einen Mehrwert sehe.

DarkWolfCave.de ist Teilnehmer des Amazon-Partnerprogramms, 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.


ACHTUNG! Bitte lesen!

Du benutzt das hier Gezeigte natürlich, wie immer, auf eigenes Risiko!
Ich habe alles selbst durchgeführt und mir mein System nicht zerschossen oder sonst irgendwelche negativen Auffälligkeiten bemerkt.

Aber dennoch… Backups sind immer gut….
Für WordPress-Backups am besten mit UpdraftPlus

Ich übernehme keine Haftung für Schäden jeglicher Art am System, der Hardware oder der Katze…. :-P


DarkWolfCave.de

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.
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.

DarkWolfCave.de

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:

  1. “Deepfakes” – Bilder, die realen Personen oder Orten täuschend ähnlich sehen
  2. Inhalte zu Themen von öffentlichem Interesse wie Politik, Klima oder Gesundheit
  3. 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

  1. Download
  • Lade die ZIP-Datei aus meinem Github (darkwolfcave) herunter
  • Speichere sie lokal auf deinem Computer (nicht entpacken)
  1. WordPress-Installation
  • Navigiere zu: WordPress Dashboard > Plugins > Installieren
  • Wähle “Plugin hochladen”
  • Wähle die heruntergeladene ZIP-Datei
  • Klicke auf “Jetzt installieren”
  1. Aktivierung
  • Klicke auf “Plugin aktivieren”
  • Warte die Bestätigung ab
  • Fertig!

Grundeinstellungen & Konfiguration

DarkWolfCave.de - WordPress KI-Bilder kennzeichnen

Plugin-Einstellungen anpassen

  1. Zugriff auf Einstellungen
  • WordPress Dashboard > Einstellungen > AI Image Marker
  1. Badge-Konfiguration
  • Text festlegen: Standard ist “KI-generiert”
  • Position wählen:
    • Oben links (Standard)
    • Oben rechts
    • Unten links
    • Unten rechts
  1. Design anpassen (aktuell nur über CSS)
  • Hintergrundfarbe
  • Schriftart
  • Transparenz
  • Randabstände
  1. Einstellungen speichern
  • “Änderungen speichern” klicken

KI-Bilder professionell markieren

DarkWolfCave.de - WordPress KI-Bilder kennzeichnen - Überblick

Bilder markieren

Das Plugin zum WordPress KI-Bilder kennzeichnen bietet zwei Möglichkeiten, Bilder als KI-generiert zu markieren:

Einzelne Bilder markieren:

  1. Öffne die Medienbibliothek
  2. Klicke auf das gewünschte Bild
  3. Aktiviere die Checkbox “KI-generiertes Bild”
  4. die Änderungen werden direkt gespeichert

Mehrere Bilder gleichzeitig markieren:

  1. Wechsel in der Medienbibliothek zur Listenansicht
  2. Wähle die zu markierenden Bilder aus
  3. Öffne das Dropdown-Menü “Mehrere Dateien bearbeiten”
  4. Wähle “Als KI-generiert markieren”
  5. 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:

  1. Zusätzliche Spalte: 🤖-Icon für KI-Bilder, “-” für normale Bilder
  2. Massenaktionen: KI-Status für mehrere Bilder gleichzeitig setzen oder entfernen
  3. Einzelbild-Bearbeitung: Checkbox im Medien-Dialog zum schnellen Umschalten des KI-Status
  4. Filterung: Filterung nach KI- und normalen Bildern

Kompatibilität

Das Plugin wurde intensiv getestet mit:

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 - Frequently Asked Questions DarkWolfCave

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

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:

  1. Minimale DOM-Manipulationen
  2. Effiziente CSS-Selektoren
  3. Caching von Optionsabfragen
  4. 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

  1. Plugin in WordPress hochladen
  2. Plugin aktivieren
  3. 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:

  1. Badge-Anzeige bei verschachtelten Blocks prüfen
  2. CSS-Spezifität bei Theme-Konflikten beachten
  3. 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.

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.

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:

  1. Erweiterung der Medienbibliothek um KI-Bildkennzeichnung
  2. Anpassbare Badge-Darstellung im Frontend
  3. Bulk-Aktionen zur effizienten Verwaltung von KI-Bildern
  4. Kompatibilität mit Standard-WordPress-Bildblöcken und GenerateBlocks
  5. 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.

Avatar-Foto

Ich bin ein 1977 geborener Technik-Nerd. Mein erster Gefährte in der digitalen Welt war ein C64, der den Grundstein für meine Leidenschaft für Technologie legte. So wurde mein Hobby zum Beruf, und ich begann eine Ausbildung zum IT-Systemelektroniker. Selbst in meiner knappen Freizeit widme ich mich weiterhin meiner Leidenschaft fürs Gaming, verschiedene Programmiersprachen und andere IT-bezogene Themen. Ansonsten mag ich Hunde und bin fasziniert von Wölfen!

Gefällt dir der Beitrag?
Hinterlasse gerne ein paar Sterne!

Wie hilfreich war dieser Beitrag für Dich?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 5 / 5. Anzahl Bewertungen: 1

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Es tut uns leid, dass der Beitrag für dich nicht hilfreich war!

Lasse uns diesen Beitrag verbessern!

Wie können wir diesen Beitrag verbessern?

Abonnieren
Benachrichtige mich bei
guest
0 Kommentare
Neueste
Älteste
Inline Feedbacks
Alle Kommentare anzeigen

GitHub - Sourcecode

Den gesamten und aktuellen Sourcecode meiner Scripte, Snippets und Tools findest du ab jetzt auch in meinem GitHub Account!
Inhalt