Die Ultimative Anleitung für WordPress Shortcodes (mit Beispielen zum Erstellen Eigener)

WordPress-Shortcodes sind ein mächtiges Feature, um coole Sachen mit wenig Aufwand zu machen. Man kann so ziemlich alles damit machen. Mit Shortcodes ist das Einbetten interaktiver Elemente oder das Erstellen komplexer Seitenlayouts so einfach wie das Einfügen einer einzigen Zeile Code.

Wenn du eine Galerie hinzufügen möchtest, musst du einfach den folgenden Code eingeben:

[gallery ids="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"]

Es wird eine Galerie mit den genannten Bild-IDs ausgegeben. Sie wird 4 Spalten haben und ihre maximale Größe wird ‚mittel‘ sein (wie von WordPress definiert).

Es gibt keine Notwendigkeit für hässlichen HTML-Code.

Durch Shortcodes entfällt die Notwendigkeit komplizierter Skripte. Selbst wenn du wenig bis gar keine Programmierkenntnisse hast, kannst du mit ihrer Hilfe mühelos dynamische Inhalte hinzufügen.

Sie sind bei WordPress-Entwicklern sehr beliebt, da sie bei der Automatisierung der Inhalts- und Designerstellung immens hilfreich sind. Shortcodes sind für WordPress-Entwickler das, was Makros für Datenanalysten sind, oder Tastaturkürzel für professionelle Grafikdesigner.

In diesem Handbuch erfährt man alles, was es über Shortcodes zu wissen gibt. Du erfährst, wie du mit der Shortcode-API arbeiten kannst, indem du deine eigenen Shortcodes erstellst. Zum Schluss besprechen wir die Zukunft der Shortcodes und wie sie in den neuen Block-Editor von WordPress passen.

Aufgeregt? Fangen wir an!

Was ist ein Shortcode?

Kurz gesagt, Shortcode = Abkürzung + Code.

Typischerweise verwenden Shortcodes eckige Klammern [], um zu definieren, wie sie verwendet werden. Jeder Shortcode führt eine bestimmte Funktion in einer Seite aus. Es kann so einfach sein wie die Formatierung des Inhalts oder so komplex wie die Definition der gesamten Website-Struktur.

Du kannst Shortcodes beispielsweise zum Einbetten von Schiebereglern, Formularen oder Preistabellen verwenden. Du kannst sie sogar verwenden, um wiederverwendbare Vorlagen für das Seitendesign zu erstellen.

Eine kurze Geschichte über Shortcodes

Shortcodes wurden zuerst durch eine Online-Forum-Software namens Ultimate Bulletin Board (UBB) populär gemacht. Im Jahr 1998 führten sie BBCode (Bulletin Board Code) ein, eine Sammlung von einfach zu verwendenden Tags, mit denen Benutzer ihre Beiträge einfach formatieren können.

Als eine leichtgewichtige Markup-Sprache arbeitet BBCode nach den gleichen Prinzipien wie HTML, nur ist es viel einfacher.

Die Verwendung von vordefinierten Tags ist auch viel sicherer, da Benutzer keinen HTML-Code einfügen und keine Sicherheitslücken einführen können. Ein Benutzer mit böswilligen Absichten könnte zum Beispiel den <script>-Tag verwenden, um JavaScript-Code auszuführen und die Funktionalität der Website zu unterbrechen.

Bald darauf fügten andere Online-Forum-Software wie phpBB, XMB Forum und vBulletin BBCode-Funktionalität in ihren Message-Boards hinzu.

Mit Hilfe von Shortcodes hatten die Admins eine größere Kontrolle darüber, was ihre Benutzer tun können und was nicht. Außerdem erlaubten sie den Benutzern, ihre Inhalte durch einfache Tags zu formatieren.

Aus den gleichen Sicherheitsgründen verhindert WordPress, dass PHP-Code innerhalb der Inhalte der Website ausgeführt wird. Um diese Einschränkung zu überwinden, führte WordPress 2.5 die Shortcodes-Funktionalität 2008 mit der Veröffentlichung der Shortcode-API ein. Sie hat sich als eine der am meisten genutzten Funktionen von vielen WordPress-Plugins und Theme-Entwicklern erwiesen.

