Wie man einen Shortcode in WordPress hinzufügt (Anleitung für Anfänger)

Stellen Sie sich vor, Sie könnten Ihrer WordPress-Website neue Dinge hinzufügen, wie Diashows, Kontaktformulare oder sogar spezielle Listen, indem Sie einfach einen Code eingeben. Das ist die Macht der Shortcodes.

Sie werden feststellen, dass viele WordPress Plugins und Themes Shortcodes verwenden können, um zusätzliche Funktionen zu Ihrer Website hinzuzufügen. Viele unserer Besucher fragen uns, wie sie diese am besten zu ihren Beiträgen, Seiten und Seitenleisten hinzufügen können.

In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie Shortcodes auf Ihrer WordPress-Website verwenden können. Wir zeigen Ihnen sogar, wie Sie individuelle Shortcodes erstellen können, wenn Sie richtig kreativ werden wollen.

Was sind Shortcodes?

Shortcodes in WordPress sind Code-Shortcuts, mit denen Sie WordPress-Beiträgen, -Seiten und -Sidebar-Widgets dynamische Inhalte hinzufügen können. Sie werden wie folgt in eckigen Klammern angezeigt:

[myshortcode]

Um Shortcodes besser zu verstehen, sollten wir einen Blick auf den Hintergrund werfen, warum sie überhaupt hinzugefügt wurden.

WordPress filtert alle Inhalte, um sicherzustellen, dass niemand Beiträge und Seiteninhalte verwendet, um bösartigen Code in die Datenbank einzufügen. Das bedeutet, dass Sie in Ihren Beiträgen einfachen HTML-Code schreiben können, aber keinen PHP-Code.

Aber was wäre, wenn Sie einen benutzerdefinierten Code in Ihren Beiträgen ausführen wollten, um verwandte Beiträge, Werbebanner, Kontaktformulare, Galerien oder etwas anderes anzuzeigen?

Hier kommt die Shortcode-API ins Spiel.

Im Grunde ermöglicht es Entwicklern, ihren Code in eine Funktion einzufügen und diese Funktion dann bei WordPress als Shortcode zu registrieren, so dass Benutzer sie ohne Programmierkenntnisse einfach verwenden können.

Wenn WordPress den Shortcode findet, wird der damit verbundene Code automatisch 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 Links unten verwenden, um zu Ihrer bevorzugten Methode zu gelangen.

Hinzufügen eines Shortcodes in WordPress Posts und Seiten

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

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

Nachdem Sie den Shortcode-Block hinzugefügt haben, können Sie Ihren Shortcode einfach in den Blockeinstellungen eingeben.

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

Wenn Sie mehr über die Verwendung von Blöcken erfahren möchten, lesen Sie unser Gutenberg-Tutorial.

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

Hinzufügen eines Shortcodes in WordPress Sidebar Widgets

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

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

Nun 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.

Hinzufügen eines Shortcodes im alten WordPress Classic Editor

Wenn Sie noch den alten , klassischen Editor in WordPress verwenden, dann erfahren Sie hier, wie Sie Shortcodes zu Ihren WordPress-Beiträgen und -Seiten hinzufügen können.

Bearbeiten Sie einfach den Beitrag und die Seite, auf der Sie den Shortcode hinzufügen möchten. Sie können den Shortcode an einer beliebigen Stelle im Inhaltseditor einfügen, wo er angezeigt werden soll. Achten Sie nur darauf, dass der Shortcode in einer eigenen Zeile steht.

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

Hinzufügen eines Shortcodes in WordPress-Theme-Dateien

Shortcodes sind dafür gedacht, innerhalb von WordPress-Beiträgen, -Seiten und -Widgets verwendet zu werden. Manchmal möchten Sie jedoch einen Shortcode innerhalb einer WordPress-Theme-Datei verwenden.

WordPress macht es Ihnen leicht, das zu tun, aber Sie müssen Ihre WordPress-Theme-Dateien bearbeiten. Wenn Sie dies noch nicht getan haben, lesen Sie unsere Anleitung 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 hinzufü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 Blocktheme-Dateien mit dem Full-Site-Editor

