Sie möchten Shortcodes in WordPress hinzufügen, wissen aber nicht, wie Sie anfangen sollen?
Shortcodes sind eine einfache Möglichkeit, dynamische Inhalte zu Ihren WordPress-Beiträgen, -Seiten und -Sidebars hinzuzufügen. Viele WordPress-Plugins und -Themes verwenden Shortcodes, um spezielle Inhalte wie Kontaktformulare, Bildergalerien, Schieberegler und mehr hinzuzufügen.
In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach einen Shortcode in WordPress hinzufügen können. Wir zeigen Ihnen auch, wie Sie Ihre eigenen benutzerdefinierten Shortcodes in WordPress erstellen können.
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.
- Adding a Shortcode in WordPress Posts and Pages
- Adding a Shortcode in WordPress Sidebar Widgets
- Adding a Shortcode in Old WordPress Classic Editor
- Adding a Shortcode in WordPress Theme Files
- Adding a Shortcode in Block Theme Files With the Full-Site Editor
- Creating Your Own Custom Shortcode in WordPress
- Shortcodes vs. Gutenberg Blocks
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, werden Sie es einfacher finden, Shortcodes in Ihren WordPress-Theme-Dateien mit dem vollständigen Site-Editor hinzuzufü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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Andrew Wilson says
Hi Guys,
Is it possible with this plugin to create a unique QR Code for users that sign up to your website?
i.e. a person registers on the website, and as part of that process the back-end creates a unique QR Code for that user which if scanned by a third party takes them to their profile on the website?
WPBeginner Comments says
You can create QR codes using this guide:
https://www.wpbeginner.com/plugins/how-to-generate-and-add-qr-codes-in-wordpress/
To create it automatically in the way you mentioned may require custom code.
Moinuddin Waheed says
This is very helpful for making our own custom short codes.
I have been using short codes for a while and have thought of making my own short codes to use but was not aware about the process.
I have a bit of coding knowledge and can easily make shortcodes through php functions.
Thanks for the guide.
WPBeginner Support says
You’re welcome, glad our guide was helpful
Admin
Jiří Vaněk says
Thank you for the detailed instructions. I was able to add the shortcode to Gutenberg but could not use it as a php code. At the same time, it is evidently that simple. A bit smarter again thanks to wpbeginner.
Mohammed says
In Example2 How did you define this shortcode ‚my_ad_code‘ thought you didn’t define it as a function?
WPBeginner Support says
That is added with the code add_shortcode at the bottom of the example
Admin
Mohammed says
❤️❤️
Appreciate for the best Article
Josh says
One picture says „greatings“ instead of „greetings“
WPBeginner Support says
Thank you for pointing that out, it works as a good reminder to make sure you spell your shortcodes correctly
Admin
Maya says
Thanks for sharing such a detailed article keep up the good work!
WPBeginner Support says
You’re welcome, glad you found our guide helpful!
Admin
abuzar says
your guidence is very easy to learn. thanks you
WPBeginner Support says
You’re welcome!
Admin
Hugh says
Thanks for the great article. Works like a charm. However, although it is explained on the page link provided in the article, it may have been helpful to many readers if you had reiterated that to create shortcodes yourself (‚How to Create Your Own Custom Shortcode‘ section of the article), you simply add the example code provided or your own code to the theme’s (or child theme’s) ‚functions.php‘ file. Thanks again!
WPBeginner Support says
Thank you for that feedback!
Admin
Hafed benchellali says
Thank you for this great article!
WPBeginner Support says
You’re welcome!
Admin
Susan Benfatto says
Thank you for your tutorial, it was very useful
WPBeginner Support says
Glad it was helpful
Admin
Rohmah Azim says
Hi
Can you tell me how I can add shortcode to my header?
WPBeginner Support says
You would need to use the method for the theme files from this article and add it to your theme’s header file.
Admin