Die vollständige Anleitung zu WordPress-Shortcodes

Vor dem WordPress-Blockeditor waren WordPress-Shortcodes eines der besten Dinge, um den WordPress-Editor zu treffen, um das Hinzufügen von Plugin- und Theme-Funktionen zu Seiten, Beiträgen und anderen Abschnitten einer WordPress-Website zu vereinfachen.

Was bedeutet der Wechsel zum Blockeditor für die meisten älteren Plugins und Websites, die immer noch voller Shortcodes sind? Funktionieren WordPress-Shortcodes noch? Gibt es eine Möglichkeit, einfach von der Verwendung von WordPress-Shortcodes zu WordPress-Blöcken zu wechseln?

Lass es uns herausfinden. In diesem Handbuch werden wir WordPress-Shortcodes in der Ära des WordPress-Blockeditors untersuchen.

Was sind WordPress-Shortcodes?

Ein WordPress-Shortcode ist ein wiederverwendbarer, dynamischer Code, der in [Klammern] eingeschlossen ist . Shortcodes ermöglichen es Ihnen, bestimmte Funktionen von WordPress selbst oder eines Plugins oder Themes einfach in jeden Beitrag, jede Seite, jeden benutzerdefinierten Beitragstyp oder jedes Widget einzufügen. Stellen Sie sich WordPress-Shortcodes wie „Shortcuts“ oder Makros auf Ihrer Website vor.

Sie können WordPress-Shortcodes verwenden, um statische Inhalte anzuzeigen, die zu mühsam sind, um sie ständig zu codieren und zu wiederholen. Und Sie können auch Shortcodes verwenden, um dynamische Inhalte anzuzeigen, wie zum Beispiel Bildergalerien, Audioplayer für Podcasts, Veranstaltungskalender oder sich ändernde Statistiken für bestimmte Daten.

Shortcode-Format

Wenn es um das Einfügen von Shortcodes geht, kann das grundlegende [Klammern] -Format auf verschiedene Weise „erweitert“ werden, sodass Sie zusätzliche Einstellungsinformationen, sogenannte Attribute , anpassen oder hinzufügen können. Darüber hinaus können Verknüpfungen Text (oder HTML) umbrechen oder sogar in einen anderen Shortcode verschachtelt sein.

Ein Shortcode kann beispielsweise die folgenden Formate haben:

[shortcode]

[shortcode]Some text[/shortcode]

[shortcode]<a href="http://mysite.com/">HTML content</a>[/shortcode]

[shortcode]Some text [another-shotcode] more text [/shortcode]

[shortcode icon="icon: star" background="#eeeeee" color="#F73F43" text_color="#F73F43" size="32" shape_size="16" radius="256" text_size="16" url="#" target="self" margin="0"] This is a custom icon [/shortcode]

Shortcode-Attribute

Shortcodes sind auch flexibel, weil sie mit Attributen erweitert werden können . Mit Attributen bieten Shortcodes zusätzliche Anpassungsmöglichkeiten, indem einfach zusätzliche Code-Snippets innerhalb des Shortcodes hinzugefügt werden.

Plugins und Themes bieten zusätzliche Anleitungen und Rubriken, die Benutzern helfen, die richtigen Shortcode-Snippets zu verwenden, um bestimmte Elemente in der Ausgabe hinzuzufügen oder zu entfernen.

Hier sind ein paar Beispiele für Shortcodes mit Attributen.

[[gallery id="123" size="medium"]]

[recent-posts posts="5"]

[recent-posts posts="5"]Posts Heading[/recent-posts]

Eingebaute WordPress-Shortcodes

WordPress wird mit mehreren integrierten Shortcodes zum Rendern bestimmter Inhaltstypen geliefert.

[[audio]]

Mit dem Audio-Shortcode können Sie Audiodateien einbetten und wiedergeben.

[[caption]]

