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() {
    return 'Hello, World!';
}

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.

Das war’s! Sie haben soeben einen grundlegenden Shortcode erstellt. Jetzt können Sie diese Funktionalität an Ihre Bedürfnisse anpassen. Wenn Sie etwas Anspruchsvolleres möchten, können Sie auch benutzerdefinierte WordPress-Shortcodes für spezielle Funktionen wie Buttons, Formulare oder die Integration externer APIs erstellen.

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="Buy Now" 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="Sign Up" 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:

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

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:

Video. Um ein Video von einer URL einzubetten, verwenden Sie einfach den Shortcode. Dadurch können Sie Videos ohne zusätzliche Plugins von Drittanbietern einbetten.



Beispiel:

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

Beispiel:

Einbetten. Möchten Sie Inhalte schnell von YouTube, Twitter oder anderen Plattformen einbetten? Verwenden Sie den Shortcode mit der relevanten URL.



Beispiel:

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

Bildunterschrift. Zeigen Sie ein Bild mit einer Bildunterschrift über den Shortcode. Das ist besonders nützlich für medienstarke Inhalte wie Blogs oder Nachrichtenseiten.



Beispiel:

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

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:

1. Shortcodes Ultimate:
   
   Dieses Plugin bietet eine umfassende Bibliothek vorkonstruierter Shortcodes für verschiedene Funktionen – von Slidern bis zu Akkordeons. Es enthält einen Shortcode-Generator mit visueller Oberfläche, ideal für Nutzer, die ihre Website ohne eigenen Code verbessern möchten.
2. WP Shortcode von MyThemeShop:
   
   Ein weiteres hoch bewertetes Plugin. Dieses Tool bietet eine große Auswahl an anpassbaren Shortcodes für Buttons, Spalten, Tabs und mehr. Es enthält einen benutzerfreundlichen Shortcode-Generator, der Ihnen ermöglicht, Shortcodes schnell zu erstellen und in Ihre Inhalte einzufügen.
3. WordPress-Shortcodes-Plugin – Shortcoder:
   
   Für fortgeschrittene Nutzer ermöglicht Shortcoder das Erstellen eigener Shortcodes von Grund auf oder basierend auf HTML, JavaScript und anderem Code. Dieses Plugin bietet zudem einen Shortcode-Generator für einfachere Aufgaben, wie das Einbetten von Videos oder das Erstellen von Buttons.

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.

1. Halte deine Shortcodes ordentlich
   
   Wenn deine Website wächst, wächst auch deine Shortcode-Bibliothek. Stelle sicher, dass du benutzerdefinierte Shortcodes klar dokumentierst und benennst. Das erleichtert dir, sie im Blick zu behalten und später problemlos zu aktualisieren. Außerdem kann es sinnvoll sein, einen eigenen Abschnitt in der functions.php-Datei deines Themes für Shortcodes anzulegen, damit alles ordentlich und wartbar bleibt.
2. Auf Leistung optimieren
   
   Shortcodes sind praktisch, aber zu viele komplexe Shortcodes auf einer Seite können die Ladezeiten beeinträchtigen. Priorisieren Sie das Hinzufügen nur wesentlicher Funktionen und überwachen Sie die Leistung Ihrer Website, damit Shortcodes nichts verlangsamen.
3. Visuelle Plugins für mühelose Einbettung nutzen
   
   You don’t always need to write custom shortcodes from scratch. For those looking to add highly customizable and interactive elements to their WordPress site without coding, tools like Elfsight plugins for WordPress can be really helpful. Elfsight offers an extensive collection of widgets that are shortcode-compatible, allowing you to enhance your site without any technical hassle. Simply generate a shortcode through the plugin and embed it into your pages or posts.
   
   

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.

4. Testen Sie Shortcodes auf verschiedenen Geräten
   
   Stellen Sie sicher, dass die von Ihnen verwendeten Shortcodes reaktionsschnell sind und sich gut an verschiedene Bildschirmgrößen anpassen. Dies ist besonders wichtig beim Einbetten visueller Elemente, wie Elfsight’s Instagram Feed oder Google Reviews Plugins, die sowohl auf Desktop als auch auf Mobilgeräten gut aussehen sollten.
5. Drittanbieter-Shortcode-Bibliotheken nutzen
   
   Wenn das Erstellen eigener Shortcodes nicht zu Ihren Stärken gehört, nutzen Sie Drittanbieter-Plugins, die Shortcode-Bibliotheken bereitstellen. Zum Beispiel bieten Elfsight-Plugins eine unkomplizierte Möglichkeit, Social Feeds, Bewertungen, Formulare und mehr hinzuzufügen – alles mit einem einfachen Shortcode, den Sie an Ihre Bedürfnisse anpassen können.

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)