{"id":516,"date":"2023-05-09T08:10:29","date_gmt":"2023-05-09T06:10:29","guid":{"rendered":"https:\/\/www.servicepraxis.com\/plugins\/?page_id=516"},"modified":"2023-05-22T07:58:09","modified_gmt":"2023-05-22T05:58:09","slug":"shortcodes","status":"publish","type":"page","link":"https:\/\/www.servicepraxis.com\/plugins\/shortcodes\/","title":{"rendered":"Shortcodes in der Praxis"},"content":{"rendered":"\n<p>In WordPress werden<strong> Shortcodes<\/strong> in erster Linie verwendet, um erweiterte <strong>Funktionen oder dynamische Inhalte<\/strong> einzuf\u00fcgen, w\u00e4hrend <strong>Patterns<\/strong> vorgefertigte <strong>Layouts oder Blockstrukturen<\/strong> bereitstellen, um Seiten oder Beitr\u00e4ge zu gestalten. Shortcodes sind jedoch nicht nur rein technischer Struktur, sondern k\u00f6nnen ebenfalls gezielt ein Layout mitliefern.<\/p>\n\n\n\n<div class=\"wp-block-group card-container-group data-aos_zoom-in data-aos-delay_200 data-aos-duration_400\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-group card-container\"><div class=\"wp-block-group__inner-container\">\n<div class=\"card panel panel-primary\">\n\t<div class=\"card-header panel-heading\">\n\t\t<span class=\"float-start\">\n\t\t<h3 class=\"panel-title\">Shortcode vs. Vorlagen<\/h3>\n\t\t<\/span>\n\t\t<span class=\"float-start float-md-end\">\n\t\t\t<ul class=\"nav nav-pills panel-tabs\" id=\"pills-tab\" role=\"tablist\">\n\t\t\t\t<li class=\"nav-item\" role=\"presentation\"><button class=\"active\" id=\"pills-tab1-tab\" data-bs-toggle=\"pill\" data-bs-target=\"#tab1\">Abgrenzung<\/a><\/button>\n\t\t\t\t<li class=\"nav-item\" role=\"presentation\"><button id=\"pills-tab2-tab\" data-bs-toggle=\"pill\" data-bs-target=\"#tab2\">Bl\u00f6cke<\/a><\/button>\n\t\t\t\t<li class=\"nav-item\" role=\"presentation\"><button id=\"pills-tab3-tab\" data-bs-toggle=\"pill\" data-bs-target=\"#tab3\">Vorteile<\/a><\/button>\n\t\t\t\t<li class=\"nav-item\" role=\"presentation\"><button id=\"pills-tab4-tab\" data-bs-toggle=\"pill\" data-bs-target=\"#tab4\">H\u00fcrden<\/a><\/button>\n\t\t\t\t<li class=\"nav-item\" role=\"presentation\"><button id=\"pills-tab5-tab\" data-bs-toggle=\"pill\" data-bs-target=\"#tab5\">Plugins<\/a><\/button>\n\t\t\t<\/ul>\n\t\t<\/span>\n\t<\/div>\n\t<div class=\"card-body panel-body\">\n\t\t<div class=\"tab-content\">\n\t\t\t<div class=\"tab-pane fade show active\" id=\"tab1\" role=\"tabpanel\" aria-labelledby=\"pills-tab1-tab\" tabindex=\"0\">Shortcodes erm\u00f6glichen es Benutzer:innen in Beitr\u00e4gen, Seiten oder Widgets, komplexe Funktionalit\u00e4ten zu implementieren. Hierzu geh\u00f6rt beispielsweise das Hinzuf\u00fcgen von Formularen oder das Anzeigen von dynamischen Inhalten durch einfaches Einf\u00fcgen eines kurzen Codes bzw. Platzhalters in den Editor. Shortcodes werden normalerweise in eckigen Klammern angegeben, z.\u00a0B. <code>[mein_shortcode]<\/code>. Patterns bzw. Vorlagen sind vordefinierte Blockstrukturen oder Layouts, die bereits konfiguriert und stilisiert sind. Mit diesen wiederkehrenden Designelementen lassen sich komplette Abschnitte mit verschiedenen Bl\u00f6cken z\u00fcgig erstellen.<\/div>\n\t\t\t<div class=\"tab-pane fade\" id=\"tab2\" role=\"tabpanel\" aria-labelledby=\"pills-tab2-tab\" tabindex=\"0\">Diese wurden mit dem Gutenberg-Block-Editor in WordPress 5.5 eingef\u00fchrt. Sie dienen dazu, den Design- und Bearbeitungsprozess zu beschleunigen und eine konsistente Gestaltung zu gew\u00e4hrleisten. Wiederkehrende Elemente oder Bausteine, die sich \u00f6fter einmal \u00e4ndern wie \u00d6ffnungszeiten und \u00e4hnliches lie\u00dfen sich davor nur als Shortcode sinnvoll einbinden, jetzt kann man diese als wiederkehrende Bl\u00f6cke ablegen. Shortcodes werden heute einfach als Block an gew\u00fcnschter Stelle integriert und k\u00f6nnen neben den Funktionalit\u00e4ten auch gleich das gew\u00fcnschte Design mit beinhalten.<\/div>\n\t\t\t<div class=\"tab-pane fade\" id=\"tab3\" role=\"tabpanel\" aria-labelledby=\"pills-tab3-tab\" tabindex=\"0\">Zu den herausragenden Merkmalen eines Shortcode in WordPress geh\u00f6ren Flexibilit\u00e4t, Funktionalit\u00e4tserweiterung, Benutzerfreundlichkeit und Wiederverwendbarkeit. Erweiterte ma\u00dfgeschneiderte Funktionen, die sich je nach Kontext oder Benutzerinteraktion \u00e4ndern, k\u00f6nnen durch Anwender:innen ohne Programmierkenntnisse eingef\u00fcgt werden. Statt ggf. den Code der Website weiterzubearbeiten, reicht es den Shortcode als Block an gew\u00fcnschter Stelle einzuf\u00fcgen.<\/div>\n\t\t\t<div class=\"tab-pane fade\" id=\"tab4\" role=\"tabpanel\" aria-labelledby=\"pills-tab4-tab\" tabindex=\"0\">Ist ein Shortcode abh\u00e4ngig von einem Plugin, z.\u00a0B. f\u00fcr Formulare, ben\u00f6tigter dieser das spezifische Plugin, um ordnungsgem\u00e4\u00df zu funktionieren. Wird dieses deaktiviert wird, kann der zugeh\u00f6rige Code m\u00f6glicherweise nicht mehr korrekt angezeigt werden.<\/div>\t\n\t\t\t<div class=\"tab-pane fade\" id=\"tab5\" role=\"tabpanel\" aria-labelledby=\"pills-tab5-tab\" tabindex=\"0\">Es gibt frei verf\u00fcgbare Plugins f\u00fcr Shortcodes, die ich in der Regel meide. Zum einen verwirren die zahlreichen nicht genutzten Funktionen meine Kund:innen oft mehr als dass diese weiter helfen und zum anderen programmiere ich f\u00fcr Ihr Projekt individuell genau die Shortcodes, die Sie auch wirklich brauchen. So schleppen wir keinen nicht Ballast mit uns herum. Auch verschwenden wir keine Zeit f\u00fcr deren Anpassung, wenn das fix selbst an Ihre Bed\u00fcrfnisse ausgerichtete programmieren sowieso schneller geht.<\/div>\t\t\t\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Mit Shortcodes arbeiten<\/h3>\n\n\n\n<p>Komplexe <strong>Aufgaben mit minimalem Aufwand erledigen<\/strong>! Das Arbeiten mit Shortcodes in WordPress ist recht einfach. Stellen Sie sicher, dass Sie den gew\u00fcnschten Shortcode kennen. Dies kann entweder ein Standard-Shortcode sein, der bereits in WordPress integriert ist, oder ein benutzerdefinierter Shortcode, der von einem Plugin oder von mir f\u00fcr Ihr Theme bereitgestellt wird. Selbstverst\u00e4ndlich erhalten Sie entsprechende <strong>Informationen \u00fcber f\u00fcr Sie programmierte Shortcodes zusammen mit der Dokumentation<\/strong> zu Ihrem Projekt.<\/p>\n\n\n\n<p>\u00d6ffnen Sie den Editor f\u00fcr den gew\u00fcnschten Beitrag oder die gew\u00fcnschte Seite in WordPress. F\u00fcgen Sie den Shortcode als Block \u00fcber das Plus-Zeichen an der Stelle ein, an der Sie ihn einf\u00fcgen m\u00f6chten. Der Shortcode wird in eckigen Klammern eingeschlossen, z.&nbsp;B. [shortcode]. Auf der Website, wie diese Besucher:innen sehen, erkennt WordPress den Shortcode und ersetzt ihn durch die entsprechenden Inhalte bzw. Funktionen.<\/p>\n\n\n\n<div class=\"wp-block-group card-container-group d-print-none data-aos_zoom-in data-aos-delay_200 data-aos-duration_400\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-group card-container\"><div class=\"wp-block-group__inner-container\">\n<div class=\"row g-0 p-0\">\n\t<div class=\"card\">\n\t\t<div id=\"carouselShortcodeWithIndicators\" class=\"carousel slide\" data-ride=\"carousel\">\n                    <div class=\"carousel-inner\">\n                        <div class=\"carousel-item active\">\n                            <div class=\"row\">\n                                <div class=\"col-md-6 div-l\">\n                                    <div class=\"carousel-img hide-md\" style=\"background-image: url(\/wp-content\/uploads\/sites\/6\/blg6_shortcodes_bsp_001.jpg);\">\n                                        <span class=\"h1 carousel-title\">Fallbeispiel<\/span>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"col-md-6 div-r\">\n                                    <span class=\"h3\">1. Aufgabe<\/span>\n                                    <hr>\n                                    <p>Automatische Ausgabe der letzten drei Newsletter aus einem separaten Blog im Hauptblog als responsive Bootstrap Cards innerhalb einer umfangreichen WordPress Multisite.<\/p>\n                                    <a href=\"\/kontakt\/\" class=\"btn btn-primary\">Jetzt Kontaktieren<\/a>\n                                <\/div>\n                            <\/div>                                \n                        <\/div>\n                        <div class=\"carousel-item\">\n                            <div class=\"row\">\n                                <div class=\"col-md-6 div-l\">\n                                    <div class=\"carousel-img hide-md\" style=\"background-image: url(\/wp-content\/uploads\/sites\/6\/blg6_shortcodes_bsp_002.jpg);\">\n                                        <span class=\"h1 carousel-title\">Fallbeispiel<\/span>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"col-md-6 div-r\">\n                                    <span class=\"h3\">2. Einbindung<\/span>\n                                    <hr>\n                                    <p>Im Dashboard w\u00e4hlt die Kundin einfach an den gew\u00fcnschten Stellen ihrer Beitr\u00e4ge den Block f\u00fcr Shortcodes und setzt diesen in eckigen Klammern ein.<\/p>\n                                    <a href=\"\/kontakt\/\" class=\"btn btn-primary\">Jetzt Kontaktieren<\/a>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"carousel-item\">\n                            <div class=\"row\">\n                                <div class=\"col-md-6 div-l\">\n                                    <div class=\"carousel-img hide-md\" style=\"background-image: url(\/wp-content\/uploads\/sites\/6\/blg6_shortcodes_bsp_003.jpg);\">\n                                        <span class=\"h1 carousel-title\">Fallbeispiel<\/span>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"col-md-6 div-r\">\n                                    <span class=\"h3\">3. Ergebnis<\/span>\n                                    <hr>\n                                    <p>Dynamik erzielen, im Fallbeispiel mit Pr\u00e4sentation der letzten drei Newsletterausgaben, ohne dass sich jemand k\u00fcnftig darum k\u00fcmmern muss, da sich die Boxen automatisch aktualisieren.<\/p>\n                                    <a href=\"\/kontakt\/\" class=\"btn btn-primary\">Jetzt Kontaktieren<\/a>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\t\t\t\t<div class=\"row g-0 p-0\" style=\"margin-top: -35px;\">\t\t\t\t\t\n\t\t\t\t  <div class=\"carousel-indicators\">\n\t\t\t\t\t<button type=\"button\" data-bs-target=\"#carouselShortcodeWithIndicators\" data-bs-slide-to=\"0\" class=\"active\" aria-current=\"true\" aria-label=\"Slide 1\"><\/button>\n\t\t\t\t\t<button type=\"button\" data-bs-target=\"#carouselShortcodeWithIndicators\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\"><\/button>\n\t\t\t\t\t<button type=\"button\" data-bs-target=\"#carouselShortcodeWithIndicators\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\"><\/button>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\t\t\n\t\t\t<button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#carouselShortcodeWithIndicators\" data-bs-slide=\"prev\">\n\t\t\t<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"><\/span>\n\t\t\t<span class=\"visually-hidden\">Previous<\/span>\n\t\t\t<\/button>\n\t\t\t<button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#carouselShortcodeWithIndicators\" data-bs-slide=\"next\">\n\t\t\t<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"><\/span>\n\t\t\t<span class=\"visually-hidden\">Next<\/span>\n\t\t\t<\/button>\t\t\t\t\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Eigene Shortcodes erstellen<\/h3>\n\n\n\n<p>Das Erstellen eines benutzerdefinierten Shortcodes in WordPress erfordert grundlegende Kenntnisse in der Entwicklung von Themes oder Plugins. Der wichtigste Schritt ist jedoch als erstes gemeinsam Funktionen zu definieren und das gew\u00fcnschte Layout festzulegen. Grunds\u00e4tzlich ist der Aufbau, egal wie komplex das Thema ist, immer gleich:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function custom_shortcode_function( $atts ) {\n  \/\/ Hier kommt der Code f\u00fcr den Inhalt des Shortcode\n} add_shortcode( 'shortcode_name', 'custom_shortcode_function' );<\/code><\/pre>\n\n\n\n<p>Innerhalb der Funktion liegt der eigentliche Code. Das kann alles M\u00f6gliche sein von Textbausteinen, HTML bis zu komplexem PHP. Die fertige Datei wird z.&nbsp;B. als custom-shortcodes.php innerhalb des Themes gespeichert und \u00fcber functions.php eingebunden. Alternativ als Plugin in einem neuen Unterordner in wp-content\/plugins. Mit Aktivierung des Plugin ist der Shortcode einsatzbereit.<\/p>\n\n\n\n<p class=\"d-print-none\" style=\"padding-top: 10px; padding-bottom: 10px; border-top: 1px dotted; border-bottom: 1px dotted;\">17th May 2023: WordPress 6.2.1 Update Breaks Shortcode Support in Block Templates reports <a style=\"text-decoration: underline;\" target=\"_blank\" href=\"https:\/\/wptavern.com\/wordpress-6-2-1-update-breaks-shortcode-support-in-block-templates\" rel=\"noopener\">wptavern.com<\/a>. Those who need to roll back to WordPress 6.2.0 can try a plugin like for example Core Rollback <a style=\"text-decoration: underline;\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/core-rollback\/\" rel=\"noopener\">wordpress.org<\/a>. With latest update from v 6.2.1 to 6.2.2 Shortcodes under WordPress are back on track.<\/p>\n\n\n\n<p>Es gibt noch viele weitere fortgeschrittene M\u00f6glichkeiten bei der Erstellung von Shortcodes, wie das Hinzuf\u00fcgen von Attributen oder das Verarbeiten von Parametern in der Funktion. Diese k\u00f6nnen verwendet werden, um diese noch flexibler zu gestalten.<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>In WordPress werden Shortcodes in erster Linie verwendet, um erweiterte Funktionen oder dynamische Inhalte einzuf\u00fcgen, w\u00e4hrend Patterns vorgefertigte Layouts oder Blockstrukturen bereitstellen, um Seiten oder Beitr\u00e4ge zu gestalten. Shortcodes sind jedoch nicht nur rein technischer Struktur, sondern k\u00f6nnen ebenfalls gezielt ein Layout mitliefern. Shortcode vs. Vorlagen Abgrenzung Bl\u00f6cke Vorteile H\u00fcrden Plugins Shortcodes erm\u00f6glichen es Benutzer:innen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":512,"parent":0,"menu_order":25,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"class_list":["post-516","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages\/516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/comments?post=516"}],"version-history":[{"count":0,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages\/516\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/media\/512"}],"wp:attachment":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/media?parent=516"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/tags?post=516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}