Der Untertitel-Shortcode wird hauptsächlich für einzelne Bilder verwendet und ermöglicht es Ihnen, Untertitel um den Inhalt zu wickeln.

[[gallery]]

Mit dem Galerie-Shortcode können Sie Ihren Beiträgen und Seiten eine oder mehrere Bildergalerien hinzufügen.

[[embed]]

Mit dem Einbettungs-Shortcode können Sie eingebettete Elemente mit einer maximalen (aber nicht festen) Breite und Höhe umschließen.

[[playlist]]

Der Playlist-Shortcode implementiert die Funktionalität zum Anzeigen einer Sammlung von WordPress-Audio- oder Videodateien in einem Beitrag.

[[video]]

Mit dem Video-Shortcode können Sie Videodateien einbetten und wiedergeben.

Plugin- und Theme-Shortcodes

Bestimmte WordPress-Themes und Plugins verfügen über Shortcodes, die Sie direkt in den Post- oder Seiteneditor einfügen können und die das Ergebnis im Frontend rendern. Bis heute verwenden viele Themes und Plugins noch Shortcodes.

Shortcodes werden beispielsweise häufig in gängigen Plugins für Kalender, Formulare, Tabellen, Mitgliedschaften, Countdown-Timer oder Pull-Quotes verwendet. Es gibt sogar Shortcode-Plugins, mit denen Sie Shortcodes für alles erstellen können.

WordPress-Themes können auch Shortcodes verwenden, um bestimmte dynamische Inhalte zu rendern, die vorgefertigt oder von ihnen bereitgestellt werden.

Benutzerdefinierte Shortcodes

Die meisten erfahrenen Entwickler entscheiden sich dafür, ihre eigenen Shortcodes zu erstellen, um im Wesentlichen die Zeit zu verkürzen, die benötigt wird, um etwas sich wiederholendes zu programmieren. Alles, was Sie brauchen, ist eine einfache zusätzliche Datei in Ihrem Dateiverzeichnis, um die Datei custom-shortcodes.php zu erstellen . Wenn Sie sich mit benutzerdefinierten Shortcodes vertraut machen möchten, finden Sie hier eine Anleitung zum Erstellen benutzerdefinierter Shortcodes.

Die WordPress Shortcode-API

Für Entwickler, die ihre eigenen benutzerdefinierten Shortcodes erstellen, bietet die WordPress Shortcode API eine einfache Reihe von Funktionen zum Erstellen von WordPress-Shortcodes zur Verwendung in Beiträgen und Seiten.

Die Shortcode-API hilft Plugin-Entwicklern, dynamische Inhalte zu erstellen, die Benutzer zu Seiten oder Beiträgen hinzufügen können, indem sie den entsprechenden Shortcode in den Inhaltsbereich einfügen. Glücklicherweise übernimmt die API das gesamte komplizierte Parsing, sodass kein benutzerdefinierter regulärer Ausdruck für jeden Shortcode geschrieben werden muss. Darüber hinaus sind Hilfsfunktionen zum Setzen und Abrufen von Standard-Shortcode-Attributen enthalten.

Entwickler können die WordPress Shortcode API-Dokumentation lesen, um mehr zu erfahren über:

• Umgang mit Attributen
• Ausgabe
• Einschließende vs. selbstschließende Shortcodes
• Funktionsreferenz
• Einschränkungen
• Formale Syntax

Shortcodes im Classic Editor

In der Vergangenheit wurden Shortcodes in den klassischen Editor jedes Beitrags oder jeder Seite eingefügt, wie folgt:

Was sind WordPress-Blöcke?

Shortcodes waren zuerst … aber dann kam die blockbasierte Bearbeitung. Mit der Einführung von WordPress 5.0 kam die Implementierung des seit langem geplanten Gutenberg-Editors bzw.

Hier ist ein Blick auf den Inhaltseditor vor WordPress 5.5 (ah, das waren noch Zeiten!)

