Möchtest du lernen, wie Enclosing Shortcodes in WordPress funktionieren und wie sie sich einsetzen lassen, um das Design und die Funktionalität einer Website zu erweitern? In diesem Artikel wird erklärt, was Enclosing Shortcodes sind und wie sie praktisch genutzt werden können.
Was ist ein Enclosing Shortcode?
Shortcodes in WordPress sind kleine Code-Snippets, die innerhalb von Beiträgen oder Seiten eingefügt werden, um bestimmte Funktionen auszuführen. Sie werden in eckigen Klammern […] geschrieben und lassen sich direkt in den Editor einfügen. Viele Plugin-Entwickler nutzen Shortcodes, um Funktionen in WordPress bereitzustellen, die Nutzer anschließend bequem in Beiträge oder Seiten integrieren können – beispielsweise Bildergalerien, Formulare, Videos oder andere Inhalte.
Ein Enclosing Shortcode besitzt im Gegensatz zu einfachen Inline-Shortcodes sowohl ein Start-Tag als auch ein End-Tag. Er umschließt also beliebige Inhalte, die zwischen den beiden Tags stehen. Das Wort „enclosing“ bedeutet „umschließend“ und beschreibt damit sehr genau die Funktionsweise.
Der Inhalt zwischen Start- und End-Tag wird beim Rendern auf eine bestimmte Weise ausgegeben oder formatiert. Ein einfaches Beispiel wäre ein Shortcode wie:
[gallery] Inhalt der Galerie [/gallery]Der Text oder die Elemente zwischen den beiden Tags werden dann als Galerie dargestellt.
Wie erstelle ich einen Enclosing Shortcode in WordPress?
Um einen Enclosing Shortcode zu erstellen, wird zunächst in der functions.php des Themes oder Child-Themes ein sogenannter Shortcode-Handler definiert. Dieser Handler ist eine Funktion, die WordPress aufruft, sobald der entsprechende Shortcode im Inhalt gefunden wird. Der Shortcode-Handler verarbeitet die Werte, generiert den gewünschten HTML-Code und gibt das Ergebnis zurück.
Hier ist ein Beispiel für einen Enclosing Shortcode namens „anmeldung“:
1. Die functions.php-Datei des Themes oder Child-Themes in einem Code- oder Text-Editor öffnen.
2. Den folgenden Code am Ende der Datei hinzufügen:
function anmeldung_shortcode( $atts, $content = null ) {
return '<div class="anmeldung">' . $content . '</div>';
}
add_shortcode( 'anmeldung', 'anmeldung_shortcode' );3. Die geänderte Datei speichern und in den Theme-Ordner hochladen.
4. Der Shortcode kann nun wie folgt eingesetzt werden:
[anmeldung]Hier geht es direkt zur Anmeldung[/anmeldung]
Der Inhalt zwischen den Shortcode-Tags wird dann automatisch in einen <div>-Container mit der CSS-Klasse “anmeldung” eingefügt. Innerhalb des Textes kann wie gewohnt auch ein Link mit platziert werden.
5. Über einen CSS-Code in der style-Datei des Themes lässt nun noch die Darstellung im Browser anpassen. Hier ist ein einfaches Beispiel, um den Hintergrund der Ausgabe auf Blau zu setzen und den Text auf Weiß zu ändern:
.anmeldung {
background-color: blue;
color: white;
padding: 10px;
border-radius: 5px;
}6. Die CSS-Klasse „anmeldung“ kann in der PHP-Funktion beliebig ersetzt werden, um eigene Stile oder Varianten zu definieren.
Wann sind Enclosing Shortcodes sinnvoll?
Die Enclosing-Shortcode-Funktion eignet sich immer dann, wenn beliebiger Inhalt „umschlossen“ und speziell formatiert ausgegeben werden soll. Für statische Elemente – wie einen unveränderlichen Button – kann alternativ auch ein einfacher Button-Shortcode verwendet werden. Insgesamt ermöglichen Shortcodes eine flexible und einfache Anpassung einer WordPress-Website, ohne Änderungen am Editor oder Theme vornehmen zu müssen.