Was sind WordPress Shortcodes?

WordPress Shortcodes sind eckige Klammern ([ ]), die sich auf magische Weise in etwas Faszinierendes im Frontend verwandeln. Sie bieten dem Benutzer eine einfache Möglichkeit, komplizierte Inhalte zu erstellen und zu ändern, ohne sich über komplexes HTML oder eingebettete Codes Gedanken machen zu müssen.

Die 2 Arten von Shortcodes

Es gibt hauptsächlich zwei Arten von Shortcodes in WordPress.

• Selbstschließende Shortcodes: Diese brauchen kein Schließ-Tag.

Beispiel: Der Galerie Shortcode benötigt keinen schließenden Tag. Wir fügen alles, was er braucht, mit verschiedenen Attributen hinzu.

• Einschließende Shortcodes: Diese brauchen einen abschließenden Tag. Einschließende Shortcodes manipulieren generell den Inhalt zwischen dem öffnenden und schließenden Tag.

Beispiel: Der Caption Shortcode wird verwendet, um eine Beschriftung um einen beliebigen Inhalt zu wickeln. Er wird hauptsächlich verwendet, um eine Beschriftung zu Bildern hinzuzufügen, aber er funktioniert mit jedem HTML-Element.

Einige Shortcodes funktionieren mit oder ohne Attribute. Es hängt davon ab, wie sie definiert sind.

Die Standard WordPress Shortcodes sind

WordPress kommt mit 6 Standard-Shortcodes:

• audio: Bette Audiodateien auf deiner Website ein. Es beinhaltet einfache Wiedergabesteuerungen wie Play & Pause.
• caption: Wickel damit Beschriftungen um deinen Inhalt. Es wird meistens verwendet, um Bildunterschriften hinzuzufügen, aber du kannst es für jedes HTML-Element verwenden.
• embed : Erweiter die standardmäßige oEmbed-Funktion. Mit diesem Shortcode kannst du verschiedene Attribute für deine Einbettungen festlegen, wie z.B. die maximalen Abmessungen.
• gallery : Füge eine einfache Bildergalerie auf deiner Seite ein. Du kannst Attribute verwenden, um zu definieren, welche Bilder verwendet werden und um das Aussehen der Galerie anzupassen.
• playlists: Zeige eine Sammlung von Audio- oder Videodateien mit diesem selbstbeschreibenden Shortcode an. Du kannst ihm mit seinem style-Attribut einen coolen ‚dunklen‘ Modus geben.
• video: Bette eine Videodatei ein und spiele sie mit einem einfachen Videoplayer ab. Dieser Shortcode unterstützt das Einbetten von Videos mit diesen Formaten: mp4, webm, m4v, webm, ogv, wmv, flv.

Für weitere Details darüber, wie du die Standard Shortcodes verwenden kannst und welche Attribute sie unterstützen, kannst du in den verlinkten Codex-Dokumenten nachlesen.

Wie man WordPress Shortcodes Verwendet

Die Verwendung von Shortcodes in WordPress ist ein unkomplizierter Prozess. Aber es hängt davon ab, wo du sie auf deiner Website hinzufügen möchtest. Stelle sicher, dass du die Dokumentation zu den Shortcodes liest, um zu verstehen, wie sie funktionieren. Lerne die unterstützten Attribute kennen, damit du genau das bekommst, was du willst.

Verwendung von WordPress Shortcodes in Pages und Posts

Gehe zunächst in den Seiten-/Post-Editor, in dem du den Shortcode einfügen möchtest.

Wenn du den Gutenberg-Editor verwendest, kannst du den Shortcode-Tag im eigenständigen Shortcodes-Block hinzufügen. Wir finden ihn in der Widgets-Sektion.

Benutzt du immer noch den Classic Editor (oder das Plugin)? Du kannst deine Shortcode-Tags auf klassische Weise eingeben. Einige wenige Shortcodes haben sogar einen Knopf im Editor-Bildschirm, um sie einfach einzufügen.

