{"id":52332,"date":"2022-03-10T07:00:44","date_gmt":"2022-03-10T15:00:44","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=52332"},"modified":"2025-01-16T17:38:27","modified_gmt":"2025-01-17T01:38:27","slug":"wordpress-shortcodes-101","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/","title":{"rendered":"Eine Einf\u00fchrung in WordPress Shortcodes (mit Beispielen)"},"content":{"rendered":"\n<p>WordPress-Shortcodes k\u00f6nnen Ihre Website einfach mit ansprechenden, interaktiven Elementen bereichern, die \u00fcber Beitr\u00e4ge und Seiten hinweg wiederholt werden k\u00f6nnen. Beispiele hierf\u00fcr sind <a href=\"https:\/\/www.dreamhost.com\/blog\/monetize-your-wordpress-image-gallery\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bildergalerien<\/a>, Kontaktformulare und Wiedergabelisten, um Ihren Inhalt n\u00fctzlicher und ansprechender zu machen.<\/p>\n\n\n\n<p>In diesem Beitrag werden wir WordPress-Shortcodes besprechen und warum sie hilfreich sind. Dann werden wir vier Methoden vorstellen, um Shortcodes auf Ihrer Website zu verwenden. Lassen Sie uns anfangen!<\/p>\n\n\n\n<h2 id=\"h-wordpress-shortcodes-101\" class=\"wp-block-heading\"><b>WordPress Shortcodes 101<\/b><\/h2>\n\n\n\n<p>WordPress-Shortcodes sind Schnipsel, die schnell verschiedene Dateien, Objekte oder Inhalte in Ihre Website einbetten. Es handelt sich um einzelne Zeilen HTML-Code, die interaktive Postelemente enthalten k\u00f6nnen.<\/p>\n\n\n\n<p>Ein Shortcode sieht so aus, eingebettet in zwei eckige Klammern:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[exampleshortcode]<\/pre>\n\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/blog\/history-of-wordpress\/?utm_campaign=coschedule&amp;utm_source=facebook_page&amp;utm_medium=DreamHost\" target=\"_blank\" rel=\"noopener noreferrer\">Shortcodes wurden 2008 eingef\u00fchrt<\/a>, um komplexere Beitr\u00e4ge und Seiten einfacher zu erstellen. Sie bieten eine einfache M\u00f6glichkeit, dynamische Inhaltelemente auf Ihrer Website einzuf\u00fcgen und zu laden.<\/p>\n\n\n\n<p>Beispielsweise m\u00f6chten Sie <a href=\"https:\/\/www.dreamhost.com\/wordpress\/guide-to-wp-front-page\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ihre WordPress Startseite anpassen<\/a>, indem Sie eine Google-Karte einbetten, um Ihren Einzelhandelsstandort anzuzeigen. Sie k\u00f6nnten sogar ein Einf\u00fchrungsvideo mit einem Shortcode hinzuf\u00fcgen:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-33076 lazyload\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes-1.jpg\" alt=\"WordPress Video-Shortcode\" width=\"900\" height=\"294\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes-1-300x98.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes-1-768x251.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-600x196.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-730x238.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-784x256.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-877x286.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/294;\" \/><\/pre>\n\n\n\n<p>Website-Besitzer verwenden normalerweise Shortcodes im Text von Beitr\u00e4gen, Seiten und benutzerdefinierten Beitragstypen. Gl\u00fccklicherweise ist die Verwendung von Shortcodes mit der Weiterentwicklung des Gutenberg-Blockeditors noch benutzerfreundlicher geworden. Wir werden dies sp\u00e4ter im Artikel behandeln.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n \/wp:shortcode &#8211;&gt;\n\n\n<h2 id=\"h-why-you-might-consider-using-wordpress-shortcodes\" class=\"wp-block-heading\"><b>Warum Sie die Verwendung von WordPress-Shortcodes in Betracht ziehen sollten<\/b><\/h2>\n\n\n\n<p>Es gibt verschiedene Gr\u00fcnde, warum Sie WordPress-Shortcodes verwenden m\u00f6chten. Zum einen sind sie oft einfacher Ihrer Seite hinzuzuf\u00fcgen, als einen langen HTML-Code zu lernen und zu schreiben.<\/p>\n\n\n\n<p>Au\u00dferdem k\u00f6nnen Shortcodes Ihre Inhalte sauber und organisiert halten. Sie nehmen nicht so viel Platz im HTML Ihres gesamten Beitrags ein. Dies kann Ihnen helfen, Fehler leicht zu erkennen, wenn Sie den Code-Editor verwenden.<\/p>\n\n\n\n<p>Shortcodes sind ebenfalls wiederverwendbar. Sie m\u00fcssen nicht manuell dieselben Funktionen, wie einen Aufruf zum Handeln (CTA) oder Social-Media-Buttons, in jeden Beitrag einf\u00fcgen. Stattdessen k\u00f6nnen Sie einfach Ihren Shortcode einf\u00fcgen.<\/p>\n\n\n\n<h2 id=\"h-wordpress-shortcodes-101-4-ways-to-use-these-snippets\" class=\"wp-block-heading\"><b>WordPress Shortcodes 101 (4 Wege, diese Schnipsel zu verwenden)<\/b><\/h2>\n\n\n\n<p>Es gibt zwei grundlegende Typen von Shortcodes, mit denen Sie sich vertraut machen sollten: selbstschlie\u00dfende und einschlie\u00dfende. Selbstschlie\u00dfende sind eigenst\u00e4ndig und ben\u00f6tigen keine schlie\u00dfenden Tags:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[myshortcode]<\/pre>\n\n\n\n<p>Umschlie\u00dfende Shortcodes umschlie\u00dfen einen bestimmten Inhaltsteil, um ihn zu modifizieren. Daher m\u00fcssen umschlie\u00dfende Shortcodes manuell geschlossen werden. Sie sehen typischerweise so aus:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[myshortcode] Inhalt [\/myshortcode]<\/pre>\n\n\n\n<p>Sie k\u00f6nnen auch die Eigenschaften von Shortcodes mit verschiedenen Attributen \u00e4ndern. Diese werden beeinflussen, wie das Element im Frontend angezeigt wird.<\/p>\n\n\n\n<p>Zum Beispiel k\u00f6nnten Sie die Gr\u00f6\u00dfe eines Galerie-Shortcodes \u00e4ndern, indem Sie ein Gr\u00f6\u00dfenattribut hinzuf\u00fcgen:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[gallery id=\"123\" size=\"medium\"]\u200b\u200b<\/pre>\n\n\n\n<p>Wenn Sie im <a href=\"https:\/\/wordpress.org\/plugins\/search\/shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Plugin Directory<\/a> st\u00f6bern, werden Sie feststellen, dass es viele M\u00f6glichkeiten gibt, Shortcodes auf Ihrer WordPress-Seite zu verwenden. Hier sind vier verschiedene Optionen!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-wordpress-default-shortcodes\"><b>1. WordPress Standard-Shortcodes<\/b><\/h3>\n\n\n\n<p>WordPress kommt mit <a href=\"https:\/\/developer.wordpress.org\/plugins\/shortcodes\/#built-in-shortcodes\" target=\"_blank\" rel=\"noopener noreferrer\">grundlegenden integrierten Shortcodes<\/a>. Diese Snippets erm\u00f6glichen es Ihnen, zus\u00e4tzliche Medien direkt in Ihre Beitr\u00e4ge einzubetten.<\/p>\n\n\n\n<p>Diese Shortcodes umfassen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>[caption]:<\/b> Umrahmt Inhalte mit Bildunterschriften.<\/li>\n\n\n\n<li><b>[gallery]:<\/b> Zeigt Bildergalerien an.<\/li>\n\n\n\n<li><b>[audio]:<\/b> Bindet Audiodateien ein und spielt sie ab.<\/li>\n\n\n\n<li><b>[video]:<\/b> Bindet Videodateien ein und spielt sie ab.<\/li>\n\n\n\n<li><b>[playlist]:<\/b> Zeigt eine Sammlung von Audio- oder Videodateien an.<\/li>\n\n\n\n<li><b>[embed]:<\/b> Umrahmt eingebettete Elemente.<\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p>Sie k\u00f6nnen auch eine Vielzahl zus\u00e4tzlicher Shortcodes \u00fcber das <a href=\"https:\/\/jetpack.com\/support\/shortcode-embeds\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jetpack Plugin<\/a> aktivieren.<\/p>\n\n\n\n<p>\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\t20 unglaublich beliebte WordPress-Plugins, die Sie kennen m\u00fcssen\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/die-beliebtesten-wordpress-plugins\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n<\/p>\n\n\n\n<p>Zuerst stellen Sie sicher, dass das Jetpack-Modul aktiviert ist, indem Sie in Ihrem WordPress Armaturenbrett auf <i>Jetpack <\/i>klicken:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"396\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes15.jpg\" alt=\"Jetpack\" class=\"wp-image-33089 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes15-300x132.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes15-768x338.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-600x264.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-730x321.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-784x345.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-877x386.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/396;\" \/><\/figure><\/div>\n\n\n<p>Dann w\u00e4hlen Sie <i>Einstellungen<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"250\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes9.jpg\" alt=\"Jetpack\" class=\"wp-image-33083 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes9-300x83.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes9-768x213.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-600x167.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-730x203.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-784x218.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-877x244.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/250;\" \/><\/figure><\/div>\n\n\n<p>Gehen Sie zur Registerkarte <i>Schreiben<\/i>, scrollen Sie nach unten zum Abschnitt <i>Verfassen<\/i> und aktivieren Sie <i>Komponieren mit Shortcodes, um Medien von beliebten Seiten einzubinden<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"321\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes12.jpg\" alt=\"Jetpack\" class=\"wp-image-33086 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes12-300x107.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes12-768x274.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-600x214.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-730x260.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-784x280.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-877x313.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/321;\" \/><\/figure><\/div>\n\n\n<p>Sobald Sie diese Option umgeschaltet haben, k\u00f6nnen Sie den [tweet] Shortcode verwenden, um einen bestimmten Tweet in Ihren Beitrag einzubetten. Kopieren Sie einfach die URL des Tweets und f\u00fcgen Sie sie in Ihre Shortcode-Klammern ein:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"230\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes14.jpg\" alt=\"Tweet-Shortcode\" class=\"wp-image-33088 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes14-300x77.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes14-768x196.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-600x153.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-730x187.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-784x200.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-877x224.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/230;\" \/><\/figure><\/div>\n\n\n<p>Dies wird den verlinkten Tweet in Ihren Beitrag einbetten. Das Ergebnis sieht so aus:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"750\" height=\"798\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes7.jpg\" alt=\"WordPress Twitter shortcode\" class=\"wp-image-33081 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes7.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes7-282x300.jpg 282w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes7-600x638.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes7-730x777.jpg.webp 730w\" data-sizes=\"(max-width: 750px) 100vw, 750px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 750px; --smush-placeholder-aspect-ratio: 750\/798;\" \/><\/figure><\/div>\n\n\n<p>Sie k\u00f6nnen diese zus\u00e4tzlichen Kurzcodes verwenden, um eine Vielzahl anderer Medien in Ihren Inhalt einzubetten, einschlie\u00dflich Spotify-Playlisten, Google Docs oder Rezepte.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-gutenberg-shortcodes\"><b>2. Gutenberg Shortcodes<\/b><\/h3>\n\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-gutenberg-for-designers\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg-Bl\u00f6cke<\/a> machen das Hinzuf\u00fcgen von dynamischem Inhalt in Ihre Beitr\u00e4ge noch einfacher. Der Block-Editor erm\u00f6glicht es Ihnen, einzelne Abschnitte leicht zu \u00e4ndern und block-spezifische Einstellungen und Formatierungsregeln anzuwenden, ohne Plugins zu verwenden.<\/p>\n\n\n\n<p>Der <a href=\"https:\/\/www.dreamhost.com\/blog\/most-exciting-features-gutenberg-wordpress-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg-Editor hat sich weiterentwickelt<\/a>, um das Zusammenstellen von WordPress-Beitr\u00e4gen und -Seiten noch einfacher zu machen. Er bietet eine benutzerfreundliche M\u00f6glichkeit, Shortcodes einzuf\u00fcgen. Die meisten Gutenberg-Bl\u00f6cke ersetzen die Standard-Shortcodes, aber der Block-Editor hat sich als ein wenig bewegliches Ziel erwiesen, daher ist es eine gute Idee, sich mit der Verwendung von Shortcodes f\u00fcr Funktionalit\u00e4t vertraut zu machen.<\/p>\n\n\n\n<p>Zum Beispiel k\u00f6nnten Sie einen Gutenberg-Block verwenden, um den Tweet aus unserem vorherigen Beispiel anstelle eines Shortcodes einzubetten. Sie m\u00fcssen nur auf das <i>+ <\/i>Symbol klicken und den <i>Twitter <\/i>Block ausw\u00e4hlen:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"377\" height=\"356\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes4.jpg\" alt=\"Twitter-Block in WordPress\" class=\"wp-image-33079 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes4.jpg.webp 377w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes4-300x283.jpg 300w\" data-sizes=\"(max-width: 377px) 100vw, 377px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 377px; --smush-placeholder-aspect-ratio: 377\/356;\" \/><\/figure><\/div>\n\n\n<p>Diese Methode erm\u00f6glicht es Ihnen, die URL des Tweets direkt in den Block einzuf\u00fcgen, ohne den Shortcode in eckigen Klammern zu schreiben.<\/p>\n\n\n\n<p>\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tIhr vollst\u00e4ndiger Leitfaden zur vollst\u00e4ndigen Seitengestaltung von WordPress\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-full-site-editing\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n<\/p>\n\n\n\n<p>Dar\u00fcber hinaus verf\u00fcgt der Gutenberg Block-Editor \u00fcber einen <i>Shortcode <\/i>Block. Es erm\u00f6glicht Ihnen, Ihre Snippets im visuellen Editor zu verwalten, ohne den Code direkt in HTML zu schreiben:<\/p>\n\n\n\n<p>Gutenberg erm\u00f6glicht es Ihnen auch, wiederverwendbare Bl\u00f6cke zu erstellen, die n\u00fctzlich sein k\u00f6nnen, um dieselben Inhaltsausschnitte in Ihren Beitr\u00e4gen zu verwenden. Wir k\u00f6nnen dieses Konzept mit einem Social-Media-CTA demonstrieren, den Sie am Ende von Beitr\u00e4gen verwenden k\u00f6nnten, die Sie auf Ihrer Website schreiben.<\/p>\n\n\n\n<p>Sie k\u00f6nnen beginnen, indem Sie den <i>Shortcode<\/i>-Block aus dem Popup ausw\u00e4hlen:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"265\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes11.jpg\" alt=\"Gutenberg Shortcode-Block\" class=\"wp-image-33085 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes11-300x88.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes11-768x226.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-600x177.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-730x215.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-784x231.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-877x258.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/265;\" \/><\/figure><\/div>\n\n\n<p>Dann, nachdem Sie Ihren CTA-Snippet hinzugef\u00fcgt haben, klicken Sie auf die drei Punkte f\u00fcr ein Optionsmen\u00fc und w\u00e4hlen Sie <i>Add to Reusabl<\/i>e <i>blocks<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1348\" height=\"590\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes8.jpg\" alt=\"WordPress wiederverwendbare Bl\u00f6cke\" class=\"wp-image-33082 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8.jpg.webp 1348w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes8-300x131.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes8-1024x448.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes8-768x336.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-600x263.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-1200x525.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-730x320.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-784x343.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-877x384.jpg.webp 877w\" data-sizes=\"(max-width: 1348px) 100vw, 1348px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1348px; --smush-placeholder-aspect-ratio: 1348\/590;\" \/><\/figure><\/div>\n\n\n<p>Sie k\u00f6nnen dann den wiederverwendbaren Block benennen:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"759\" height=\"473\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes13.jpg\" alt=\"Benennung wiederverwendbarer Bl\u00f6cke\" class=\"wp-image-33087 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes13.jpg.webp 759w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes13-300x187.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes13-600x374.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes13-730x455.jpg.webp 730w\" data-sizes=\"(max-width: 759px) 100vw, 759px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 759px; --smush-placeholder-aspect-ratio: 759\/473;\" \/><\/figure><\/div>\n\n\n<p>Ihr Snippet wird dann unter dem wiederverwendbaren Tab gespeichert, sodass Sie es \u00fcberall auf Ihrer Website verwenden k\u00f6nnen, einschlie\u00dflich Beitr\u00e4ge, Seiten und Widget-Bereiche.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-plugin-shortcodes\"><b>3. Plugin Shortcodes<\/b><\/h3>\n\n\n\n<p>Verschiedene WordPress-Plugins werden auch mit eigenen Shortcodes geliefert. Einige dieser Tools k\u00f6nnen Ihnen sogar helfen, anpassbare Parameter zu vorhandenen Standard-Shortcodes hinzuzuf\u00fcgen.<\/p>\n\n\n\n<p>Zum Beispiel k\u00f6nnen Sie fertige Shortcodes f\u00fcr Kontaktformulare vom <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/participants-database\/\" target=\"_blank\" rel=\"noopener noreferrer\">Participants Database<\/a> Plugin erhalten. Sie k\u00f6nnten einfach [pdb_signup] eingeben, um ein Anmeldeformular in einen Beitrag einzuf\u00fcgen:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1000\" height=\"228\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes6.jpg\" alt=\"Shortcode-Formularblock in WordPress\" class=\"wp-image-33080 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6.jpg.webp 1000w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes6-300x68.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes6-768x175.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-600x137.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-730x166.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-784x179.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-877x200.jpg.webp 877w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1000px; --smush-placeholder-aspect-ratio: 1000\/228;\" \/><\/figure><\/div>\n\n\n<p>Das Formular wird dann im Frontend angezeigt:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"687\" height=\"436\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes10.jpg\" alt=\"Ein Webformular in WordPress erstellen\" class=\"wp-image-33084 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes10.jpg.webp 687w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes10-300x190.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes10-600x381.jpg.webp 600w\" data-sizes=\"(max-width: 687px) 100vw, 687px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 687px; --smush-placeholder-aspect-ratio: 687\/436;\" \/><\/figure><\/div>\n\n\n<p>Wenn dies f\u00fcr Sie interessant ist, k\u00f6nnen Sie mehr \u00fcber <a href=\"https:\/\/www.dreamhost.com\/blog\/best-wordpress-plugins-you-dont-know-about\/\" target=\"_blank\" rel=\"noopener noreferrer\">andere WordPress Plugins<\/a> lesen, die Ihre Website verbessern k\u00f6nnen. Dazu geh\u00f6rt das <a href=\"https:\/\/wordpress.org\/plugins\/enhanced-media-library\/\" target=\"_blank\" rel=\"noopener noreferrer\">Enhanced Media Library Plugin<\/a>, das Ihnen helfen kann, die Parameter f\u00fcr die integrierten Playlist- und Gallery-Shortcodes anzupassen.<\/p>\n\n\n\n<p>Denken Sie jedoch daran, Ihre WordPress-Shortcode-Plugins aktuell zu halten. Dadurch kann sichergestellt werden, dass Ihre Website <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wordpress-website-geschwindigkeit-optimieren\/\" target=\"_blank\" rel=\"noopener noreferrer\">so schnell wie m\u00f6glich<\/a> l\u00e4uft und nicht anf\u00e4llig f\u00fcr Sicherheitsbedrohungen ist.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-custom-shortcodes\"><b>4. Benutzerdefinierte Shortcodes<\/b><\/h3>\n\n\n\n<p>Wenn Sie noch mehr Funktionalit\u00e4t von Shortcodes ben\u00f6tigen, ist es m\u00f6glich, benutzerdefinierte zu erstellen. Sie k\u00f6nnen wertvolle Werkzeuge f\u00fcr Entwickler sein, die darauf abzielen, die f\u00fcr wiederholende Codierung aufgewendete Zeit zu reduzieren.<\/p>\n\n\n\n<p>Sie sollten beachten, dass das Erstellen benutzerdefinierter Shortcodes einige technische Kenntnisse erfordert. Wenn Sie sich mit dem Programmieren nicht sicher f\u00fchlen, m\u00f6chten Sie vielleicht bei einer der anderen von uns erw\u00e4hnten Strategien bleiben.<\/p>\n\n\n\n<p>Wenn Sie diese Methode ausprobieren m\u00f6chten, erw\u00e4gen Sie die Verwendung eines <a href=\"https:\/\/generatewp.com\/shortcodes\/\" target=\"_blank\" rel=\"noopener noreferrer\">Generators wie GenerateWP<\/a>, um Ihnen beim Formatieren Ihres Codes von Grund auf zu helfen. Sie k\u00f6nnen verschiedene Attributfelder ausf\u00fcllen, um das Erscheinungsbild des Elements nach Ihrem Geschmack zu \u00e4ndern.<\/p>\n\n\n\n<p>Sie k\u00f6nnen dann diese Shortcodes mit der <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">add_shortcode Funktion<\/a> implementieren. In Aktion wird es so aussehen:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">add_shortcode( string $tag, callable $callback )<\/pre>\n\n\n\n<p>Wenn Sie sich jedoch nicht wohl dabei f\u00fchlen, einen benutzerdefinierten Shortcode von Grund auf neu zu erstellen, gibt es einen anderen Weg! Sie k\u00f6nnen sich an unser <a href=\"https:\/\/www.dreamhost.com\/de\/professionelle-dienste\/entwicklung\/\" target=\"_blank\" rel=\"noopener noreferrer\">Team f\u00fcr benutzerdefinierte Webentwicklung<\/a> wenden, und wir k\u00f6nnen Ihnen helfen:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1878\" height=\"742\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3.jpg\" alt=\"DreamHost Pro Services - WordPress-Website-Design\" class=\"wp-image-33078 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3.jpg.webp 1878w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-300x119.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-1024x405.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-768x303.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-1536x607.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-600x237.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1200x474.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-730x288.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1460x577.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-784x310.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1568x620.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-877x347.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1754x693.jpg.webp 1754w\" data-sizes=\"(max-width: 1878px) 100vw, 1878px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1878px; --smush-placeholder-aspect-ratio: 1878\/742;\" \/><\/figure><\/div>\n\n\n<p>Mit den DreamHost Pro Services m\u00fcssen Sie nur eine Anfrage zur Webentwicklung ausf\u00fcllen. Wir stellen Ihnen einige einfache Fragen zu Ihrer Website und Ihren Anforderungen. Danach k\u00f6nnen wir mit der Implementierung Ihrer \u00c4nderungen an einer gestagten Version Ihrer Website beginnen. Sobald Sie die letzten Anpassungen genehmigt haben, k\u00f6nnen wir den neuen Code auf Ihre Live-Website anwenden!<\/p>\n\n\n\n<h2 id=\"h-use-wordpress-shortcodes-to-enhance-your-content\" class=\"wp-block-heading\"><b>Verwenden Sie WordPress-Shortcodes, um Ihren Inhalt zu verbessern<\/b><\/h2>\n\n\n\n<p>WordPress-Shortcodes k\u00f6nnen den Inhalt Ihrer Website mit ansprechenden Funktionen f\u00fcr Besucher verbessern. Sie k\u00f6nnen sicherstellen, dass Leser mit Ihrer Website interagieren und immer wieder zur\u00fcckkehren.<\/p>\n\n\n\n<p>In diesem Beitrag haben wir vier Methoden beschrieben, um WordPress-Shortcodes auf Ihrer Website zu verwenden:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>WordPress Standard-Shortcodes<\/li>\n\n\n\n<li>Gutenberg-Shortcodes<\/li>\n\n\n\n<li>Plugin-Shortcodes<\/li>\n\n\n\n<li>Benutzerdefinierte Shortcodes<\/li>\n\n\n\n\n<\/ol>\n\n\n\n<p>Wenn Sie das Gef\u00fchl haben, dass Sie nicht \u00fcber die technischen Kenntnisse oder die Zeit verf\u00fcgen, um Shortcodes oder Bl\u00f6cke zu schreiben, machen Sie sich keine Sorgen! Sie k\u00f6nnen unsere <a href=\"https:\/\/www.dreamhost.com\/de\/professionelle-dienste\/entwicklung\/\" target=\"_blank\" rel=\"noopener noreferrer\">Website-Entwicklung Pro Services<\/a> besuchen, um zu erfahren, wie wir Ihre Website mit hochwertigem Code anpassen k\u00f6nnen.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"200\" height=\"202\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/07\/CTA-Customer-Spotlight-2.png\" alt=\"DreamHost individuelle Website-Entwicklungsdienste\" class=\"wp-image-25383 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 200px; --smush-placeholder-aspect-ratio: 200\/202;\" \/><\/figure><\/div>\n\n\n<p>\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Sie tr\u00e4umen es, wir programmieren es\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Nutzen Sie \u00fcber 20 Jahre Programmiererfahrung, wenn Sie sich f\u00fcr unseren Webentwicklungsdienst entscheiden. Teilen Sie uns einfach mit, was Sie f\u00fcr Ihre Website w\u00fcnschen \u2014 wir k\u00fcmmern uns um den Rest.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/de\/professionelle-dienste\/entwicklung\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr erfahren                    <\/a>\n\n  <\/div>\n<\/div>\n<\/p>\n\n\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>WordPress-Shortcodes k\u00f6nnen Ihre Website leicht mit ansprechenden, interaktiven Elementen bereichern, die in Beitr\u00e4gen und Seiten wiederholt werden k\u00f6nnen. Beispiele hierf\u00fcr sind Bildergalerien, Kontaktformulare und Wiedergabelisten, um Ihre Inhalte n\u00fctzlicher und ansprechender zu gestalten. In diesem Beitrag werden wir WordPress-Shortcodes diskutieren und warum sie hilfreich sind. Anschlie\u00dfend werden wir vier Methoden vorstellen, um zu beginnen, [\u2026]<\/p>\n","protected":false},"author":1060,"featured_media":33073,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-wordpress-shortcodes-101\",\"WordPress Shortcodes 101\"],[\"h-why-you-might-consider-using-wordpress-shortcodes\",\"Warum Sie die Verwendung von WordPress-Shortcodes in Betracht ziehen sollten\"],[\"h-wordpress-shortcodes-101-4-ways-to-use-these-snippets\",\"WordPress Shortcodes 101 (4 Wege, diese Schnipsel zu verwenden)\"],[\"h-use-wordpress-shortcodes-to-enhance-your-content\",\"Verwenden Sie WordPress-Shortcodes, um Ihren Inhalt zu verbessern\"]]","hide_toc":false,"footnotes":""},"categories":[14501,14519,14511],"tags":[],"class_list":["post-52332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dreampress-de","category-erste-schritte-de","category-wordpress-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Eine Einf\u00fchrung in WordPress Shortcodes (mit Beispielen) - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Eine Einf\u00fchrung in WordPress Shortcodes (mit Beispielen)\" \/>\n<meta property=\"og:description\" content=\"WordPress-Shortcodes k\u00f6nnen Ihre Website leicht mit ansprechenden, interaktiven Elementen bereichern, die in Beitr\u00e4gen und Seiten wiederholt werden k\u00f6nnen. Beispiele hierf\u00fcr sind Bildergalerien, Kontaktformulare und Wiedergabelisten, um Ihre Inhalte n\u00fctzlicher und ansprechender zu gestalten. In diesem Beitrag werden wir WordPress-Shortcodes diskutieren und warum sie hilfreich sind. Anschlie\u00dfend werden wir vier Methoden vorstellen, um zu beginnen, [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-10T15:00:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-17T01:38:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"598\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian Glassman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Glassman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Eine Einf\u00fchrung in WordPress Shortcodes (mit Beispielen) - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/","og_locale":"en_US","og_type":"article","og_title":"Eine Einf\u00fchrung in WordPress Shortcodes (mit Beispielen)","og_description":"WordPress-Shortcodes k\u00f6nnen Ihre Website leicht mit ansprechenden, interaktiven Elementen bereichern, die in Beitr\u00e4gen und Seiten wiederholt werden k\u00f6nnen. Beispiele hierf\u00fcr sind Bildergalerien, Kontaktformulare und Wiedergabelisten, um Ihre Inhalte n\u00fctzlicher und ansprechender zu gestalten. In diesem Beitrag werden wir WordPress-Shortcodes diskutieren und warum sie hilfreich sind. Anschlie\u00dfend werden wir vier Methoden vorstellen, um zu beginnen, [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-03-10T15:00:44+00:00","article_modified_time":"2025-01-17T01:38:27+00:00","og_image":[{"width":900,"height":598,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","type":"image\/jpeg"}],"author":"Brian Glassman","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Brian Glassman","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/"},"author":{"name":"Brian Glassman","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de"},"headline":"Eine Einf\u00fchrung in WordPress Shortcodes (mit Beispielen)","datePublished":"2022-03-10T15:00:44+00:00","dateModified":"2025-01-17T01:38:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/"},"wordCount":1452,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","articleSection":["DreamPress","Erste Schritte","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/","name":"Eine Einf\u00fchrung in WordPress Shortcodes (mit Beispielen) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","datePublished":"2022-03-10T15:00:44+00:00","dateModified":"2025-01-17T01:38:27+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","width":900,"height":598,"caption":"guide to WordPress Shortcodes"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wordpress-shortcodes-101\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Eine Einf\u00fchrung in WordPress Shortcodes (mit Beispielen)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de","name":"Brian Glassman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","caption":"Brian Glassman"},"description":"SEO leader and content marketer, Brian is DreamHost\u2019s Director of SEO. Based in Chicago, Brian enjoys the local health food scene (deep dish pizza, Italian beef sandwiches) and famous year-round warm weather. Follow Brian on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/brianglassmandesign\/"],"url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/brian\/"}]}},"lang":"de","translations":{"de":52332,"es":33096,"en":33069,"pl":55006,"uk":55028,"pt":55062,"ru":55116,"it":68356,"fr":70366,"nl":70395},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1060"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=52332"}],"version-history":[{"count":5,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52332\/revisions"}],"predecessor-version":[{"id":63907,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52332\/revisions\/63907"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/33073"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=52332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=52332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=52332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}