Wie man WordPress-Shortcodes erstellt: Ein vollständiger Leitfaden.

Was ist ein Shortcode in WordPress?

AWordPress-Shortcodeist ein leistungsstarkes, benutzerfreundliches Tool, das die Ausführung komplexer Aufgaben auf Ihrer Website vereinfacht. Es ist ein kleines Code-Snippet, das in eckigen Klammern eingeschlossen ist, wie

, das eine bestimmte Funktion erfüllt. Anstatt umfangreiche HTML-, CSS- oder PHP-Codes manuell zu schreiben, ermöglichen Shortcodes Ihnen, Funktionen schnell und einfach auszulösen.

Wenn Sie einen Shortcode in einen Beitrag, eine Seite oder ein Widget einfügen, verarbeitet WordPress ihn und ersetzt ihn durch die entsprechende Ausgabe einer Funktion, zum Beispiel das Anzeigen einer Bildergalerie, eines Formulars oder eines eingebetteten Videos.

Einige wichtige Merkmale von Shortcodes sind:

Effizienz. Fortgeschrittene Aufgaben mit wenig Code lösen.

Flexibilität. Inhalte oder Funktionen überall hinzufügen – ob in Beiträgen, Seiten oder Widgets.

Einsteigerfreundlich. Kein technisches Know-how erforderlich. Jeder kann Shortcodes verwenden.

Wiederverwendbar. Einmal erstellt, kann ein Shortcode mehrfach in verschiedenen Bereichen Ihrer Website verwendet werden.

Sauberes Content-Management. Halten Sie Ihre Beiträge und Seiten übersichtlich, indem Sie Inline-Code vermeiden.

Beispielsweise möchten Sie eine Galerie einbetten oder ein Kontaktformular hinzufügen, fügen Sie einfach den entsprechenden WP-Shortcode ein, und WordPress kümmert sich dahinter um alles. Shortcodes sind sowohl für Anfänger als auch für erfahrene Entwickler äußerst hilfreich, da sie die Inhaltserstellung beschleunigen und dynamische Funktionen ermöglichen, ohne die Bedienung zu beeinträchtigen. Durch Shortcodes können Sie alles von Schaltflächen bis hin zu benutzerdefinierten Widgets integrieren – und Ihre Inhalte sauber und leicht verwaltbar halten.

So erstellen Sie einen Shortcode in WordPress

Die Erstellung eines WordPress-Shortcodes ist eine einfache, aber leistungsstarke Methode, dynamische Funktionen zu Ihrer Website hinzuzufügen. Ob Sie Ihre Inhalte optimieren oder benutzerdefinierte Funktionen entwickeln möchten – Shortcodes ermöglichen es Ihnen, Code einfach in Beiträge und Seiten einzufügen. Im Folgenden erklären wir Schritt für Schritt, wie Sie einen WordPress-Shortcode von Grund auf neu erstellen.

Schritt-für-Schritt-Anleitung zur Erstellung eines Basis-Shortcodes

1. Greife auf die functions.php-Datei deines Themes zu. Um loszulegen, öffne dein WordPress-Dashboard und gehe zu Design > Theme-Editor. Öffne die functions.php-Datei deines Themes. Hier erstellst du deinen individuellen Shortcode.
2. Shortcode-Funktion definieren. Als Nächstes erstellen Sie eine Funktion, die den Inhalt oder das Feature festlegt, das Sie anzeigen möchten. Wenn Sie beispielsweise eine einfache Meldung wie „Hallo, Welt!“ an der Stelle anzeigen möchten, an der Sie den Shortcode verwenden, können Sie Folgendes schreiben:

function hello_world_shortcode() {n    return 'Hello, World!';n}

3. Fügen Sie den Shortcode zu WordPress hinzu. Nachdem Sie die Funktion definiert haben, verwenden Sie die Funktion add_shortcode(), um Ihren Shortcode zu registrieren. Dies teilt WordPress mit, nach welchem Text es in Ihrem Inhalt suchen soll und welche Funktion aufgerufen werden soll:

add_shortcode('hello_world', 'hello_world_shortcode');

Wenn Sie [hello_world] in einen Beitrag oder eine Seite einfügen, ersetzt WordPress es durch „Hello, World!“

4. Testen Sie Ihren Shortcode. Fügen Sie den Shortcode [hello_world] in einen Beitrag oder eine Seite ein, um sicherzustellen, dass er wie erwartet funktioniert.

WordPress-Shortcode-Beispiel: Ein einfacher Button

Schaltflächen sind ein wesentlicher Bestandteil der Nutzerbindung – egal, ob sie als Call-to-Action oder für die Navigation dienen. Lassen Sie uns anhand eines Beispiels zeigen, wie man einen WordPress-Button-Shortcode erstellt.

Wie man einen Button-Shortcode erstellt:

1. HTML- und CSS-Code des Buttons definieren. Erstellen Sie in der functions.php-Datei Ihres Themes eine Funktion, die den HTML-Code des Buttons ausgibt. Passen Sie das Button-Design mit Inline-CSS an oder verlinken Sie zu einer externen Stylesheet-Datei. Hier ist ein Beispiel, wie Sie einen einfachen Button erstellen:

function custom_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Click Me',
            'url' => '#',
        ), $atts
    );

    return '<a href="' . esc_url($atts['url']) . '" class="custom-button" style="padding: 10px 20px; background-color: #0073aa; color: white; text-decoration: none;"' . esc_html($atts['text']) . '</a>';
}

add_shortcode('custom_button', 'custom_button_shortcode');

2. Fügen Sie den Shortcode zu WordPress hinzu. In diesem Beispiel haben wir einen Button erstellt, der zwei Parameter akzeptiert: Text und URL. Den [custom_button]-Shortcode können Sie nun überall in Ihrem Inhalt einfügen, wie folgt:

[custom_button text=”Mehr erfahren” url=”https://example.com”]

Dies erzeugt einen anklickbaren Button mit dem Text „Mehr erfahren“, der auf die bereitgestellte URL verweist.

3. Schaltfläche in Beiträge und Seiten integrieren. Sie können dieses WordPress-Shortcode-Beispiel in Beiträgen, Seiten oder sogar in Widgets verwenden. Fügen Sie einfach den [custom_button]-Shortcode dort ein, wo Sie eine Schaltfläche benötigen, und WordPress erzeugt die gestylte Schaltfläche im Frontend.

Durch das Erstellen benutzerdefinierter Buttons wie diesen erhöhen Sie die Interaktivität Ihrer Website und verbessern das Benutzererlebnis – ohne jede Seite einzeln anpassen zu müssen, wenn Sie einen neuen Button benötigen.

So fügen Sie Shortcodes zu WordPress-Seiten und -Beiträgen hinzu.

Nachdem Sie einen Shortcode erstellt haben, geht der nächste Schritt dahin, ihn in Ihre WordPress-Inhalte einzubinden. Shortcodes können in Beiträge, Seiten und sogar benutzerdefinierte Beitragstypen mit dem WordPress-Editor eingefügt werden, wodurch Sie flexibel bleiben, wie Sie Ihre Inhalte verwalten. Es gibt verschiedene Methoden, Shortcodes in WordPress hinzuzufügen. Werfen wir einen Blick darauf und prüfen, wie sie mit verschiedenen Blöcken und Themes zusammenarbeiten.

Methode 1: WordPress Classic Editor verwenden

Wenn Sie den Classic Editor verwenden, ist das Einbetten eines Shortcodes so einfach wie das direkte Eintippen in den Editor. So geht’s:

1. Öffnen Sie den Beitrag oder die Seite, in der Sie den Shortcode einfügen möchten.
2. Im Editor geben Sie einfach den Shortcode in eckige Klammern ein. Wenn Sie beispielsweise einen Button-Shortcode hinzufügen, geben Sie Folgendes ein:

[custom_button text="Jetzt kaufen" url="https://yourlink.com"]

3. Aktualisieren oder Veröffentlichen der Seite – WordPress ersetzt den Shortcode beim Laden durch die entsprechende Funktion.

Methode 2: Block-Editor (Gutenberg) verwenden

Mit dem Gutenberg-Block-Editor ist das Hinzufügen von Shortcodes genauso einfach – dank des Shortcode-Blocks. So fügen Sie einen Shortcode in WordPress über den Block-Editor hinzu:

1. Öffnen Sie den Beitrag oder die Seite im Block-Editor.
2. Klicken Sie auf die Schaltfläche +, um einen neuen Block hinzuzufügen, und suchen Sie anschließend nach „Shortcode“.
3. Wählen Sie den Shortcode-Block aus und fügen Sie Ihren Shortcode in das Textfeld ein oder tippen Sie ihn ein. Zum Beispiel, .

[custom_button text="Registrieren" url="https://yourlink.com"]

4. Speichern oder aktualisieren Sie Ihren Inhalt; der Block zeigt die Ausgabe Ihres Shortcodes im Frontend an.

Methode 3: Shortcodes mit Page Buildern hinzufügen

Viele beliebte WordPress-Seiten-Builder, wie Elementor oder WPBakery, ermöglichen das direkte Einfügen von Shortcodes in individuell gestaltete Bereiche. Typischerweise verfügen diese Builder über dedizierte Shortcode-Widgets, in die Sie den Shortcode einfügen und das Ergebnis direkt im Builder ansehen können.

Ganz egal, welchen Editor oder Builder Sie verwenden, mit dem Wissen um Shortcodes in WordPress lassen sich Funktionen mühelos hinzufügen – auch beim Wechseln zwischen verschiedenen Themes und Layouts.

Shortcodes in WordPress-Widgets verwenden

Shortcodes beschränken sich nicht nur auf Beiträge und Seiten – sie lassen sich auch in Widget-Bereichen wie Seitenleisten, Fußzeilen und Kopfzeilen verwenden, um dynamische Inhalte auf Ihrer WordPress-Seite bereitzustellen. So nutzen Sie <strong>shortcodes in WordPress</strong>-Widget-Bereiche effektiv.

So fügen Sie Shortcodes in Widgets hinzu:

1. Gehen Sie zu Ihren Widget-Einstellungen. Im WordPress-Dashboard öffnen Sie Aussehen > Widgets. Dadurch öffnen sich die verfügbaren Widget-Bereiche Ihres Themes (typischerweise Seitenleisten oder Fußzeilen).
2. Text-Widget hinzufügen: Im Widget-Bereich ziehst und legst du ein Text-Widget in den Widget-Bereich, in dem du deinen Shortcode einfügen möchtest. Das Text-Widget unterstützt HTML und Shortcodes und ist dafür ideal geeignet.
3. Fügen Sie den Shortcode ein: Im Textbereich des Widgets fügen Sie einfach Ihren Shortcode ein. Zum Beispiel könnten Sie verwenden, um einen benutzerdefinierten Button in der Seitenleiste hinzuzufügen:

Kontaktieren Sie uns

4. Speichern und Vorschau: Nachdem Sie den Shortcode eingefügt haben, speichern Sie die Widget-Einstellungen und sehen Ihre Website in der Vorschau an. Der Shortcode wird ausgeführt, und der Button (oder eine andere Funktionalität) erscheint im Widget-Bereich.

Veredeln Sie Ihre Widgets mit Shortcodes:

Kurzcodes sind eine hervorragende Möglichkeit, die Widget-Bereiche Ihrer Website zu erweitern, ohne den Theme-Code manuell zu bearbeiten. Sie können alles Mögliche hinzufügen – von Kontaktformularen über Galerien, Schieberegler bis hin zu benutzerdefinierten Buttons. Diese Flexibilität ermöglicht es Ihnen, die Funktionalität Ihrer Website schnell an Ihre Bedürfnisse anzupassen – auch in Seitenleisten oder Fußzeilen.

Egal, ob Sie mit einem Theme oder einem Page Builder arbeiten, beherrschen Sie Shortcodes in WordPress Widgets, um Ihre Website dynamischer und benutzerfreundlicher zu gestalten.

WordPress-Shortcodes-Liste: Nützliche Shortcodes zur Optimierung Ihrer Website

WordPress liefert eine integrierte Shortcode-Sammlung, die den Prozess zum Hinzufügen dynamischer Inhalte auf Ihrer Website vereinfacht. Diese vorkonfigurierten Shortcodes ermöglichen es Ihnen, Multimedia, Galerien und mehr einzubetten – ganz ohne eine Codezeile zu schreiben. Hier ist eine kuratierte WordPress-Shortcodes-Liste, die Ihnen hilft, die Funktionalität Ihrer Website mühelos zu erweitern.

Gängige WordPress-Shortcodes:

Galerie.Bildergalerien einfach auf jeder Seite oder jedem Beitrag anzeigen, indem Sie die …

Shortcode. Sie können festlegen, welche Bilder angezeigt werden, indem Sie das ids-Attribut verwenden.

Beispiel:

Audio. Das Einbetten von Audiodateien geht genauso einfach. Verwenden Sie den Shortcode, um Musik oder Podcasts in Ihren Beiträgen einzubinden.

Beispiel:

https://www.youtube.com/watch?v=abc123

<img src="image.jpg" alt="Sample"/> Bildunterschrift

Dies sind nur einige der vorgefertigten WP-Shortcodes, die in WordPress verfügbar sind. Sie ermöglichen es, Multimedia-Elemente und andere Funktionen schnell und intuitiv hinzuzufügen – auch für Nutzer ohne Programmierkenntnisse. Durch die Nutzung dieser Shortcodes lässt sich das Benutzererlebnis auf Ihrer Website erheblich verbessern, während gleichzeitig ein reibungsloser Workflow gewährleistet bleibt.

So vereinfachen Sie Ihren Workflow mit einem WordPress-Shortcode-Generator

Für Benutzer, die sich beim Schreiben oder Anpassen von Code nicht sicher fühlen, kann ein WordPress-Shortcode-Generator sehr hilfreich sein. Diese Tools vereinfachen den Prozess, indem sie Shortcodes automatisch anhand Ihrer Vorgaben erstellen, Zeit sparen und Fehler reduzieren. Egal, ob Sie benutzerdefinierte Buttons, Formulare oder Galerien hinzufügen – diese Generatoren bieten eine benutzerfreundliche Oberfläche, die Ihnen hilft, die Aufgabe schnell zu erledigen.

Was ist ein WordPress-Shortcode-Generator?

Ein WordPress-Shortcode-Generator ist ein Tool oder Plugin, das Nutzern hilft, Shortcodes zu erstellen, ohne den zugrunde liegenden Code zu kennen. Solche Tools bieten in der Regel ein einfaches Formular, in dem Nutzer die gewünschten Optionen – wie Texte, URLs oder Stile – auswählen und anschließend den Shortcode zur Einfügung in Beitrag, Seite oder Widget generieren. Das macht es Anfängern extrem leicht, ihrer Website fortgeschrittene Funktionen hinzuzufügen, ohne den Shortcode manuell schreiben zu müssen.

Beliebte WordPress-Shortcode-Generator-Plugins und -Tools:

Die Verwendung eines WordPress-Shortcode-Generators ist eine hervorragende Methode, Ihren Arbeitsablauf zu beschleunigen, insbesondere wenn Sie mehrere Websites verwalten oder Inhalte regelmäßig aktualisieren. Mit diesen Tools bleibt Ihre Website dynamisch und funktionsfähig – auch ohne Programmierkenntnisse.

Best Practices und Tipps zur Verwendung von WordPress-Shortcodes

Ob Shortcodes das Hinzufügen dynamischer Inhalte zu Ihrer Website erleichtern, gibt es mehrere Best Practices, die Ihnen helfen können, deren Einsatz zu optimieren. Hier sind einige Tipps, damit Sie Shortcodes voll ausschöpfen.

Zu den beliebten Elfsight-Plugins für WordPress gehören:

• </a>Instagram-Feed-Plugin</a>: Zeigen Sie Ihre neuesten Instagram-Beiträge in einem visuell ansprechenden Format an. Die Shortcode-Integration ermöglicht es Ihnen, dynamische Inhalte überall auf Ihrer Website zu platzieren, egal ob in der Sidebar, im Footer oder in einem Beitrag.
• Google-Bewertungen-Plugin: Vertrauen bei neuen Kunden sofort aufbauen, indem Google-Bewertungen in Echtzeit angezeigt werden. Fügen Sie einfach den vom Plugin bereitgestellten Shortcode hinzu, um Bewertungen in jedem Widget-Bereich oder Inhaltsblock hervorzuheben.
• Kontaktformular-Plugin: Mit dem Kontaktformular-Widget von Elfsight integrieren Sie mühelos ein Formular in Ihre Website per Shortcode. Es bietet anpassbare Vorlagen, mit denen Sie Formulare erstellen, die zum Design Ihrer Website passen.
• WhatsApp-Chat-Plugin erleichtert die Kommunikation, indem es Ihrer Website einen WhatsApp-Chat-Button hinzufügt. Diese Funktion ermöglicht es Ihren Besuchern, Sie direkt über WhatsApp zu erreichen, und verbessert den Kundensupport durch eine vertraute und bequeme Messaging-Plattform.
• Event-Kalender-Plugin bietet eine übersichtliche Möglichkeit, kommende Veranstaltungen auf Ihrer Website anzuzeigen. Mit Shortcodes können Sie schnell einen dynamischen Kalender hinzufügen, der Veranstaltungsdetails, Termine und RSVP-Optionen enthält – ideal für Unternehmen und Organisationen, die regelmäßig Veranstaltungen ausrichten.

Wenn Sie diesen Tipps folgen und leistungsstarke Tools wie Elfsight-Plugins verwenden, optimieren Sie Ihren Arbeitsablauf, reduzieren den manuellen Codeaufwand und fügen Ihrer Website mit nur wenigen Klicks professionell aussehende Funktionen hinzu.

Fazit

WordPress-Shortcodes sind ein unschätzbares Werkzeug, um dynamische Funktionen auf Ihrer Website ganz ohne Programmierkenntnisse zu integrieren. Ob Sie Galerien einbetten, benutzerdefinierte Buttons erstellen oder Elfsight-Widgets integrieren – Shortcodes bieten eine flexible und effiziente Lösung für die Seitenverwaltung. Wenn Sie Shortcodes beherrschen, erhöhen Sie die Funktionalität Ihrer Website und verbessern das Nutzererlebnis mit minimalem Aufwand.

Für alle, die ihre WordPress-Website auf das nächste Level bringen möchten, bieten benutzerdefinierte Shortcodes grenzenlose Möglichkeiten – insbesondere in Kombination mit Tools wie Elfsight-Plugins. Indem Sie den Prozess zum Hinzufügen von Formularen, Social Feeds, Bewertungen und mehr vereinfachen, behalten Sie jederzeit die Kontrolle über Inhalte und Funktionalität Ihrer Website.

FAQ (Häufig gestellte Fragen)