Der Gutenberg-Editor wurde erstmals in früheren Versionen von WordPress angekündigt, blieb aber bis WordPress 5.0 optional, als er zum Standard-Editor wurde.

An dem neuen blockierten Editor ist grundsätzlich nichts auszusetzen. Tatsächlich mögen die meisten Benutzer das verbesserte und sauberere, weniger einschüchternde Aussehen des Backends von WordPress.

Aber mit dem WordPress-Blockeditor kamen WordPress- Blöcke . Vorbei sind die Formatierungsoptionen oben, die an Textverarbeitungsprogramme wie Microsoft Word erinnern. Stattdessen wurden die Formatierungsoptionen für jeden Block durch die Optionen der rechten Seitenleiste mit Registerkarten ersetzt.

WordPress-Blöcke sind im Wesentlichen Inhaltscontainer. Es gibt viele verschiedene Blöcke für verschiedene Arten von Inhalten – Bilder, Videos, Texte, Überschriften, Galerien – was auch immer.

Es gibt sogar einen WordPress-Block zum Formatieren, Spacer und Divider, und sie sind für einen einfachen Zugriff zwanglos in Kategorien angeordnet.

Alle Optionen und Steuerelemente, die oben waren, befinden sich jetzt auf der rechten Seite des Seiten- / Post-Editors, mit Registerkarten oben, die angeben, ob Sie die Optionen für den aktuellen Block allein oder das gesamte Dokument anzeigen möchten.

Der Blockeditor ist einfacher und schneller und benutzerfreundlicher. Darüber hinaus erstellen Theme- und Plugin-Entwickler auch ihre eigenen Blöcke, die den standardmäßigen WordPress-Blöcken weitere Blockoptionen hinzufügen.

Wiederverwendbare Blöcke vs. Shortcodes

Der alte Weg, eine Reihe vordefinierter Ausgaben im klassischen WordPress-Editor zu speichern, bestand darin, eigene Shortcodes zu erstellen. Jetzt wurde diese Methode durch wiederverwendbare Blöcke ersetzt .

Die Möglichkeit, vordefinierte und vorgefertigte Blöcke zu speichern, hat es auch einfacher gemacht, das Layout und das Design eines bestimmten Blocks zu speichern und auf einem anderen zu verwenden. Ähnlich wie eine Seitenvorlage.

Wenn Sie beispielsweise einen Schaltflächenblock hinzufügen und ihn mit einer bestimmten Farbe, Hover-Effekten usw. gestalten, möchten Sie dies nicht auf jeder einzelnen Seite tun, zu der Sie diese Schaltfläche hinzufügen. Wenn Sie ihn in einen wiederverwendbaren Block ändern, wird die Schaltfläche auf Ihrer WordPress-Site gespeichert und wird zu einem eigenen Block, den Sie auf anderen Seiten oder Beiträgen verwenden können.

Sie können diese Blöcke auch weiter aktualisieren, indem Sie sie in reguläre Blöcke konvertieren, sie als neuen Block (mit einem neuen Namen) speichern oder das vorhandene Design des Blocks aktualisieren.

Gruppenblöcke

In WordPress 5.3 kam auch die Einführung von Gruppenblöcken und Vorlagen.

Im Wesentlichen haben Sie die Möglichkeit, bestimmte Blöcke zu gruppieren und alle zusammen zu verschieben oder zu aktualisieren. Dies führte schließlich zu Blockmustern. Blockmuster haben die Bearbeitung von Inhalten vereinfacht, da Benutzer viel lieber ein Muster auswählen und den Inhalt aktualisieren, als von einer leeren Leinwand aus zu beginnen.

Stiloptionen für Blocks

Mit jedem Thema kommen verschiedene Stiloptionen. Und normalerweise wird der Stil des Inhalts, den Sie auf jeder Site hinzufügen, durch Ihr Thema vorgegeben.

