So fügen Sie einen Shortcode in WordPress hinzu (Anfängerleitfaden)

Wir hören oft von Benutzern, die von WordPress-Shortcodes überwältigt sind.

Diese kleinen Code-Schnipsel mögen auf den ersten Blick verwirrend aussehen, aber sie sind tatsächlich eine der mächtigsten Funktionen in WordPress, wenn sie richtig eingesetzt werden.

Ob Sie Kontaktformulare, Galerien oder benutzerdefinierte Layouts hinzufügen möchten, Shortcodes bieten eine einfache Möglichkeit, komplexe Funktionen einzufügen, ohne Code anfassen zu müssen.

In diesem anfängerfreundlichen Leitfaden zeigen wir Ihnen genau, wie Sie Shortcodes in WordPress hinzufügen, wo Sie sie platzieren und wie Sie sie am besten verwenden.

Wir haben alles in einfache, leicht verständliche Schritte unterteilt, die jeder nachvollziehen kann, auch wenn Sie neu bei WordPress sind.

Was sind Shortcodes?

Shortcodes in WordPress sind Code-Abkürzungen, die Ihnen helfen, dynamische Inhalte zu WordPress-Beiträgen, Seiten und Sidebar-Widgets hinzuzufügen. Sie werden in eckigen Klammern wie folgt angezeigt:

[myshortcode]

Um Shortcodes besser zu verstehen, betrachten wir den Hintergrund, warum sie überhaupt hinzugefügt wurden.

WordPress filtert alle Inhalte, um sicherzustellen, dass niemand Beiträge und Seiteninhalte zum Einfügen von bösartigem Code in die Datenbank verwendet. Das bedeutet, dass Sie einfaches HTML in Ihre Beiträge schreiben können, aber keinen PHP-Code.

Aber was, wenn Sie benutzerdefinierten Code in Ihre Beiträge einfügen möchten, um verwandte Beiträge, Bannerwerbung, Kontaktformulare, Galerien oder etwas anderes anzuzeigen?

Hier kommt die Shortcode-API ins Spiel.

Grundsätzlich ermöglicht es Entwicklern, ihren Code in eine Funktion einzufügen und diese Funktion dann bei WordPress als Shortcode zu registrieren, sodass Benutzer ihn problemlos verwenden können, ohne Programmierkenntnisse zu haben.

Wenn WordPress den Shortcode findet, wird automatisch der damit verbundene Code ausgeführt.

Sehen wir uns an, wie Sie ganz einfach Shortcodes zu Ihren WordPress-Beiträgen und -Seiten hinzufügen können.

Sie können die folgenden Links verwenden, um zu Ihrer bevorzugten Methode zu springen:

• Hinzufügen eines Shortcodes in WordPress-Beiträgen und -Seiten
• Hinzufügen eines Shortcodes in WordPress-Sidebar-Widgets
• Einfügen eines Shortcodes im alten klassischen WordPress-Editor
• Hinzufügen eines Shortcodes in WordPress-Theme-Dateien
• Hinzufügen eines Shortcodes in Block-Theme-Dateien mit dem Full-Site-Editor
• Creating Your Own Custom Shortcode in WordPress
• Shortcodes vs. Gutenberg-Blöcke
• Häufig gestellte Fragen zu Shortcodes

Hinzufügen eines Shortcodes in WordPress-Beiträgen und -Seiten

Zuerst müssen Sie den Beitrag und die Seite bearbeiten, zu der Sie den Shortcode hinzufügen möchten.

Danach müssen Sie auf die Schaltfläche „Block hinzufügen“ „+“ klicken, um einen Shortcode-Block einzufügen.

Nach dem Hinzufügen des Shortcode-Blocks können Sie Ihren Shortcode einfach in den Blockeinstellungen eingeben.

Der Shortcode wird von verschiedenen WordPress-Plugins bereitgestellt, die Sie möglicherweise verwenden, wie z. B. WPForms für Kontaktformulare.

Um mehr über die Verwendung von Blöcken zu erfahren, lesen Sie unser Gutenberg-Block-Editor-Tutorial für weitere Details.

Sie können Ihren Beitrag oder Ihre Seite jetzt speichern und Ihre Änderungen in der Vorschau anzeigen, um den Shortcode in Aktion zu sehen.

Hinzufügen eines Shortcodes in WordPress-Sidebar-Widgets

Sie können auch Shortcodes in WordPress-Sidebar- Widgets verwenden.

Besuchen Sie einfach die Seite Darstellung » Widgets und fügen Sie einen „Shortcode“-Widget-Block zu einer Seitenleiste hinzu.

Jetzt können Sie Ihren Shortcode in den Textbereich des Widgets einfügen.

