Möchtest du lernen, wie du in WordPress Enclosing Shortcodes effektiv nutzen kannst? In diesem Artikel erkläre ich dir, was Enclosing Shortcodes sind und wie du sie verwenden kannst, um das Design deiner Webseite zu verbessern und die Funktionalität deiner Inhalte zu erweitern.
Was ist ein Enclosing Shortcode?
Shortcodes in WordPress sind kleine Code-Schnipsel, die innerhalb von Beiträgen oder Seiten eingefügt werden können, um bestimmte Funktionen auszuführen. Sie werden in eckigen Klammern [] geschrieben und können einfach in den Editor eingefügt werden. Shortcodes können alles Mögliche tun, von der Anzeige von Bildergalerien bis hin zur Integration von Videos und Audio-Dateien. Gerne werden sie von Plugin-Entwicklern genutzt, um ihre eigenen Funktionen in den WordPress-Editor zu integrieren und Nutzern eine einfache Möglichkeit zu geben, diese Funktionen dann in ihre Beiträge oder Seiten einzufügen.
Ein Enclosing Shortcode in WordPress ist ein Shortcode, der eine Start- und eine End-Tag-Komponente hat. Im Gegensatz zu einem Inline-Shortcode, der nur einen einzelnen Wert zurückgibt, wird ein Enclosing Shortcode verwendet, um umfangreichere Inhalte zu umschließen. Enclosing bedeutet auf Deutsch „umschließend“. In Bezug auf WordPress Shortcodes bezieht sich der Begriff also darauf, dass der Shortcode einen Inhalt umschließt.
Wenn der Enclosing Shortcode verwendet wird, wird der Inhalt zwischen dem Start- und dem End-Tag in der Regel auf eine bestimmte Weise formatiert oder ausgegeben. Ein einfaches Beispiel für einen Enclosing Shortcode in WordPress wäre [ gallery ] Inhalt der Galerie [ / gallery ] , wobei der Inhalt der Galerie zwischen den beiden Tags eingefügt und auf der Seite als Galerie angezeigt wird.
Wie erstelle ich einen Enclosing Shortcode in WordPress?
Um einen Enclosing Shortcode in WordPress zu erstellen, muss man zuerst in der functions.php-Datei des Themes oder Child-Themes einen sogenannten „Shortcode-Handler“ erstellen. Der Shortcode-Handler in WordPress ist eine Funktion, die den Shortcode-Tag erkennt und verarbeitet, um den entsprechenden Inhalt zu generieren und zurückzugeben. Der Shortcode-Handler wird dazu in der functions.php-Datei des WordPress-Themas oder in einem Plugin definiert und registriert. Wenn der Shortcode-Tag dann in einem Beitrag oder einer Seite verwendet wird, ruft WordPress den entsprechenden Code auf und gibt den generierten Inhalt zurück, um ihn anzuzeigen.
Hier ist ein Beispiel, wie man einen Enclosing Shortcode mit dem Namen „anmeldung“ erstellen kann:
1. Öffne die functions.php-Datei des Themes oder Child-Themes in einem Code-Editor oder Text-Editor.
2. Füge den folgenden Code am Ende der Datei hinzu
function anmeldung_shortcode( $atts, $content = null ) {
return '<div class="anmeldung">' . $content . '</div>';
}
add_shortcode( 'anmeldung', 'anmeldung_shortcode' );3. Speichere die Datei und lade sie auf den Server in den Theme-Ordner hoch.
4. Verwende den Shortcode [anmeldung]Hier geht es direkt zur Anmeldung[/anmeldung] auf einer WordPress-Seite oder einem Beitrag, um den Inhalt zwischen den Shortcode-Tags in einem <div>-Container mit der CSS-Klasse „anmeldung“ zu umschließen. In den Text kannst du im WordPress-Editor auf einen Link einfügen und so direkt auf eine beliebige Seite verweisen.
5. Über einen CSS-Code in der style-Datei des Themes lässt sich der Shortcode nun noch stylen. Hier ist ein Beispiel, um den Hintergrund des Shortcodes 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“ in der Funktion anmeldung_shortcode kann man natürlich nach Belieben abändern, um seine eigenen CSS-Stile zu verwenden.
Die Enclosing Shortcode-Funktion eignet sich also prima, wenn man beliebigen Content mit ausgeben will. Möchte man dagegen z.B. einen festen Button verwenden, der sich nie verändert, kann man das auch über einen Button Shortcode in WordPress ausgeben. Mit den Shortcodes kann man Websites ganz einfach und flexibel individuell anpassen.