Mit dem Blockeditor haben Sie die Möglichkeit, den Stil jedes Blocks einzeln zu aktualisieren, um ihn entweder hervorzuheben oder auffälliger zu machen.

Blöcke & vollständige Site-Bearbeitung

Mit all diesen Fortschritten und Änderungen in der Art und Weise, wie wir Seiten in WordPress erstellen und erstellen, kommt die Idee und der eventuelle Übergang zum sogenannten Full Site Editing .

Beim Einfügen konnten die meisten Benutzer nur den eigentlichen Text eines Beitrags oder einer Seite aktualisieren. Bestimmte Aspekte der Website wie Kopfzeile, Fußzeile, Seitenleisten und Widgets hängen immer noch weitgehend vom Thema ab. Dies machte die Suche nach dem perfekten Theme mit der richtigen Menge an Optionen natürlich zum ultimativen Kampf für Entwickler und Benutzer von WordPress.

Mit Full Site Editing und der Einführung des Block Builders geht der Trend dahin, alle Abschnitte einer Seite oder eines Beitrags in gewisser Weise mit Blöcken bearbeitbar zu machen.

Zum Beispiel folgt das neueste Twenty-Twenty WordPress-Theme diesem Muster und gibt Erstellern und Website-Besitzern mehr Kontrolle über ihre Website und wie sie aussehen soll.

Mit Blick auf die Zukunft müssen Plugin- und Theme-Entwickler bei der Entwicklung ihrer Software einen anderen Ansatz verfolgen, um sich an die neue vollständige Website-Bearbeitung und Seitenerstellung des WordPress-Blockeditors anzupassen. Auch wenn die vollständige Anwendung davon noch in Sicht ist, ist dies eine positive Veränderung, die wir wahrscheinlich eher früher als später sehen würden.

Der neue Shortcode-Block

Vor dem Blockeditor wurden Shortcodes direkt in die Seite bzw. den Seiteneditor eingefügt. Jetzt enthält der WordPress- Blockeditor einen neuen Shortcode-Block .

Der Shortcode-Block macht es einfach, Legacy-Shortcodes innerhalb eines Beitrags oder einer Seite weiter zu verwenden und behält die Integrität der Shortcode-Ausgabe bei.

Der Shortcode-Block kann einer Seite oder einem Beitrag hinzugefügt werden, indem Sie auf die Schaltfläche Block hinzufügen klicken. Alternativ können Sie /shortcode eingeben und die Eingabetaste drücken.

Sie werden feststellen, dass der Shortcode-Block im Gegensatz zu anderen gängigen Blöcken keine spezifischen Einstellungen in der Block-Symbolleiste oder der Editor-Seitenleiste enthält, wahrscheinlich aufgrund der Tatsache, dass Shortcodes mit ihren Attributen angepasst werden können.

Was bedeutet der Block-Editor für WordPress-Shortcodes?

Der WordPress-Blockeditor hat große Auswirkungen auf Shortcodes. Lassen Sie uns einige der wichtigsten Dinge behandeln, die Sie zu WordPress-Shortcodes in der Ära des Blockeditors beachten sollten.

1. Der WordPress-Blockeditor ändert die Notwendigkeit und den Zweck von Shortcodes für die meisten Plugins und Themes grundlegend. Bei einem blockbasierten Editiersystem hat jedes „Element“ auf der Seite seinen eigenen Block, anstatt in einem editierbaren WYSIWYG-Editor enthalten zu sein.

Da der Blockeditor ein völlig anderer Ansatz zum Verfassen eines Beitrags oder einer Seite ist, können die dynamischeren Teile einer Seite, die durch Shortcodes generiert werden, als Blöcke existieren, die einzeln hinzugefügt werden können.

2. Blöcke können jetzt die meisten Shortcodes ersetzen, sodass Benutzer nicht mehr lernen müssen, wie man Shortcodes verwendet. Das Konzept und das Format von Shortcodes können für einige Benutzer eine steile Lernkurve haben, sodass der Blockansatz möglicherweise einfacher ist.