Vergessen Sie nicht, auf die Schaltfläche „Aktualisieren“ zu klicken, um Ihre Widget-Einstellungen zu speichern.

Danach können Sie Ihre WordPress-Website besuchen, um die Live-Vorschau des Shortcodes im Sidebar-Widget zu sehen.

Einfügen eines Shortcodes im alten klassischen WordPress-Editor

Wenn Sie immer noch den alten klassischen Editor verwenden, können Sie Shortcodes direkt in den Inhaltsbereich einfügen.

Bearbeiten Sie einfach den Beitrag oder die Seite und fügen Sie den Shortcode dort ein, wo die Funktion erscheinen soll.

Für beste Ergebnisse empfehlen wir, ihn auf eine eigene Zeile zu setzen, insbesondere bei Shortcodes, die große Elemente wie Formulare oder Galerien hinzufügen. Dies hilft, Formatierungsprobleme zu vermeiden.

Vergessen Sie nicht, Ihre Änderungen zu speichern. Sie können dann eine Vorschau Ihres Beitrags anzeigen, um den Shortcode in Aktion zu sehen.

Hinzufügen eines Shortcodes in WordPress-Theme-Dateien

Shortcodes sind für die Verwendung in WordPress-Beiträgen, Seiten und Widgets gedacht. Manchmal möchten Sie jedoch einen Shortcode in einer WordPress-Theme-Datei verwenden.

WordPress macht das einfach, aber Sie müssen Ihre WordPress-Theme-Dateien bearbeiten. Wenn Sie dies noch nie getan haben, lesen Sie unseren Leitfaden zum Kopieren und Einfügen von Code in WordPress.

Grundsätzlich können Sie einen Shortcode zu jeder WordPress-Theme-Vorlage hinzufügen, indem Sie einfach den folgenden Code einfügen:

<?php echo do_shortcode('[your_shortcode]'); ?> 

WordPress sucht nun nach dem Shortcode und zeigt dessen Ausgabe in Ihrer Theme-Vorlage an.

Hinzufügen eines Shortcodes in Block-Theme-Dateien mit dem Full-Site-Editor

Wenn Sie ein Block-Theme verwenden, wird es einfacher, Shortcodes mit dem Full Site Editor in Ihre WordPress-Theme-Dateien einzufügen.

Sie können auf dieses Werkzeug zugreifen, indem Sie im WordPress-Dashboard Darstellung » Editor auswählen.

Ihnen wird standardmäßig die Home-Vorlage Ihres Themes angezeigt, und Sie können zu anderen Vorlagen wechseln, indem Sie die Option 'Vorlagen' auswählen.

Sobald Sie eine Vorlage ausgewählt haben, können Sie mit der Bearbeitung beginnen, indem Sie in den rechten Bereich des Editors klicken. Der Editor wird nun den Bildschirm ausfüllen.

Jetzt können Sie auf das Symbol für den Block-Inserter (+) klicken und nach dem Shortcode-Block suchen. Ziehen Sie ihn dann einfach auf die Vorlage und geben Sie den gewünschten Shortcode ein.

Vergessen Sie nicht, auf die Schaltfläche „Speichern“ oben auf dem Bildschirm zu klicken, um Ihre Änderungen zu speichern.

Erstellen Ihres eigenen benutzerdefinierten Shortcodes in WordPress

Shortcodes können sehr nützlich sein, wenn Sie dynamische Inhalte oder benutzerdefinierten Code in WordPress-Beiträge und -Seiten einfügen möchten. Wenn Sie jedoch einen benutzerdefinierten Shortcode erstellen möchten, sind einige Programmierkenntnisse erforderlich.

Wenn Sie sich mit dem Schreiben von PHP-Code wohlfühlen, finden Sie hier ein Beispiel, das Sie als Vorlage verwenden können:

// function that runs when shortcode is called function wpb_demo_shortcode() { // Things that you want to do. $message = 'Hello world!'; // Output needs to be return return $message; } // register shortcode add_shortcode('greeting', 'wpb_demo_shortcode'); 

In diesem Code haben wir zuerst eine Funktion erstellt, die Code ausführt und die Ausgabe zurückgibt. Danach haben wir einen neuen Shortcode namens „greeting“ erstellt und WordPress angewiesen, die von uns erstellte Funktion auszuführen.

Sie können diesen Code manuell zu Ihrer Theme-Datei functions.php hinzufügen oder ein Code-Snippet-Plugin wie WPCode (empfohlen) verwenden.

Wir empfehlen Letzteres, da WPCode der sicherste und einfachste Weg ist, Code zu Ihrer Website hinzuzufügen. Weitere Informationen finden Sie in unserem WPCode-Testbericht.