Verwendung von WordPress-Shortcodes in Sidebar-Widgets

In Sidebar-Widgets können auch Shortcodes eingefügt werden. Um sie hinzuzufügen, gehe zu Darstellung -> Widgets und füge ein Text Widget in den Abschnitt ein, in dem du die Shortcodes hinzufügen möchtest.

Füge den Shortcode in das Text-Widget ein und speicher ihn. Du kannst das Frontend deiner Seite besuchen und die Ausgabe des Shortcode in deiner Sidebar sehen.

Hinweis: WordPress 4.8 und niedrigere Versionen unterstützen keine Shortcodes in Sidebar-Widgets. Lies die Widget-Verbesserungen in WordPress 4.9 Update für mehr.

Verwendung von WordPress Shortcodes in Header und Footer

WordPress Shortcodes sind im Allgemeinen für Seiten, Beiträge und Widgets gedacht. Aber du hast eine einfache Möglichkeit, Shortcodes überall auf deiner Website einzufügen.

Nehmen wir an, du möchtest einen Call-To-Action-Button in deinem Footer oder in allen deinen Beiträgen vor dem Kommentarbereich einfügen. Die do_shortcode() Callback-Funktion ist hier sehr nützlich.

Du musst den folgenden Code in die header.php, footer.php oder eine der Vorlagendateien deines Themes einfügen:

<?php echo do_shortcode("[name_of_your_shortcode]"); ?>

Dadurch wird der Shortcode an der Stelle ausgegeben, an der du den Code eingegeben hast.

Du musst die eckigen Klammern zwischen den Anführungszeichen einfügen, um den Shortcode wiederzugeben. Nur den Namen einzufügen, wird nicht funktionieren.

Ebenso kannst Du die do_shortcode() Callback-Funktion verwenden, um Shortcodes überall in WordPress zu aktivieren, wie z.B. in der Kommentar-Sektion.

Eine kurze Einführung in die Shortcode-API

Die WordPress Shortcode API definiert, wie du Shortcodes verwenden kannst, um die Funktionalität deiner Website anzupassen und zu erweitern. Sie ermöglicht es Entwicklern, einzigartige Inhalte zu erstellen (z.B. Formulare, Karussells, Schieberegler, etc.), die die Nutzer durch Einfügen des entsprechenden Shortcode in ihre Seiten einfügen können.

Mit Hilfe von Shortcodes lässt sich nahezu jede erdenkliche Funktion in deine Website einfügen.

Die API unterstützt sowohl selbstschließende als auch umschließende Shortcodes. Sie handhabt das ganze knifflige Parsen und enthält Hilfsfunktionen zum Setzen und Holen von Standardattributen.

Dank der API kannst du dich direkt in die Entwicklung und Anpassung von Shortcodes stürzen, anstatt kostbare Zeit mit der Definition von regulären Ausdrücken für jeden Shortcode zu verschwenden.

Understanding the Basics of Shortcode API

Jedes Mal, wenn du eine Seite oder einen Beitrag in WordPress öffnest, wird nach registrierten Shortcodes gesucht, während der Inhalt der Website verarbeitet wird.

Wird ein registrierter Shortcode gefunden, übernimmt die Shortcode-API und gibt die Ausgabe des/der Shortcode(s) zurück. Der zurückgegebene Output-String ersetzt den Shortcode-Tag an der Stelle, an der er hinzugefügt wurde.

Du registrierst einen Shortcode in WordPress mit der Funktion add_shortcode(). So wird es gemacht:

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

• • • shortcode_name: Der Tag, nach dem WordPress beim Parsen des Post-Inhalts sucht. Die Shortcode API empfiehlt, nur Kleinbuchstaben, Zahlen und Unterstriche zu verwenden, um den Wert zu definieren (vermeide Bindestriche).
    • shortcode_handler_function: Die Callback-Funktion, die ausgeführt wird, nachdem WordPress das Vorhandensein eines registrierten Shortcodes bestätigt hat.

Die Shortcode-Handler-Funktion ist als solche definiert:

function shortcode_handler_function( $atts, $content, $tag ){ }

• • • $atts: Ein assoziatives Array von Attributen (d.h. ein Array von Schlüssel-Werte-Paaren). Wenn du keine Attribute definierst, wird es standardmäßig ein leerer String sein.
    • $content: Der eingeschlossene Inhalt, wenn du einen umschließenden Shortcode definierst. Es liegt in der Verantwortung der Handler-Funktion, sicherzustellen, dass der Wert von $content in der Ausgabe zurückgegeben wird.
    • $tag: Der Wert des Shortcode-Tags (im obigen Beispiel shortcode_name). Wenn zwei oder mehr Shortcodes die gleiche Callback-Funktion (die gültig ist) teilen, hilft der Wert des $-Tags bei der Bestimmung, welcher Shortcode die Handler-Funktion ausgelöst hat.

Die API parsed das Tag des Shortcodes, die Attribute und den eingeschlossenen Inhalt (falls vorhanden) und übergeht die Werte an die Handler-Funktion, die sie verarbeitet und einen Ausgabestring zurückgibt.

Dieser Ausgabestring ersetzt das Shortcode-Makro auf dem Frontend der Webseite. Was man im Browser schließlich sieht, ist diese Ausgabe.

Wo kann man die Benutzerdefinierten Shortcode-Skripte Hinzufügen?

Du kannst deine eigenen Shortcode-Skripte der functions.php-Datei des Themes hinzufügen oder sie in ein Plugin einbinden.

Wenn du es zu einer Theme-Datei hinzufügst, kannst du die add_shortcode() Funktion so wie sie ist ausführen.

Aber wenn du es zu einem Plugin hinzufügst, empfehle ich dir, es erst zu initialisieren, nachdem WordPress komplett geladen wurde. Du kannst das sicherstellen, indem du die add_shortcode() Funktion in eine andere Funktion einbindest. Dies wird als Wrapper-Funktion bezeichnet:

function shortcodes_init(){
 add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');

Die add_action() Funktion hängt die shortcodes_init Funktion ein, um erst zu feuern, nachdem WordPress das Laden beendet hat (es wird der ‚init‘ Hook genannt).

Wie man einen Benutzerdefinierten Shortcode in WordPress Erstellt (Anfänger-Level)

Nachdem wir nun die Grundlagen besprochen haben, ist es Zeit, einen benutzerdefinierten Shortcode zu erstellen.

Um die unten aufgeführten Schritte zu befolgen, musst du mit dem PHP-Code vertraut sein und deine WordPress-Theme-Dateien bearbeiten können. Wenn du mit dem Tutorial fertig bist, hast du deinen ersten benutzerdefinierten WordPress Shortcode bereit zum Starten!

Wir beginnen mit dem einfachsten Shortcode und gehen dann zu komplexeren. Genieße die kurzen Meilensteine auf dem Weg zur Beherrschung von Shortcodes!

Beispiel 1: Shortcode mit [current_year]

Lasst uns einen Shortcode namens [current_year] erstellen, der das aktuelle Jahr auf eurer Website ausgibt.

Dieser Shortcode ist hilfreich, wenn du Inhalte zu deiner Website hinzufügst, die jedes Jahr aktualisiert werden müssen. Zum Beispiel, wenn du einen Copyright-Hinweis in die Fußzeile deiner Website einfügen möchtest.

Ich werde ein Barebones-Plugin verwenden, um meine Shortcode-Funktionen hinzuzufügen. Du kannst es in die functions.php-Datei deines Themes einfügen und erhältst die gleichen Ergebnisse, aber ich empfehle es nicht. Zum Testen und Lernen ist es aber in Ordnung!

Fangen wir mit der Erstellung eines Plugins an. Erstelle einen neuen Ordner in deinem /wp-content/plugins/ Verzeichnis.

Ich nenne mein Plugin „Salcodes“, aber du kannst es nennen, wie du willst.

Erstelle im salcodes Plugin-Verzeichnis eine PHP-Datei mit dem gleichen Namen (salcodes.php). Füge dann den folgenden Header in die Datei deines Plugins ein:

<?php

/*
Plugin Name:  Salcodes
Version: 1.0
Description: Output the current year in your WordPress site.
Author: Salman Ravoof
Author URI: https://www.salmanravoof.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salcodes
*/

Dieser einfache Plugin-Header ist für unsere Zwecke gut genug. Du kannst mehr über die Anforderungen an den Plugin-Header im WordPress Codex erfahren. Speicher diese Datei, und gehe dann zu deinem WordPress Dashboard, um das Plugin zu aktivieren.

Nun wollen wir den Shortcode und seine Handler-Funktion registrieren. Dazu füge den folgenden Code in deine Plugin-Datei ein:

/**
 * [current_year] returns the Current Year as a 4-digit string.
 * @return string Current Year
*/

add_shortcode( 'current_year', 'salcodes_year' );
function salcodes_init(){
 function salcodes_year() {
 return getdate()['year'];
 }
}
add_action('init', 'salcodes_init');

/** Always end your PHP files with this closing tag */
?>

• • • Der @return-Tag im PHP-Kommentar definiert die Art der zurückgegebenen Ausgabe. Es folgt eine kurze Beschreibung desselben.
    • current_year ist der Shortcode-Tag oder Name. Dies definiert den selbstschließenden Tag, den du in deinem Inhalt hinzufügen musst, was in diesem Fall [current_year] wäre.
    • salcodes_year ist der Name der Shortcode-Handler-Funktion, die den Ausgabestring zurückgibt. Wir werden diese Callback-Funktion in den nächsten Zeilen definieren. Da wir einen einfachen selbstschließenden Shortcode erstellen, musst du ihm keine Variablenwerte wie $attribute, $content oder $tag übergeben.
    • salcodes_init ist die Wrapper-Funktion, die an ‚init‘ angehängt wird, um sicherzustellen, dass der Shortcode registriert und erst nach dem Laden von WordPress ausgeführt wird. WordPress‘ eingebaute add_action() Funktion macht dies möglich.
    • getdate() ist eine PHP-Funktion, die ein Array mit Datumsinformationen des aktuellen Zeitstempels zurückgibt. Der Jahresschlüssel enthält den Wert des aktuellen Jahres (als 4-stelliger String). Daher gibt getdate()[‚year‘] das aktuelle Jahr zurück. Diese Ausgabe ist genau das, was wir wollen.

Speicher die Plugin-Datei. Nun ist es an der Zeit zu testen, ob der Shortcode wie beabsichtigt funktioniert.

Füge den Shortcode an beliebiger Stelle in deiner Webseite (Seite, Beitrag, Sidebar-Widget, etc.) ein. Ich füge ihn zum Sidebar-Text-Widget meiner Seite hinzu.

Und wie es zu erwarten war, funktioniert er perfekt.

Herzlichen Glückwunsch zum Erreichen des ersten Meilensteins!

Der Shortcode, den du gerade erstellt hast, hat keine $attribute oder $content Variablen, die mit ihm verbunden sind. Du wirst in den folgenden Beispielen lernen, wie man sie benutzt.

Beispiel 2: Shortcode für einen CTA-Button

Lasst uns einen anpassbaren CTA Button Shortcode erstellen. Dieser wird auch selbstschließend sein (sorry $content, du musst bis zum nächsten warten).

Ich möchte, dass die Benutzer in der Lage sind, die Größe und Farbe des CTA-Buttons mit den Shortcode-Attributen anzupassen.

Da die finale Ausgabe ein Button-Element ist, können seine HTML-Attribute wie href, id, class, target & label verwendet werden, um es mit Leichtigkeit anzupassen.

Du kannst die id– und class-Attribute verwenden, um den Button zu stylen, da es sich bei beiden um gängige CSS-Selektoren handelt.

Ich verpacke meine Handler-Funktion hier nicht, damit die Dinge einfach zu erklären sind.

/**
 * [cta_button] returns the HTML code for a CTA Button.
 * @return string Button HTML Code
*/

add_shortcode( 'cta_button', 'salcodes_cta' );

function salcodes_cta( $atts ) {
 $a = shortcode_atts( array(
 'link' => '#',
 'id' => 'salcodes',
 'color' => 'blue',
 'size' => '',
 'label' => 'Button',
 'target' => '_self'
 ), $atts );
 $output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';
 return $output;
}

Wow, hier gibt’s eine Menge auszupacken. Ich werde es dir Zeile für Zeile erklären, damit du verstehst, wie es funktioniert.

• Wir haben die add_shortcode()-Funktion und ihre Funktionsweise im vorigen Abschnitt behandelt.
• shortcode_atts() ist eine WordPress-Funktion, die die Shortcode-Attribute des Benutzers mit bekannten Attributen kombiniert. Sie füllt bei Bedarf Standardwerte aus (die Sie auch selbst einstellen können). Das Ergebnis ist ein Array, das jeden Schlüssel aus den bekannten Attributen enthält, zusammengefügt mit Werten aus benutzerdefinierten Shortcode-Attributen.
• Innerhalb der Shortcode-Handler-Funktion definieren wir eine Variable ($a) und weisen diese dem von shortcode_atts() zurückgegebenen Array zu. Wir weisen den Attributen ihre Standardwerte mit der Syntax zu: ‚attribute‘ => ‚default-value‘. Zum Beispiel setzen wir im obigen Code den Standardwert des Attributs label auf Button mit der Syntax ‚label‘ => ‚Button‘.
• Wir können die Werte für jeden Attribut-Schlüssel mit der PHP-Syntax für Arrays extrahieren: $a[‚attribute‘].
• Die Variable $output speichert den HTML-Code des Button-Elements (<a> Tag mit der Klasse ‚button‘). Es ist der String, der schließlich von der Funktion zurückgegeben wird.

Wenn du den Standardlink als Homepage-URL der Seite setzen möchtest, kannst du die WordPress-Funktion home_url() verwenden.

Lasst uns versuchen, den Shortcode so zu verwenden, wie er ist, ohne definierte Attribute, und sehen, was ausgegeben wird.

Wenn du dich fragst, wofür die doppelten eckigen Klammern stehen ([[cta_button]]), ,man nennt sie „escaping shortcode„. Sie helfen dir, jeden registrierten Shortcode in deiner Seite als normalen Text auszugeben, wie im Bild unten.

Der Benutzer kann die Größe und Farbe des Buttons mit dem Shortcode anpassen. Wir haben bereits ihre Standardwerte in der Handler-Funktion gesetzt, aber wir müssen das Stylesheet registrieren und in die Liste der verfügbaren Ressourcen einreihen. Dieses Stylesheet sollte alle im Shortcode definierten Klassen haben.

Du kannst diese Klassen auch im globalen Stylesheet deines Themes setzen, aber es ist empfehlenswert, sie separat zu laden. Dadurch wird sichergestellt, dass auch bei Änderungen oder Updates deines WordPress-Themes diese Klassen zusammen mit dem Shortcode geladen werden.

/** Enqueuing the Stylesheet for the CTA Button */

function salcodes_enqueue_scripts() {
 global $post;
 if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'cta_button') ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

Die Funktion salcodes_enqueue_scripts() definiert die globale Variable $post, und bestätigt dann zwei Bedingungen über:

• is_a(): prüft, ob $post eine Instanz des WP_Post-Objektes ist. Sie bezieht sich auf alle Post-Typen in WordPress.
• has_shortcode(): prüft, ob der Post-Inhalt den Shortcode [cta_button] enthält.

Wenn beide Bedingungen erfüllt sind, registriert die Funktion das im CSS-Ordner enthaltene Stylesheet style.css und reiht es in eine Warteschlange ein. Die Funktion plugin_dir_url( $file ) macht es einfach, die URL des Verzeichnisses des Plugins zu ermitteln.

Den CSS-Code zeige ich hier nicht, aber du kannst ihn im Quellcode finden, der am Ende dieses Abschnitts verlinkt ist.

Testen wir schließlich den Shortcode [cta_button], indem wir ihn zum Inhalt des Beitrags hinzufügen:

Das Bild unten zeigt, wie der CTA-Button auf dem Frontend aussieht:

Nachdem du nun gelernt hast, wie man benutzerdefinierte Attribute definiert und Stile einbindet, kannst du verschiedene andere Funktionen zu deinem CTA Button Shortcode hinzufügen. Zum Beispiel kannst du deinen Benutzern die Möglichkeit geben, Animationen, Hover-Effekte und verschiedene andere Button-Stile hinzuzufügen.

Beispiel 3: Shortcode mit $content

Für unser letztes Beispiel bauen wir einen umschließenden Shortcode namens [boxed], der jeden Inhalt zwischen seinen Tags in einer Box mit farbigen Titeln ausgibt.

Beginnen wir damit, den Shortcode zu registrieren und seine Handler-Funktion zu definieren.

/**
 * [boxed] returns the HTML code for a content box with colored titles.
 * @return string HTML code for boxed content
*/

add_shortcode( 'boxed', 'salcodes_boxed' );

function salcodes_boxed( $atts, $content = null, $tag = '' ) {
 $a = shortcode_atts( array(
 'title' => 'Title',
 'title_color' => 'white',
 'color' => 'blue',
 ), $atts );
 
 $output = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';
 
 return $output;
}

• • • $content = null : Damit wird der Shortcode als umschließender Typ registriert. Du kannst die Variable $content innerhalb deiner Handler-Funktion verwenden, um deine Ausgabe nach Belieben zu ändern.
    • $tag = „ : dies definiert die Variable $tag des Shortcode. Es ist in diesem Beispiel nicht notwendig, aber es ist eine gute Praxis, sie einzubinden.

In diesem Beispiel modifizieren wir den Inhalt mit Hilfe von Inline-CSS-Stilen.

Die Styles für alle Klassen, die innerhalb des Shortcode verwendet werden, werden registriert und in eine Warteschlange eingereiht, so wie wir es im vorherigen Shortcode-Beispiel getan haben.

Da aber zwei Shortcodes das gleiche Stylesheet verwenden, muss es geladen werden, wenn einer der beiden verwendet wird. Also, lasst uns die salcodes_enqueue_scripts() Funktion aktualisieren:

/** Enqueuing the Stylesheet for Salcodes */

function salcodes_enqueue_scripts() {
 global $post;
 $has_shortcode = has_shortcode( $post->post_content, 'cta_button' ) || has_shortcode( $post->post_content, 'boxed' );
 if( is_a( $post, 'WP_Post' ) && $has_shortcode ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

• • • $has_shortcode: eine benutzerdefinierte Variable, die prüft, ob einer der Shortcodes auf der Seite/dem Beitrag existiert. Der || (OR-Operator) macht das möglich.

Nun, lasst uns unseren [boxed] Shortcode ausprobieren.

Der Screenshot unten zeigt die Ausgabe, die wir erhalten.

Jetzt, wo du gelernt hast, deine eigenen Shortcodes zu erstellen, kannst du aus der [Box] heraus denken und ihnen deinen eigenen Dreh geben. Vergiss nicht, deine Kreationen mit uns zu teilen!

Wenn du möchtest, kannst du den Shortcode Plugin-Quellcode von hier herunterladen.

WordPress Shortcodes: Pro und Kontra

Die Vorteile

• • • Shortcodes vereinfachen das Hinzufügen von komplexen Funktionen in WordPress-Sites. Du kannst fast alles hinzufügen, indem du eine einzige Zeile Code eingibst.
    • Shortcodes automatisieren den Entwicklungs-Workflow. Sie machen es überflüssig, jedes Mal komplexe Skripte zu schreiben, wenn du ein bestimmtes Feature einfügen willst.
    • Shortcodes sind benutzerfreundlicher als das Hinzufügen von HTML-Code oder PHP-Skripten.
    • Shortcodes können in Plugins gebündelt werden. Selbst wenn du WordPress aktualisierst oder dein Theme änderst/aktualisierst, sind die Shortcodes immer noch gültig und funktionieren weiterhin wie zuvor.
    • Das Bündeln von Shortcodes innerhalb von Plugins macht es einfach, sie auf mehreren WordPress Webseiten zu verwenden. Wenn du ein Entwickler bist, der mit vielen Webseiten arbeitet, ist es ein Lebensretter, alle deine benutzerdefinierten Shortcodes bereit zu haben.
    • Da Shortcodes auch Attribute akzeptieren, können Benutzer das Verhalten desselben Shortcodes ändern, indem sie einfach die Attributoptionen ändern.

Die Nachteile

• • • Shortcodes sind für den Endbenutzer nicht intuitiv zu verwenden, besonders wenn viele davon auf einer Seite verwendet werden. In solchen Fällen sind sie eher für Entwickler geeignet.
    • Es ist schwer zu sagen, was ein Shortcode tut, wenn man ihn nur ansieht. Das WordPress Core Team hat sie genau aus diesem Grund treffend „Mystery Meat Embed Codes“ genannt.
    • Shortcodes, die zusammen mit Themes geliefert werden, funktionieren nicht mehr, wenn du dein Theme änderst.
    • Shortcodes sind hinsichtlich ihrer Syntax mehrdeutig. Zum Beispiel unterstützen einige von ihnen optionales Schließen, so dass du sie entweder als selbstschließende oder umschließende oder sogar beides verwenden kannst, wenn sie verschachtelt sind. Du kannst dir vorstellen, wie es sehr schnell sehr verwirrend werden kann.
    • Shortcodes können HTML aufgrund von widersprüchlichen Tags oder Interoperabilitätsproblemen brechen. Es ist nie ein guter Anblick, sie auf dem Frontend einer Website zu sehen.
    • Shortcodes fügen eine zusätzliche Last auf deinem Server hinzu. Wenn die Anzahl der Shortcodes auf deiner Seite/Posts steigt, steigt auch diese Last. Zu viele Shortcodes können deine Website zum Kriechen bringen (z.B. die Ausgabe der meisten Pagebuilder).

Shortcodes und Gutenberg-Blöcke

Durch die Einführung von Gutenberg wurde die Attraktivität von Shortcodes reduziert. Benutzer können nun direkt von der Editor-Oberfläche aus Blöcke hinzufügen, anstatt sich mit Shortcode-Markups zu beschäftigen, egal wie einfach es ist.

Und wenn du Shortcodes hinzufügen möchtest, wird Gutenberg sogar mit einem speziellen Block zum Hinzufügen von Shortcodes geliefert. Blöcke sind die neuen Shortcodes.

„Wenn du es mit einem Shortcode machen kannst, kannst du es auch als Block machen.“ – James Huff, Happiness Engineer bei Automattic

Das erklärt, warum alle gängigen Shortcodes in Blöcke umgewandelt werden. Viele WordPress-Entwickler sind dazu übergegangen, ihre Produkte und Dienstleistungen ausschließlich mit dem Block-Editor (Gutenberg) zu betreiben.

Aber das bedeutet nicht, dass es das Ende der Welt für Shortcodes ist. Das WordPress-Core Team hat viele Verbesserungen am Blockeditor versprochen, die man in Twenty Twenty sehen konnte, aber bis dahin sind Shortcodes hier, um zu bleiben!

Zusammenfassung

Das Hinzufügen komplexer Funktionalität überall auf deiner WordPress Seite ist einfach mit Shortcodes. Sie geben den Benutzern leicht zu verwendende Tags, die ohne die Sorge, sich mit komplexen Codes zu beschäftigen, verwendet werden können.

Auch wenn es im Leben keine Shortcodes gibt, gibt es sicher viele Shortcodes, die in WordPress verwendet werden können. Meine Favoriten sind Shortcodes Ultimate und Shortcodes von Angie Makes.

Und wenn du den gesuchten nicht finden kannst, kannst du selbst einen erstellen.

Du kannst sogar einen Shortcode erstellen, indem du das Shortcoder-Plugin verwendest. Es erledigt alles Wesentliche für dich. Und denke daran: Das Leben ist kurz, benutze Shortcodes!