Nehmen wir zum Beispiel das Gravity Forms-Plugin. Vor dem Blockeditor war der Vorgang zum Einfügen eines Formulars in einen Beitrag oder eine Seite anders. Aus dem klassischen Editor mussten Sie eine Schaltfläche verwenden, um ein Formular in Ihren Inhalt einzufügen.

Nachdem Sie Ihr Formular ausgewählt haben, wurde der Formular-Shortcode zu Ihrem Inhalt hinzugefügt. Abhängig von den ausgewählten Optionen enthielt der Shortcode die Attribute für Titel und Beschreibung.

Jetzt bietet das Gravity Forms-Plugin einen Formularblock- Einbettungsblock. Wählen Sie im Blockeditor den Formularblock aus.

Sobald Sie das Formular ausgewählt haben, sehen Sie tatsächlich eine bessere Vorschau, wie das Formular auf Ihrer Seite aussehen wird. Formulareinstellungen finden Sie in den Blockeinstellungen.

3. Theme- und Plugin-Entwickler müssen über die Zukunft ihrer Shortcode-Implementierungen und die Konvertierung ihrer Shortcodes in Blöcke entscheiden. Wie oben erwähnt, verwenden Hunderte von Themes, Plugins und Entwicklern immer noch Shortcodes auf ihren Websites und Anwendungen. Die Blockadoption kann langsam sein, aber wenn die Benutzer mit dem neuen Blockeditor vertraut sind, werden Benutzer wahrscheinlich eine Blockoption anfordern.

Für diejenigen Entwickler, die noch meilenweit davon entfernt sind, das WordPress-Blockbearbeitungssystem zu übernehmen, kann das Konzept der vollständigen Site-Bearbeitung mit ihren Shortcodes Hand in Hand gehen. Plugins wie Review- und Bewertungs-Plugins, Audioplayer, Datums-Ticker, Galerien, Kontaktformulare und fast alles andere, das noch Shortcodes verwendet, sind immer noch „im Spiel“.

4. Shortcodes werden nicht so schnell verschwinden. Aus diesem Grund bietet der WordPress-Blockeditor wahrscheinlich den Shortcode-Block an, um die Verwendung von Shortcodes aufrechtzuerhalten. Da Shortcodes vor WordPress 5.0 und dem Blockeditor so weit verbreitet waren und implementiert wurden, ist es wichtig, dass zukünftige Versionen von WordPress immer noch Shortcodes unterstützen.

5. Shortcodes können in einen Block umgewandelt werden . Haben Sie ein Lieblingsthema oder Plugin, das Shortcodes verwendet? Es ist wahrscheinlich, dass diese Shortcodes irgendwann in einen Block umgewandelt werden. Wenn Sie Entwickler eines Plugins oder Themes sind oder WordPress-Websites erstellen und Shortcodes in einem benutzerdefinierten Theme verwenden, ist es möglich, Shortcodes als Blöcke zu überdenken.

Im nächsten Abschnitt werden wir kurz beschreiben, wie man WordPress-Shortcodes in WordPress-Blöcke umwandelt.

So konvertieren Sie WordPress-ShortCodes in WordPress-Blöcke

So wie Sie benutzerdefinierte Shortcodes und wiederverwendbare Blöcke hinzufügen können, können Sie auch benutzerdefinierte WordPress-Shortcodes ganz einfach in WordPress-Blöcke konvertieren.

Befolgen Sie die ersten Schritte in diesem benutzerdefinierten Shortcode-Leitfaden.