Weitere Details finden Sie in unserem Leitfaden zum Hinzufügen von benutzerdefiniertem Code in WordPress, ohne etwas zu beschädigen.

Sobald Sie dies getan haben, können Sie diesen Shortcode mit dem folgenden Code zu Ihren Beiträgen, Seiten und Widgets hinzufügen:

[greeting]

Es wird die von Ihnen erstellte Funktion ausführen und die gewünschte Ausgabe anzeigen.

Obwohl dieses Beispiel einfach ist, liegt die wahre Stärke von Shortcodes darin, komplexen Code wiederzuverwenden.

Indem Sie ein langes Skript in einen Shortcode einpacken, halten Sie Ihren Content-Editor übersichtlich und erleichtern standortweite Aktualisierungen erheblich. Sie müssen den Code nur an einer Stelle bearbeiten.

Praktisches Beispiel: Google AdSense Shortcode

Sehen wir uns nun ein praktischeres Beispiel an.

Sie können einen Shortcode verwenden, um einen Google AdSense-Banner einfach überall auf Ihrer Website anzuzeigen.

// The shortcode function function wpb_demo_shortcode_2() { // Advertisement code pasted inside a variable $string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-format="fluid" data-ad-layout="in-article" data-ad-client="ca-pub-0123456789101112" data-ad-slot="9876543210"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>'; // Ad code returned return $string; } // Register shortcode add_shortcode('my_ad_code', 'wpb_demo_shortcode_2'); 

Ersetzen Sie den Platzhalter-Anzeigencode durch Ihren eigenen. Sie können jetzt den Shortcode [my_ad_code] verwenden, um die Anzeige in jedem Beitrag, jeder Seite oder jedem Widget-Bereich anzuzeigen.

Shortcodes vs. Gutenberg-Blöcke

Gutenberg-Blöcke und Shortcodes ermöglichen beide das Hinzufügen dynamischer Inhalte zu Ihrer WordPress-Website. Der Hauptunterschied besteht darin, dass Blöcke eine visuelle Oberfläche bieten, während Shortcodes textbasierte Snippets sind, die Sie in einen bestimmten Block einfügen.

Viele beliebte WordPress-Plugins verwenden inzwischen Blöcke anstelle von Shortcodes. Das liegt daran, dass Blöcke oft anfängerfreundlicher sind und Sie eine Vorschau des Endergebnisses direkt im Editor sehen können.

Wir haben eine Liste der nützlichsten Gutenberg-Block-Plugins für WordPress zusammengestellt, die Sie vielleicht ausprobieren möchten.

Wenn Sie Ihre eigenen benutzerdefinierten Gutenberg-Blöcke erstellen möchten, können Sie unserer Schritt-für-Schritt-Anleitung zum Erstellen benutzerdefinierter Gutenberg-Blöcke in WordPress folgen.

Häufig gestellte Fragen zu Shortcodes

Hier bei WPBeginner erhalten wir oft Fragen dazu, wie Shortcodes funktionieren. Unten finden Sie Antworten auf einige der häufigsten Fragen.

Sind Shortcodes mit dem Block-Editor noch relevant?

Ja, absolut. Während viele neuere Plugins dedizierte Blöcke verwenden, verwenden Tausende anderer Plugins immer noch Shortcodes, um Funktionen zu Ihren Inhalten hinzuzufügen. Sie werden sie noch lange nützlich finden, weshalb WordPress einen dedizierten Shortcode-Block enthält.

Können Shortcodes meine Website verlangsamen?

Ein Shortcode ist nur so schnell wie der Code, den er ausführt. Ein gut geschriebener Shortcode von einem seriösen Plugin hat nur minimale Auswirkungen auf die Leistung Ihrer Website.

Allerdings kann die Verwendung zu vieler Shortcodes, die viele Skripte auf einer einzigen Seite laden, manchmal zu einer Verlangsamung führen.

Wie finde ich den Shortcode für ein Plugin?

Die meisten Plugins zeigen ihren Shortcode auf ihrer Einstellungsseite, in der Dokumentation oder direkt in der Editor-Oberfläche an. Zum Beispiel macht es WPForms einfach, den Shortcode eines Formulars zu kopieren, sobald Sie es speichern.

Kann ich Shortcodes in Page Buildern wie SeedProd verwenden?

Ja, alle wichtigen Page Builder wie SeedProd haben einen speziellen 'Shortcode'-Block oder ein Widget. Sie können den Block einfach auf Ihr Layout ziehen und den Shortcode einfügen, den Sie anzeigen möchten.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einen Shortcode in WordPress hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zum Zeigen und Verbergen von Text in WordPress-Beiträgen mit dem Toggle-Effekt und unser Tutorial zum Kopieren und Einfügen in WordPress ohne Formatierungsprobleme sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.