[gallery ids=\"47 ,86, 92, 64, 48, 75, 89, 80\" columns=\"4\" size=\"medium\"]<\/pre>\nEs wird eine Galerie mit den genannten Bild-IDs ausgegeben. Sie wird 4 Spalten haben und ihre maximale Gr\u00f6\u00dfe wird ‚mittel‘ sein (wie von WordPress definiert).<\/p>\n
Es gibt keine Notwendigkeit f\u00fcr h\u00e4sslichen HTML-Code.<\/p>\n
Beispiel des Gallerie Shortcodes<\/figcaption><\/figure>\n Durch Shortcodes entf\u00e4llt die Notwendigkeit komplizierter Skripte. Selbst wenn du wenig bis gar keine Programmierkenntnisse hast, kannst du mit ihrer Hilfe m\u00fchelos dynamische Inhalte hinzuf\u00fcgen.<\/p>\n
Sie sind bei WordPress-Entwicklern<\/a> sehr beliebt, da sie bei der Automatisierung der Inhalts- und Designerstellung immens hilfreich sind. Shortcodes sind f\u00fcr WordPress-Entwickler das, was Makros f\u00fcr Datenanalysten sind, oder Tastaturk\u00fcrzel f\u00fcr professionelle Grafikdesigner.<\/p>\n
In diesem Handbuch erf\u00e4hrt man alles, was es \u00fcber Shortcodes zu wissen gibt. Du erf\u00e4hrst, wie du mit der Shortcode-API arbeiten kannst, indem du deine eigenen Shortcodes erstellst. Zum Schluss besprechen wir die Zukunft der Shortcodes und wie sie in den neuen Block-Editor von WordPress<\/a> passen.<\/p>\n
Aufgeregt? Fangen wir an!<\/p>\n
<\/div><\/kinsta-auto-toc>\n Was ist ein Shortcode?<\/h2>\n
Kurz gesagt, Shortcode = Abk\u00fcrzung + Code<\/strong>.<\/p>\n
Typischerweise verwenden Shortcodes eckige Klammern [], um zu definieren, wie sie verwendet werden. Jeder Shortcode f\u00fchrt eine bestimmte Funktion in einer Seite aus. Es kann so einfach sein wie die Formatierung des Inhalts oder so komplex wie die Definition der gesamten Website-Struktur.<\/p>\n
Du kannst Shortcodes beispielsweise zum Einbetten von Schiebereglern, Formularen<\/a> oder Preistabellen<\/a> verwenden. Du kannst sie sogar verwenden, um wiederverwendbare Vorlagen f\u00fcr das Seitendesign zu erstellen.<\/p>\n
Eine kurze Geschichte \u00fcber Shortcodes<\/h3>\n
Shortcodes wurden zuerst durch eine Online-Forum-Software namens Ultimate Bulletin Board (UBB) popul\u00e4r gemacht. Im Jahr 1998 f\u00fchrten sie BBCode (Bulletin Board Code)<\/a> ein, eine Sammlung von einfach zu verwendenden Tags, mit denen Benutzer ihre Beitr\u00e4ge einfach formatieren k\u00f6nnen.<\/p>\n
Einfache Formatierung mit einfachen BBCodes<\/figcaption><\/figure>\n Als eine leichtgewichtige Markup-Sprache arbeitet BBCode nach den gleichen Prinzipien wie HTML, nur ist es viel einfacher.<\/p>\n
Die Verwendung von vordefinierten Tags ist auch viel sicherer, da Benutzer keinen HTML-Code einf\u00fcgen und keine Sicherheitsl\u00fccken<\/a> einf\u00fchren k\u00f6nnen. Ein Benutzer mit b\u00f6swilligen Absichten k\u00f6nnte zum Beispiel den <script>-Tag verwenden, um JavaScript-Code auszuf\u00fchren und die Funktionalit\u00e4t der Website zu unterbrechen.<\/p>\n
Bald darauf f\u00fcgten andere Online-Forum-Software wie phpBB<\/a>, XMB Forum<\/a> und vBulletin<\/a> BBCode-Funktionalit\u00e4t in ihren Message-Boards hinzu.<\/p>\n
Mit Hilfe von Shortcodes hatten die Admins eine gr\u00f6\u00dfere Kontrolle dar\u00fcber, was ihre Benutzer tun k\u00f6nnen und was nicht. Au\u00dferdem erlaubten sie den Benutzern, ihre Inhalte durch einfache Tags zu formatieren.<\/p>\n
Aus den gleichen Sicherheitsgr\u00fcnden verhindert WordPress, dass PHP-Code innerhalb der Inhalte der Website ausgef\u00fchrt wird. Um diese Einschr\u00e4nkung zu \u00fcberwinden, f\u00fchrte WordPress 2.5<\/a> die Shortcodes-Funktionalit\u00e4t 2008 mit der Ver\u00f6ffentlichung der Shortcode-API<\/a> ein. Sie hat sich als eine der am meisten genutzten Funktionen von vielen WordPress-Plugins und Theme-Entwicklern erwiesen.<\/p>\n
Was sind WordPress Shortcodes?<\/h3>\n
WordPress Shortcodes sind eckige Klammern ([ ]<\/strong>), die sich auf magische Weise in etwas Faszinierendes im Frontend verwandeln. Sie bieten dem Benutzer eine einfache M\u00f6glichkeit, komplizierte Inhalte zu erstellen und zu \u00e4ndern, ohne sich \u00fcber komplexes HTML oder eingebettete Codes Gedanken machen zu m\u00fcssen.<\/p>\n
WordPress-Shortcodes sind einfach und leicht zu benutzen<\/figcaption><\/figure>\n Die 2 Arten von Shortcodes<\/h3>\n
Es gibt haupts\u00e4chlich zwei Arten von Shortcodes in WordPress.<\/p>\n
Selbstschlie\u00dfende und einschlie\u00dfende Shortcodes k\u00f6nnen mit oder ohne Attribute g\u00fcltig sein.<\/figcaption><\/figure>\n \n
- Selbstschlie\u00dfende Shortcodes: <\/strong>Diese brauchen kein Schlie\u00df-Tag.<\/li>\n<\/ul>\n
Beispiel: Der Galerie<\/strong> Shortcode ben\u00f6tigt keinen schlie\u00dfenden Tag. Wir f\u00fcgen alles, was er braucht, mit verschiedenen Attributen hinzu.<\/p>\n
\n
- Einschlie\u00dfende Shortcodes<\/strong>: Diese brauchen einen abschlie\u00dfenden Tag. Einschlie\u00dfende Shortcodes manipulieren generell den Inhalt zwischen dem \u00f6ffnenden und schlie\u00dfenden Tag.<\/li>\n<\/ul>\n
Beispiel: Der Caption<\/strong> Shortcode wird verwendet, um eine Beschriftung um einen beliebigen Inhalt zu wickeln. Er wird haupts\u00e4chlich verwendet, um eine Beschriftung zu Bildern hinzuzuf\u00fcgen, aber er funktioniert mit jedem HTML-Element.<\/p>\n
Einige Shortcodes funktionieren mit oder ohne Attribute. Es h\u00e4ngt davon ab, wie sie definiert sind.<\/p>\n
Die Standard WordPress Shortcodes sind<\/h2>\n
WordPress kommt mit 6 Standard-Shortcodes:<\/p>\n
\n
- audio<\/a>: Bette Audiodateien auf deiner Website ein. Es beinhaltet einfache Wiedergabesteuerungen wie Play & Pause.<\/li>\n
- caption<\/a>: Wickel damit Beschriftungen um deinen Inhalt. Es wird meistens verwendet, um Bildunterschriften hinzuzuf\u00fcgen, aber du kannst es f\u00fcr jedes HTML-Element verwenden.<\/li>\n
- embed<\/a> : Erweiter die standardm\u00e4\u00dfige oEmbed-Funktion. Mit diesem Shortcode kannst du verschiedene Attribute f\u00fcr deine Einbettungen festlegen, wie z.B. die maximalen Abmessungen.<\/li>\n
- gallery<\/a> : F\u00fcge eine einfache Bildergalerie auf deiner Seite ein. Du kannst Attribute verwenden, um zu definieren, welche Bilder verwendet werden und um das Aussehen der Galerie anzupassen.<\/li>\n
- playlists<\/a>: Zeige eine Sammlung von Audio- oder Videodateien mit diesem selbstbeschreibenden Shortcode an. Du kannst ihm mit seinem style-Attribut einen coolen ‚dunklen‘ Modus geben.<\/li>\n
- video<\/a>: Bette eine Videodatei ein und spiele sie mit einem einfachen Videoplayer ab. Dieser Shortcode unterst\u00fctzt das Einbetten von Videos mit diesen Formaten: mp4, webm, m4v, webm, ogv, wmv, flv.<\/li>\n<\/ul>\n
F\u00fcr weitere Details dar\u00fcber, wie du die Standard Shortcodes verwenden kannst und welche Attribute sie unterst\u00fctzen, kannst du in den verlinkten Codex-Dokumenten nachlesen.<\/p>\n
Wie man WordPress Shortcodes Verwendet<\/h3>\n
Die Verwendung von Shortcodes in WordPress ist ein unkomplizierter Prozess. Aber es h\u00e4ngt davon ab, wo du sie auf deiner Website hinzuf\u00fcgen m\u00f6chtest. Stelle sicher, dass du die Dokumentation zu den Shortcodes liest, um zu verstehen, wie sie funktionieren. Lerne die unterst\u00fctzten Attribute kennen, damit du genau das bekommst, was du willst.<\/p>\n
Verwendung von WordPress Shortcodes in Pages und Posts<\/h3>\n
Gehe zun\u00e4chst in den Seiten-\/Post-Editor, in dem du den Shortcode einf\u00fcgen m\u00f6chtest.<\/p>\n
Wenn du den Gutenberg-Editor verwendest, kannst du den Shortcode-Tag im eigenst\u00e4ndigen Shortcodes-Block hinzuf\u00fcgen. Wir finden ihn in der Widgets-Sektion.<\/p>\n
Hinzuf\u00fcgen eines Shortcode-Blocks in Gutenberg<\/figcaption><\/figure>\n Gutenbergs spezieller Shortcode-Block<\/figcaption><\/figure>\n Benutzt du immer noch den Classic Editor<\/a> (oder das Plugin)? Du kannst deine Shortcode-Tags auf klassische Weise eingeben. Einige wenige Shortcodes haben sogar einen Knopf im Editor-Bildschirm, um sie einfach einzuf\u00fcgen.<\/p>\n
Einen Shortcode im Classic Editor hinzuf\u00fcgen<\/figcaption><\/figure>\n Verwendung von WordPress-Shortcodes in Sidebar-Widgets<\/h3>\n
In Sidebar-Widgets<\/a> k\u00f6nnen auch Shortcodes eingef\u00fcgt werden. Um sie hinzuzuf\u00fcgen, gehe zu Darstellung -> Widgets<\/strong> und f\u00fcge ein Text<\/strong> Widget in den Abschnitt ein, in dem du die Shortcodes hinzuf\u00fcgen m\u00f6chtest.<\/p>\n
F\u00fcge mit dem Text-Widget einen Shortcode in deine Sidebar ein<\/figcaption><\/figure>\n F\u00fcge den Shortcode in das Text-Widget ein und speicher ihn. Du kannst das Frontend deiner Seite besuchen und die Ausgabe des Shortcode in deiner Sidebar sehen.<\/p>\n
Die Shortcode-Ausgabe (Galerie) ist in der Sidebar zu sehen<\/figcaption><\/figure>\n Hinweis<\/strong>: WordPress 4.8 und niedrigere Versionen unterst\u00fctzen keine Shortcodes in Sidebar-Widgets. Lies die Widget-Verbesserungen in WordPress 4.9<\/a> Update f\u00fcr mehr.<\/p>\n
Verwendung von WordPress Shortcodes in Header und Footer<\/h3>\n
WordPress Shortcodes sind im Allgemeinen f\u00fcr Seiten, Beitr\u00e4ge und Widgets gedacht. Aber du hast eine einfache M\u00f6glichkeit, Shortcodes \u00fcberall auf deiner Website einzuf\u00fcgen.<\/p>\n
Nehmen wir an, du m\u00f6chtest einen Call-To-Action-Button in deinem Footer oder in allen deinen Beitr\u00e4gen vor dem Kommentarbereich einf\u00fcgen. Die do_shortcode() Callback-Funktion<\/a> ist hier sehr n\u00fctzlich.<\/p>\n
Du musst den folgenden Code in die header.php, footer.php oder eine der Vorlagendateien deines Themes einf\u00fcgen:<\/p>\n
<?php echo do_shortcode(\"[name_of_your_shortcode]\"); ?><\/code><\/pre>\nDadurch wird der Shortcode an der Stelle ausgegeben, an der du den Code eingegeben hast.<\/p>\n
Du musst die eckigen Klammern zwischen den Anf\u00fchrungszeichen einf\u00fcgen, um den Shortcode wiederzugeben. Nur den Namen einzuf\u00fcgen, wird nicht funktionieren.<\/p>\n
Ebenso kannst Du die do_shortcode() Callback-Funktion verwenden, um Shortcodes \u00fcberall in WordPress zu aktivieren, wie z.B. in der Kommentar-Sektion.<\/p>\n
Eine kurze Einf\u00fchrung in die Shortcode-API<\/h3>\n
Die WordPress Shortcode API<\/a> definiert, wie du Shortcodes verwenden kannst, um die Funktionalit\u00e4t deiner Website anzupassen und zu erweitern. Sie erm\u00f6glicht es Entwicklern, einzigartige Inhalte zu erstellen (z.B. Formulare, Karussells, Schieberegler, etc.), die die Nutzer durch Einf\u00fcgen des entsprechenden Shortcode in ihre Seiten einf\u00fcgen k\u00f6nnen.<\/p>\n
Mit Hilfe von Shortcodes l\u00e4sst sich nahezu jede erdenkliche Funktion in deine Website einf\u00fcgen.<\/p>\n
Die API unterst\u00fctzt sowohl selbstschlie\u00dfende als auch umschlie\u00dfende Shortcodes. Sie handhabt das ganze knifflige Parsen und enth\u00e4lt Hilfsfunktionen zum Setzen und Holen von Standardattributen.<\/p>\n
Dank der API kannst du dich direkt in die Entwicklung und Anpassung von Shortcodes st\u00fcrzen, anstatt kostbare Zeit mit der Definition von regul\u00e4ren Ausdr\u00fccken f\u00fcr jeden Shortcode zu verschwenden.<\/p>\n
Understanding the Basics of Shortcode API<\/h3>\n
Jedes Mal, wenn du eine Seite oder einen Beitrag in WordPress \u00f6ffnest, wird nach registrierten Shortcodes gesucht, w\u00e4hrend der Inhalt der Website verarbeitet wird.<\/p>\n
Wird ein registrierter Shortcode gefunden, \u00fcbernimmt die Shortcode-API und gibt die Ausgabe des\/der Shortcode(s) zur\u00fcck. Der zur\u00fcckgegebene Output-String ersetzt den Shortcode-Tag an der Stelle, an der er hinzugef\u00fcgt wurde.<\/p>\n
Du registrierst einen Shortcode in WordPress mit der Funktion add_shortcode()<\/a>. So wird es gemacht:<\/p>\n
add_shortcode( 'shortcode_name', 'shortcode_handler_function' );<\/code><\/pre>\n\n
- \n
\n
- \n
\n
- shortcode_name<\/strong>: Der Tag, nach dem WordPress beim Parsen des Post-Inhalts sucht. Die Shortcode API empfiehlt, nur Kleinbuchstaben, Zahlen und Unterstriche zu verwenden, um den Wert zu definieren (vermeide Bindestriche).<\/li>\n
- shortcode_handler_function<\/strong>: Die Callback-Funktion, die ausgef\u00fchrt wird, nachdem WordPress das Vorhandensein eines registrierten Shortcodes best\u00e4tigt hat.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Die Shortcode-Handler-Funktion ist als solche definiert:<\/p>\n
function shortcode_handler_function( $atts, $content, $tag ){ }<\/code><\/pre>\n\n
- \n
\n
- \n
\n
- $atts<\/strong>: Ein assoziatives Array von Attributen (d.h. ein Array von Schl\u00fcssel-Werte-Paaren). Wenn du keine Attribute definierst, wird es standardm\u00e4\u00dfig ein leerer String sein.<\/li>\n
- $content:<\/strong> Der eingeschlossene Inhalt, wenn du einen umschlie\u00dfenden Shortcode definierst. Es liegt in der Verantwortung der Handler-Funktion<\/a>, sicherzustellen, dass der Wert von $content in der Ausgabe zur\u00fcckgegeben wird.<\/li>\n
- $tag<\/strong>: Der Wert des Shortcode-Tags (im obigen Beispiel shortcode_name). Wenn zwei oder mehr Shortcodes die gleiche Callback-Funktion (die g\u00fcltig ist) teilen, hilft der Wert des $-Tags bei der Bestimmung, welcher Shortcode die Handler-Funktion ausgel\u00f6st hat.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Die API parsed das Tag des Shortcodes, die Attribute und den eingeschlossenen Inhalt (falls vorhanden) und \u00fcbergeht die Werte an die Handler-Funktion, die sie verarbeitet und einen Ausgabestring zur\u00fcckgibt.<\/p>\n
Dieser Ausgabestring ersetzt das Shortcode-Makro auf dem Frontend der Webseite. Was man im Browser schlie\u00dflich sieht, ist diese Ausgabe.<\/p>\n
Wo kann man die Benutzerdefinierten Shortcode-Skripte Hinzuf\u00fcgen?<\/h3>\n
Du kannst deine eigenen Shortcode-Skripte der functions.php-Datei des Themes hinzuf\u00fcgen oder sie in ein Plugin einbinden.<\/p>\n
Wenn du es zu einer Theme-Datei hinzuf\u00fcgst, kannst du die add_shortcode()<\/a> Funktion so wie sie ist ausf\u00fchren.<\/p>\n
Aber wenn du es zu einem Plugin hinzuf\u00fcgst, empfehle ich dir, es erst zu initialisieren, nachdem WordPress komplett geladen wurde. Du kannst das sicherstellen, indem du die add_shortcode() Funktion in eine andere Funktion einbindest. Dies wird als Wrapper-Funktion bezeichnet:<\/p>\n
function shortcodes_init(){\n add_shortcode( 'shortcode_name', 'shortcode_handler_function' );\n}\nadd_action('init', 'shortcodes_init');<\/code><\/pre>\nDie add_action() <\/a>Funktion h\u00e4ngt die shortcodes_init<\/strong> Funktion ein, um erst zu feuern, nachdem WordPress das Laden beendet hat (es wird der ‚init‘ Hook<\/a> genannt).<\/p>\n
Wie man einen Benutzerdefinierten Shortcode in WordPress Erstellt (Anf\u00e4nger-Level)<\/h2>\n
Nachdem wir nun die Grundlagen besprochen haben, ist es Zeit, einen benutzerdefinierten Shortcode zu erstellen.<\/p>\n
![\"Beispiel](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/12\/beispiel-gallerie-shortcodes.jpg\")
![\"Einfache](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/12\/einfache-formatierung-einfachen-bbcodes.png\")
![\"WordPress-Shortcodes](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/12\/wordpress-shortcodes-einfach-leicht-benutzen.png\")
![\"Selbstschlie\u00dfende](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/12\/selbstschliebende-einschliebende-shortcodes.png\")
![\"Hinzuf\u00fcgen](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/01\/hinzufugen-shortcode-blocks-gutenberg.png\")
![\"Gutenbergs](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/01\/gutenbergs-spezieller-shortcode-block.png\")
![\"Einen](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/01\/shortcode-classic-editor-hinzufugen.png\")
![\"F\u00fcge](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/01\/fuge-text-widget-shortcode-sidebar.png\")
![\"Die](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/01\/shortcode-ausgabe-sidebar.png\")