Nehmen Sie dieses grundlegende Beispiel aus Caldera Forms:

 <?php /** * Handler for [cl_post_title] shortcode * * @param $atts * * @return string */ function caldera_learn_basic_blocks_post_title_shortcode_handler($atts) { $atts = shortcode_atts([ 'id' => 0, 'heading' => 'h3', ], $atts, 'cl_post_title'); return caldera_learn_basic_blocks_post_title($atts[ 'id' ], $atts[ 'heading' ]); } /** * Output the post title wrapped in a heading * * @param int $post_id The post ID * @param string $heading Allows : h2,h3,h4 only * * @return string */ function caldera_learn_basic_blocks_post_title($post_id, $heading) { if (!in_array($heading, ['h2', 'h3', 'h4'])) { $heading = 'h2'; } $title = get_the_title(absint($post_id)); return "<$heading>$title</$heading>"; } /** * Register Shortcode */ add_shortcode('cl_post_title', 'caldera_learn_basic_blocks_post_title_shortcode_handler');

Dieser Code nimmt die Beitrags-ID und eine Überschriftsebene (h2, h3, he) und gibt den Titel des Beitrags verpackt in den HTML-Code für die Überschrift aus.

Sobald das erledigt ist und Sie getestet haben, dass der Code funktioniert, müssen Sie den Shortcode als Block registrieren. Hier ist die Schritt-für-Schritt-Anleitung zum Konvertieren eines WordPress-Shortcodes in einen Gutenberg-Block als Beispiel.

Weitere Ressourcen zum Erstellen von WordPress-Blöcken

Es gibt zahlreiche online verfügbare Plugins und Ressourcen, die Ihnen dabei helfen, diesen Schritt zu erreichen, einschließlich der offiziellen Dokumentation von WordPress zum Schreiben Ihres ersten Blocktyps. Sie können sich auch den Beitrag von Igor Benic ansehen, wie Sie einen Block zum Anzeigen von Beiträgen erstellen.

Nachdem Sie diese Anleitungen gelesen haben, können Sie herausfinden, wie Sie Ihre eigenen WordPress-Blöcke mit Ihren benutzerdefinierten Shortcodes erstellen.

Das Urteil für WordPress-Shortcodes

WordPress-Shortcodes sind und bleiben einer der wichtigsten Bestandteile von WordPress. Shortcodes haben vielen Plugin-Entwicklern geholfen, ihre Plugins benutzerfreundlicher zu machen und viele Theme-Entwickler erweitern die Funktionalitäten ihrer Themes. Shortcodes haben auch die Anzahl der Kopfschmerzen reduziert, die viele Content-Ersteller und Website-Besitzer haben, nachdem sie ihre benutzerdefinierten Shortcodes erstellt haben, wenn es darum geht, Dinge, die sie möchten, wiederholt hinzuzufügen und zu aktualisieren.

Abgesehen davon besteht kein Zweifel, dass der Blockeditor die Zukunft der WordPress-Bearbeitungserfahrung ist. Erwarten Sie also, dass mehr Entwickler dazu beitragen, es besser und noch funktionsreicher zu machen, einschließlich derer, die immer noch Shortcodes verwenden. Mit Blick auf die Zukunft erwarten wir, dass mehr Entwickler dazu übergehen werden, WordPress-Blöcke anstelle von WordPress-Shortcodes zu verwenden und hinzuzufügen.

Wir hoffen, Sie haben viel über die Bedeutung von WordPress-Shortcodes gelernt, wofür sie sind und wann sie verwendet werden. Hoffentlich können Sie damit beginnen, Ihre eigenen benutzerdefinierten Shortcodes und schließlich Ihre eigenen Blöcke zu erstellen, die beide sicherlich nicht so schnell verschwinden werden.

Kristen Wright

Kristen schreibt seit 2011 Tutorials, um WordPress-Benutzern zu helfen. Normalerweise arbeitet sie an neuen Artikeln für den iThemes-Blog oder entwickelt Ressourcen für #WPprosper. Außerhalb der Arbeit schreibt Kristen gerne Tagebuch (sie hat zwei Bücher geschrieben!), wandert und zeltet, kocht und erlebt tägliche Abenteuer mit ihrer Familie, in der Hoffnung, ein präsenteres Leben zu führen.