Aufgabe 4 – Eigenen Shortcode entwickeln

Kreativ / Transfer

Schwierigkeitsgrad: Mittel  |  Dauer: ca. 3–5 Std.

Szenario

Ein Redakteur möchte auf verschiedenen Seiten eine „Call-to-Action“-Box einbetten, ohne HTML schreiben zu müssen. Du entwickelst einen flexiblen Shortcode [cta_box], der Attribute akzeptiert und sauber gerenderte HTML-Ausgabe liefert.

Lernziele

• Shortcodes mit add_shortcode() registrieren
• Attribute mit shortcode_atts() und Standardwerten verarbeiten
• Ausgabe korrekt escapen (esc_html(), esc_url(), esc_attr())
• Enclosing Shortcodes (mit Content zwischen Tags) verstehen

Aufgabenstellung

1. Analyse: Recherchiere den Unterschied zwischen self-closing und enclosing Shortcodes. Nenne je ein Beispiel aus dem WordPress-Core.
2. Implementierung: Erstelle ein Plugin mit einem Shortcode [cta_box title="..." button_text="..." url="..."], das eine styled Box ausgibt. Der Shortcode soll optional auch Fliesstext (enclosing) unterstützen.
3. Sicherheit: Stelle sicher, dass alle Attribute korrekt escaped werden. Erkläre schriftlich (~150 Wörter), warum das wichtig ist.
4. Erweiterung: Füge einen zweiten Shortcode [recent_posts count="5"] hinzu, der die neuesten Beiträge als Liste ausgibt (WP_Query).

Starter-Code

<?php
/**
 * Plugin Name: CTA Box Shortcode
 * Description: Shortcode fuer Call-to-Action Boxen
 * Version: 1.0
 * Author: Dein Name
 */

// Direktzugriff verhindern
if ( ! defined( 'ABSPATH' ) ) exit;

function cta_box_shortcode( $atts, $content = null ) {
    $atts = shortcode_atts( [
        'title'       => 'Mehr erfahren',
        'button_text' => 'Jetzt klicken',
        'url'         => '#',
        'color'       => 'blue',
    ], $atts, 'cta_box' );

    // TODO: HTML-Ausgabe mit esc_html(), esc_url(), esc_attr() aufbauen
    // TODO: $content einbinden falls vorhanden (enclosing)
    $output = '';

    return $output;
}
add_shortcode( 'cta_box', 'cta_box_shortcode' );

Hinweise

Shortcode-Callbacks müssen immer returnen, niemals echo verwenden – sonst erscheint der Output an der falschen Stelle der Seite.

Lernziel-Tags

add_shortcode()shortcode_atts()esc_html/url/attrWP_QueryEnclosing Shortcode

Abgabe: Plugin als .zip + Reflexion zur Sicherheit (PDF oder .md) + Screenshot der Ausgabe im Frontend