Wenn Sie ein Block-Theme verwenden, ist es einfacher, Shortcodes in Ihre WordPress-Theme-Dateien mit dem vollständigen Website-Editor einzufügen.

Sie können auf dieses Tool zugreifen, indem Sie im WordPress-Dashboard Erscheinungsbild “ Editor wählen.

Standardmäßig wird Ihnen die Home-Vorlage Ihres Themas angezeigt. Sie können zu anderen Vorlagen wechseln, indem Sie die Option „Vorlagen“ auswählen.

Sobald Sie eine Vorlage ausgewählt haben, können Sie sie bearbeiten, indem Sie in den rechten Bereich des Editors klicken. Der Editor füllt nun den Bildschirm aus.

Jetzt können Sie auf das Symbol „+“ für den Block-Inserter klicken und nach dem Shortcode-Block suchen. Danach ziehen Sie ihn einfach auf die Vorlage und geben den gewünschten Shortcode ein.

Vergessen Sie nicht, auf die Schaltfläche „Speichern“ am oberen Rand des Bildschirms zu klicken, um Ihre Änderungen zu speichern.

Eigene Shortcodes in WordPress erstellen

Shortcodes können sehr nützlich sein, wenn Sie dynamische Inhalte oder benutzerdefinierten Code in WordPress-Posts und -Seiten einfügen möchten. Wenn Sie jedoch einen benutzerdefinierten Shortcode erstellen möchten, ist etwas Erfahrung im Programmieren erforderlich.

Wenn Sie mit dem Schreiben von PHP-Code vertraut sind, finden Sie hier ein Codebeispiel, 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 zunächst eine Funktion erstellt, die einen 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 in die Datei functions.php Ihres Themes einfügen oder ein Code-Snippet-Plugin wie WPCode verwenden.

Weitere Einzelheiten finden Sie in unserem Leitfaden zum Hinzufügen von benutzerdefiniertem Code in WordPress, ohne etwas kaputt zu machen.

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

[Gruß]

Sie führt die von Ihnen erstellte Funktion aus und zeigt die gewünschte Ausgabe an.

Werfen wir nun einen Blick auf eine praktischere Verwendung eines Shortcodes.

In diesem Beispiel werden wir ein Google AdSense-Banner innerhalb eines Shortcodes anzeigen:

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

Vergessen Sie nicht, den Anzeigencode durch Ihren eigenen Anzeigencode zu ersetzen.

Sie können jetzt den [my_ad_code] Shortcode in Ihren WordPress-Beiträgen, Seiten und Sidebar-Widgets verwenden. WordPress führt automatisch die mit dem Shortcode verbundene Funktion aus und zeigt den Werbecode an.

Shortcodes vs. Gutenberg-Blöcke

Wir werden oft von Nutzern nach den Unterschieden zwischen Shortcodes und Gutenberg-Blöcken gefragt.

Grundsätzlich können Sie mit Blöcken dasselbe tun wie mit Shortcodes, aber auf eine benutzerfreundlichere Weise.

Anstatt dass Benutzer einen Shortcode für die Anzeige dynamischer Inhalte hinzufügen müssen, ermöglichen Blöcke das Hinzufügen dynamischer Inhalte in Beiträgen/Seiten mit einer intuitiveren Benutzeroberfläche. Viele beliebte WordPress-Plugins sind dazu übergegangen, Blöcke anstelle von Shortcodes zu verwenden, weil sie anfängerfreundlicher sind.

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 folgen, wie Sie benutzerdefinierte Gutenberg-Blöcke in WordPress erstellen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man einen Shortcode in WordPress einfügt. Vielleicht interessieren Sie sich auch für unsere Anleitung, wie Sie ein benutzerdefiniertes WordPress-Theme erstellen können, ohne Code zu schreiben, und für unsere Expertenauswahl der besten Drag-and-Drop-Plugins für WordPress-Seitenerstellung.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.