Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Hinweis der Redaktion: Wir erhalten eine Provision für Partnerlinks auf WPBeginner. Die Provisionen haben keinen Einfluss auf die Meinung oder Bewertung unserer Redakteure. Erfahre mehr über Redaktioneller Prozess.

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.

How to add a shortcode in WordPress

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.

Add a shortcode block

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.

Enter your shortcode

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.

Add a shortcode widget block

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.

Enter shortcode in widget block

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.

Add shortcode to classic editor

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.

Choosing a Template to Edit in the Full Site Editor

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.

Adding a Shortcode Block in the Full Site Editor

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.

Adding Code to WPCode

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

102 KommentareEine Antwort hinterlassen

  1. 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!

  2. 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?

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

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

    • WPBeginner Support says

      Thank you for pointing that out, it works as a good reminder to make sure you spell your shortcodes correctly :)

      Admin

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

      You would need to use the method for the theme files from this article and add it to your theme’s header file.

      Admin

  6. Tihomir says

    Hi All
    in one of my pages I am using this shortcode [product_category category=’jeans‘ number=’1000′ per_page=’1000′] . It shows 1000 products of the chosen category jeans. What I can add to this code to make this 1000 products appear same like on product category page or by with a load more button?

  7. Jose Rodriguez says

    English translation –> but something happens when I add the shortcode and then some text, it turns out that this text is inside the html of the shortcode in the frontend, how can I avoid that?

  8. loganathan says

    I am creating an own theme, the problem is that theme does no support shortcode. can anyone help me to enable shortcode functionality for my theme.

  9. Ihsan says

    thanks for sharing such a nice article..
    i want to know how we can use php and html both in short code… waiting for good response thanks…

  10. Melissa Lowe says

    I installed a Mailchimp for WordPress shortcode ..pasted it at the end of the text version of my document/article & no form was created & this is what it said…..MailChimp for WordPress error: There is no form with ID 0, perhaps it was deleted?

  11. Helena says

    Hi,
    I have a widget by the homepage sidebar from a multisite installation and want to have 1 widget (only one) from this sidebar working at the subsites.
    It is a text widget with a picture, this picture links to an online ebook.

    Do you think I can use this to have it done?

    Many thanks!

  12. Vinayak Ganiger says

    The wp form shortcode is not working in pages but it works fine in posts. My website is vinstechs.com. In my website page named Projects is their, in that the shortcode is not working.

    What’s the solution for this, please reply with solution.

  13. Meryl says

    I have a slightly more complex question.
    I’m using a theme with a theme options panel.
    I want to use a shortcode inside one of those options.
    However the output is just the [shortcode] text. Is there specific syntax I can use or does it differ from theme to theme? It’s taking forever to get answers from the theme dev.

  14. hirak das says

    Hi i am having a problem with [login_widget] shortcode.when i inserted this code to any page/post on wordpress i only get the text but not the login form…i am using login widget with shortcode plugin…please help…

  15. Armen says

    This doesn’t work if you’re trying to place another shortcode within the shortcode you’re creating.

    Say I had a shortcode like [jpshare] and I wanted to place it along with other stuff into another shortcode function like in this article to add to the posts, how would you do that?

    • Drew says

      It clearly stated the code goes into „functions.php“. If you’re not sure how to use the shortcode, it goes anything you add text.

  16. Ihatewordpress says

    Hello,
    As you can tell from my name I’m very frustrated right now with wordpress.
    >>This last part is simple, just add the [adsense] shortcode in the HTML or Visual views of the Post or Page content editor.<<
    Not even a tiny clue how to do that – would you be willing to expand on this? Thank you

    • WPBeginner Support says

      WordPress uses shortcodes to add functionality into posts and pages. Like in this tutorial if you wanted to display advertisement code, then you will create a shortcode for it. Once you have created a shortcode you can use it in your posts and pages. Create a new post or edit an existing one and add your shortcode with square brackets in the post content area, like [adsense].

      Admin

      • Brock says

        I installed Popup manager plugin for newsletter subscribers. I got the popup to appear by following your suggestion of putting the shortcode in a comment on my main page. This works but only if a person expands my first comment to read the entire thing. Where/how do I paste the shortcode to get the popup to appear when someone visits my page without requiring them to do anything else? I’m trying to find something in the template customization options but nothing is standing out.

  17. Patty says

    Please help me understand if this is using a shortcode plugin properly. I need to display the date of the last update to a post or page to stop Google structured errors. I am using default 2014 only with plugins. I found a shortcode plugin named „Last Updated Shortcode“ that seems to do what I need. I am wondering if this is what I do.

    I would install the plugin, and then activate the plugin. Then on the page/post I would Edit page/post, and at the bottom of the post (or anywhere else if I prefer) add the shortcode. So I would literally type [lastupdated] The last updated date should then appear, correct???

    And hopefully, Google will be happy and stop emailing notices of structured errors.

  18. Larry Leek says

    I’m guessing using the short codes for things like countdown timers is is only for wordpress.org or self hosted wp users correct?

  19. Anibal says

    Hi I’m having trouble with the short code [tpe mylang lang=’es, en‘] I know WP has recently changed this shortcode replacing the old [tp mylang=“yes“ lang=“es, en“ ] for the new one, but I’ve done the replacement and I still get to a 404 Nothing found error page, whenever I click on a link with this code. Any Ideas?

  20. Steve says

    I am having trouble figuring out how to add code comments to a page with just shortcode in it. I’ve tried HTML & PHP comment tags and when added the shortcode doesn’t work anymore. The reason I would like to comment the code is that I would like to document information about the shortcode in the page I call it from ( I may not be the site admin forever).

    • WPBeginner Support says

      WordPress will strip out PHP or HTML comments in post editor. If you were using Edit Flow, then you could leave a note below the post. Right now you can switch to Text editor and leave HTML comment, but as soon as some user views the post in visual editor it will be stripped out again.

      Admin

      • Steve says

        It strips out the comments AND puts in a blank line for each comment. I put the comments below the shortcode and that works fine.
        Thanks for helping me understand what was going on.

  21. Michael says

    When I add shortcode to posts, whether it be in the middle of an article or at the end, the actual element always appears at the top of the post, any idea why?

  22. WPBeginner Staff says

    Simply copy [rx_aeolus_three_cols] and paste it in a WordPress page. Save your page and then preview it. However, you will first have to create your portfolio in the plugin. Otherwise you will not see anything, because there is nothing for the plugin to display.

  23. Usha says

    I have downloaded a plug-in ‚Aeolus portfolio‘ for the WordPress 3.9.2 running Twenty Eleven theme. I have been given the following shortcodes in the plug-in setting:

    [rx_aeolus_three_cols]-Displays all portfolio as three columns.

    [rx_aeolus_two_cols]-Displays all portfolio as two columns.

    [rx_aeolus_one_col]-Displays all portfolio as one column.

    Can anyone help as to how these short code can be incorporated in a page. I am new to WP plugins and badly need help.

    Thanks
    Usha

  24. Dan says

    Thanks! This thread helped me a lot.

    Just in case someone else lands in here and need to use a more complex HTML/PHP code structure inside a shortcode, this is an example using some aditional options from the WordPress Shortcodes API documentation:

    Place this (and modify as needed) inside your functions.php:

    http://pastie.org/9454401

    Then you just use this shortcode inside your WordPress content :)

    [mycustomshortcode]

    Greetings!

  25. Aymen Benzarti says

    HI
    I’m beginner and this is my first time with wordpress
    so the first question when i tried this tutorial is in which file i have to write this code ?

  26. Nidesh says

    Hi,

    Could you please tell me whether i have to put short codes to a particular page if i want any particular plugin to be displayed in that particular page.

    E.g. I’ve installed Collabpress plugin. And i don’t see it’s UI in the front end of my site. So do i have to insert any shortcode to a page for it to be displayed?

  27. Amber T says

    I am just a little confused… where am I embedding this shortcode.

    I have a columns plugin that provided the shortcode with a click of a buton, not sure if I have to take the code and embed it in my html.

    please help.

    thanks in advance!

  28. Carol Manser says

    Really? Easy? Simple? This website is great but it says it is for beginners. I’ve been using WordPress for 2 years and yet I did not understand it at all. It’s quite annoying the way geeks always bang on about how easy something is and then write something totally incomprehensible to ordinary humans – just like every Math teacher I ever had.

    OK, write an article that can only be understood by geeks – fine, but please don’t keep telling me how easy it is

    output? string? content editor – where is it? define a function? I wish you would because I don’t know what it is.

    „This function is pretty straightforward – it just returns my Google Adsense code as a string“ –
    a string of what? etc etc. Just saying….

    • WPBeginner Support says

      We totally agree with you that sometimes when writing we may feel that we have explained everything clearly for beginners, but a beginner level user may still not be able to understand it. This is why we have comments and we will be happy to explain it to you more :)

      A shortcode is a short+code. WordPress allows you to generate shortcodes for your programing code blocks called functions. Since a user can not write programming code in the Post Editor when writing a new post. The shortcodes provide users a way to add those programming codes into a post without writing the full code in post editor.

      When WordPress finds a shortcode in a post like this:

      [my_shortcode]

      It then executes the programming code associated with that particular shortcode.

      The example given in the article above, creates a function get_adsense. When this function is executed it outputs the adsense code. We hope this explains it for you. Let us know if you have any more questions.

      Admin

  29. Alan Murray says

    Can I use a shortcode on a Standalone HTML page to link to a page on my blog?

    If so how do I embed it? Does the file need to be a PHP file?

    I can’t seem to find anywhere on the net providing information on using sortcode outside WordPress pages or posts.

  30. Luke Ward says

    Hello, thank you for this, it’s helped a lot.

    However I would like to know how to add more than one adsense in as a shortcode.
    eg [adsense1] – displays one advert [adsense2] displays a different advert.

    Thanks!

  31. Paul says

    Just came across this as I’m looking to add my own shortcodes, I can understand the function part of it, but which document do you include the „hook up“

    „add_shortcode(‚adsense‘, ‚get_adsense‘); line“

    that would be helpful to me

    Thanks

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.