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.

Beispiel des Gallerie Shortcodes

Beispiel des Gallerie Shortcodes

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.

Einfache Formatierung mit einfachen BBCodes

Einfache Formatierung mit einfachen BBCodes

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.

WordPress-Shortcodes sind einfach und leicht zu benutzen

WordPress-Shortcodes sind einfach und leicht zu benutzen

Die 2 Arten von Shortcodes

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

Selbstschließende und einschließende Shortcodes können mit oder ohne Attribute gültig sein.

Selbstschließende und einschließende Shortcodes können mit oder ohne Attribute gültig sein.

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

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:

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.

Hinzufügen eines Shortcode-Blocks in Gutenberg

Hinzufügen eines Shortcode-Blocks in Gutenberg

Gutenbergs spezieller Shortcode-Block

Gutenbergs spezieller Shortcode-Block

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.

Einen Shortcode im Classic Editor hinzufügen

Einen Shortcode im Classic Editor hinzufü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 mit dem Text-Widget einen Shortcode in deine Sidebar ein

Füge mit dem Text-Widget einen Shortcode in deine Sidebar ein

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.

Die Shortcode-Ausgabe (Galerie) ist in der Sidebar zu sehen

Die Shortcode-Ausgabe (Galerie) ist in der Sidebar zu 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' );

Die Shortcode-Handler-Funktion ist als solche definiert:

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

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!

Info

Mache ein Backup, bevor du irgendwelche Änderungen an deiner Website vornimmst. Kinsta bietet allen Kunden automatische Backups an. 

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

Beachten Sie die Lage des Plugin-Verzeichnisses

Beachten Sie die Lage des Plugin-Verzeichnisses

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 */
?>

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.

Teste den benutzerdefinierten Shortcode, indem du ihn auf der Seite hinzufügst.

Teste den benutzerdefinierten Shortcode, indem du ihn auf der Seite hinzufügst.

Und wie es zu erwarten war, funktioniert er perfekt.

Der Output des “year” shortcodes

Der Output des “year” shortcodes

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.

Bist du es leid, einen langsamen Host für deine WordPress-Seite zu haben? Wir bieten blitzschnelle Server und 24/7 Weltklasse-Support von WordPress-Experten. Schau dir unsere Pläne an

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.

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.

Ich füge den Shortcode zu einem Sidebar-Text-Widget hinzu, um es zu testen.

Ich füge den Shortcode zu einem Sidebar-Text-Widget hinzu, um es zu testen.

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.

Ausgabe des Shortcodes des CTA-Buttons, der zeigt, dass er wie erwartet einwandfrei funktioniert

Ausgabe des Shortcodes des CTA-Buttons, der zeigt, dass er wie erwartet einwandfrei funktioniert

Die HTML-Ausgabe des CTA-Buttons ohne Attribute.

Die HTML-Ausgabe des CTA-Buttons ohne Attribute.

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:

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:

Beachte die benutzerdefinierten Link-, Farb-, Größen- und Beschriftungsattribute.

Beachte die benutzerdefinierten Link-, Farb-, Größen- und Beschriftungsattribute.

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

Der CTA-Button hat jetzt eine neue URL, Farbe, Größe und Beschriftung.

Der CTA-Button hat jetzt eine neue URL, Farbe, Größe und Beschriftung.

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;
}

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');

Nun, lasst uns unseren [boxed] Shortcode ausprobieren.

Füge den boxed shortcode zusammen mit den Attributen title, title_color und color hinzu.

Füge den boxed shortcode zusammen mit den Attributen title, title_color und color hinzu.

Der Screenshot unten zeigt die Ausgabe, die wir erhalten.

Eine hübsche Box ist doch nicht so schwer zu bekommen!

Eine hübsche Box ist doch nicht so schwer zu bekommen!

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

Die Nachteile

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!

Mit weniger mehr erreichen, sagst du? Das ist mit WordPress-Shortcodes möglich! Erfahre, was sie sind und wie du deine eigenen erstellen kannst, mit dieser ausführlichen Anleitung. Das Leben ist zu kurz, um shortcodes〚〛💪Click to Tweet

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!


Wenn Dir dieser Artikel gefallen hat, dann wirst du Kinsta’s WordPress Hosting-Plattform lieben. Beschleunige deine Webseite und erhalte 24/7 Support von unserem erfahrenen WordPress-Team. Unsere Google Cloud basierte Infrastruktur konzentriert sich auf die Bereiche Auto-Scaling, Performance und Sicherheit. Lass uns dir den Kinsta-Unterschied zeigen! Schau Dir hier unsere Pakete an