Articles

The Complete Guide to WordPress Shortcodes

Vor dem WordPress-Block-Editor waren WordPress-Shortcodes eines der besten Dinge, um den WordPress-Editor zu verwenden, um das Hinzufügen von Plugin- und Theme-Funktionen zu Seiten, Posts und anderen Bereichen einer WordPress-Website zu vereinfachen.

WordPress Shortcodes Ultimate Guide

Was bedeutet das mit dem Wechsel zum Blockeditor für die meisten älteren Plugins und Websites, die 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.

In diesem Handbuch

Was sind WordPress-Shortcodes?

Ein WordPress-Shortcode ist ein wiederverwendbares, dynamisches Stück Code, das eingepackt ist . Mit Shortcodes können Sie ganz einfach bestimmte Funktionen von WordPress selbst oder eines Plugins oder Themas in einen beliebigen Beitrag, eine Seite, einen benutzerdefinierten Beitragstyp oder ein Widget einfügen. Denken Sie an WordPress-Shortcodes wie „Verknüpfungen“ oder Makros auf Ihrer Website.

Sie können WordPress-Shortcodes verwenden, um statische Inhalte anzuzeigen, die zu mühsam sind, um sie weiter zu codieren und zu wiederholen. Sie können Shortcodes auch verwenden, um dynamische Inhalte anzuzeigen, z. B. Bildergalerien, Audioplayer für Podcasts, Veranstaltungskalender oder das Ändern von Statistiken für bestimmte Daten.

Shortcode-Format

Beim Einfügen von Shortcodes kann das Basisformat auf verschiedene Arten „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 einem anderen Shortcode verschachtelt sein.

Ein Shortcode kann beispielsweise die folgenden Formate haben:

Some text
<a href=“http://mysite.com/“>HTML content</a>
Some text more text
This is a custom icon

Shortcode-Attribute

Shortcodes sind auch flexibel, da sie mit Attributen erweitert werden können. Mit Attributen bieten Shortcodes zusätzliche Anpassungsmöglichkeiten, indem Sie einfach zusätzliche Codeausschnitte innerhalb des Shortcodes hinzufügen.

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

Hier sind einige Beispiele für Shortcodes mit Attributen.

]

Posts Heading

Integrierte WordPress-Shortcodes

WordPress enthält mehrere integrierte Shortcodes zum Rendern bestimmter Arten von Inhalten.

]

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

]

Der Caption Shortcode wird hauptsächlich für einzelne Bilder verwendet und ermöglicht es Ihnen, Beschriftungen um Inhalte zu wickeln.

]

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

]

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

]

Der Playlist-Shortcode implementiert die Funktionalität, eine Sammlung von WordPress-Audio- oder Videodateien in einem Beitrag anzuzeigen.

]

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

Plugin & Theme-Shortcodes

Bestimmte WordPress-Themes und Plugins verfügen über sofort einsatzbereite Shortcodes, die Sie in den Post- oder Seiteneditor einfügen und das Ergebnis im Frontend rendern können. Bis heute verwenden viele Themes und Plugins immer 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 von ihnen vorgestylt oder bereitgestellt werden.

Benutzerdefinierte Shortcodes

Die meisten erfahrenen Entwickler entscheiden sich dafür, ihre eigenen Shortcodes zu erstellen, was im Wesentlichen die Zeit verkürzt, die benötigt wird, um etwas zu codieren, das sich wiederholt. Alles, was Sie brauchen, ist eine einfache zusätzliche Datei in Ihrem Dateiverzeichnis, um die benutzerdefinierten Shortcodes zu erstellen.PHP-Datei. Wenn Sie die Grundlagen benutzerdefinierter Shortcodes erlernen 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 einen einfachen Satz von Funktionen zum Erstellen von WordPress Shortcodes zur Verwendung in Posts und Seiten.

Mit der Shortcode-API können Plugin-Entwickler dynamische Inhalte erstellen, die Benutzer Seiten oder Posts hinzufügen können, indem sie den entsprechenden Shortcode in den Inhaltsbereich einfügen. Glücklicherweise übernimmt die API das komplizierte Parsen und macht das Schreiben eines benutzerdefinierten regulären Ausdrucks für jeden Shortcode überflüssig. Darüber hinaus sind Hilfsfunktionen zum Festlegen 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
  • Umschließende vs selbstschließende Shortcodes
  • Funktionsreferenz
  • Einschränkungen
  • Formale Syntax

Shortcodes im klassischen Editor

In der Vergangenheit wurden Shortcodes in den klassischen Editor eines Beitrags oder einer Seite eingefügt, wie diese:

WordPress Shortcode

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 lang geplanten Gutenberg-Editors oder WordPress-Blockeditors als Hauptseiten- und Post-Editor für WordPress und ersetzte den klassischen textbasierten WordPress-Editor, den es seit Jahren gibt.

Hier ist ein Blick auf den Content Editor vor WordPress 5.5 (ah, das waren die Tage!)

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

Laden Sie das Ebook herunter: Ultimativer Leitfaden für WordPress 5.0 & Der Gutenberg-Editor

Mit dem neuen WordPress-Editor ist an sich nichts falsch. 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 Textverarbeitungsanwendungen wie Microsoft Word erinnern. Stattdessen wurden die Formatierungsoptionen für jeden Block durch die Optionen in 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 — Sie nennen es.

Es gibt sogar einen WordPress-Block für Formatierung, Spacer und Divider, und sie sind lässig in Kategorien für den einfachen Zugriff angeordnet.

Alle Optionen und Steuerelemente, die sich oben befanden, befinden sich jetzt auf der rechten Seite des Seiten- / Beitragseditors.

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

Wiederverwendbare Blöcke vs. Shortcodes

Die alte Art, eine Reihe vordefinierter Ausgaben im WordPress Classic Editor zu speichern, bestand darin, eigene Shortcodes zu erstellen. Jetzt wurde diese Methode durch wiederverwendbare Blöcke ersetzt.

Die Möglichkeit, vordefinierte und vordefinierte Blöcke zu speichern, hat es auch einfacher gemacht, das Layout und 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. formatieren., Sie würden das nicht auf jeder Seite tun wollen, der Sie diesen Knopf hinzufügen. Wenn Sie es in einen wiederverwendbaren Block ändern, wird die Schaltfläche auf Ihrer WordPress-Site gespeichert und 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, 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 das Bearbeiten von Inhalten vereinfacht, da Benutzer lieber ein Muster auswählen und den Inhalt aktualisieren möchten, als von einer leeren Leinwand aus zu beginnen.

Block-Styling-Optionen

Mit jedem Thema gibt es verschiedene Stiloptionen. Normalerweise wird der Stil des Inhalts, den Sie auf jeder Site hinzufügen, von Ihrem 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.

& Vollständige Site-Bearbeitung

Mit all diesen Fortschritten und Änderungen in der Art und Weise, wie wir Seiten auf WordPress erstellen und erstellen, kommt die Idee und der eventuelle Übergang zu einer sogenannten vollständigen Site-Bearbeitung.

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

Mit der vollständigen Bearbeitung der Website und der Einführung des Blockbuilders geht der Trend dahin, alle Abschnitte einer Seite oder eines Beitrags mithilfe von 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 darüber, wie sie aussehen sollen.

In Zukunft müssen Plugin- und Theme-Entwickler bei der Entwicklung ihrer Software einen anderen Ansatz verfolgen, um sich an die neue vollständige Site-Bearbeitung und das Erstellen von Seiten des WordPress-Blockeditors anzupassen. Während die vollständige Anwendung davon noch am Horizont ist, ist es 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 oder 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.

Hinweis: Das Einfügen eines Shortcodes in einen Absatzblock funktioniert möglicherweise nicht immer, daher müssen Sie möglicherweise stattdessen den Shortcode-Block verwenden.

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.

WordPress-Shortcode-Block

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

Was bedeutet der Blockeditor für WordPress Shortcodes?

Der WordPress-Blockeditor hat große Auswirkungen auf Shortcodes. Lassen Sie uns einige der wichtigsten Dinge über WordPress-Shortcodes im Zeitalter des Blockeditors behandeln.

1. Der WordPress-Blockeditor ändert grundlegend die Notwendigkeit und den Zweck von Shortcodes für die meisten Plugins und Themes. Bei einem blockbasierten Bearbeitungssystem hat jedes „Element“ auf der Seite einen eigenen Block, anstatt in einem bearbeitbaren 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 von 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 sie Shortcodes verwenden. Das Konzept und das Format von Shortcodes können für einige Benutzer eine steile Lernkurve aufweisen, sodass der Blockansatz möglicherweise einfacher ist.

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

gravity forms Formular einfü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 Block Formulare 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 sich für die Zukunft ihrer Shortcode-Implementierungen entscheiden und ihre Shortcodes in Blöcke konvertieren. Wie oben erwähnt, verwenden Hunderte von Themes, Plugins und Entwicklern immer noch Shortcodes auf ihren Websites und Anwendungen. Die Annahme von Blöcken kann langsam sein, aber wenn Benutzer mit dem neuen Blockeditor vertrauter werden, werden Benutzer wahrscheinlich eine Blockoption anfordern.Für diejenigen Entwickler, die noch meilenweit davon entfernt sind, das WordPress-Blockbearbeitungssystem zu übernehmen, kann das vollständige Site-Editing-Konzept mit ihren Shortcodes Hand in Hand gehen. Plugins wie Überprüfungs- und Bewertungs-Plugins, Audioplayer, Datumsticker, Galerien, Kontaktformulare, und die meisten anderen, die noch Shortcodes verwenden, sind immer noch „im Spiel.“

4. Shortcodes werden nicht so schnell verschwinden. Das ist wahrscheinlich der Grund, warum der WordPress-Blockeditor den Shortcode-Block anbietet, um die Shortcode-Verwendung aufrechtzuerhalten. Da Shortcodes vor WordPress 5.0 und dem Blockeditor so weit verbreitet und implementiert waren, ist es wichtig, dass zukünftige Versionen von WordPress weiterhin 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 ein Entwickler eines Plugins oder Themas sind oder WordPress-Websites erstellen und Shortcodes in einem benutzerdefinierten Thema verwenden, können Sie Shortcodes als Blöcke überdenken.

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

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 problemlos in WordPress-Blöcke konvertieren.

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

Nehmen Sie dieses grundlegende Beispiel von Caldera Forms:

 <?php/** * Handler for shortcode * * @param $atts * * @return string */function caldera_learn_basic_blocks_post_title_shortcode_handler($atts){$atts = shortcode_atts(, $atts, 'cl_post_title');return caldera_learn_basic_blocks_post_title($atts, $atts);}/** * 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, )) {$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 verwendet die Post-ID und eine Überschriftenebene (h2, h3, he) und gibt den Titel des Posts im HTML-Code für die Überschrift aus.

Sobald dies 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 Plugins und Ressourcen online, die Ihnen helfen würden, zu diesem Schritt zu gelangen, einschließlich der offiziellen Dokumentation von WordPress zum Schreiben Ihres ersten Blocktyps. Sie können Igor Benics Beitrag auch lesen, 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.

Hinweis: Der Vorgang kann bei verschiedenen Shortcodes etwas anders sein. Plugins und Themes mit Shortcodes können aufgrund der enormen zu berücksichtigenden Attribute einen anderen Ansatz verfolgen. Grundsätzlich müssen Sie möglicherweise viel recherchieren und viel Zeit damit verbringen, dies zu codieren.

Das Urteil für WordPress-Shortcodes

WordPress-Shortcodes sind und bleiben einer der wichtigsten Teile von WordPress. Shortcodes haben vielen Plugin-Entwicklern geholfen, ihre Plugins benutzerfreundlicher zu gestalten, und viele Theme-Entwickler erweitern die Funktionen ihrer Themes. Shortcodes haben auch die Anzahl der Kopfschmerzen reduziert, die viele Content-Ersteller und Website-Besitzer nach dem Erstellen ihrer benutzerdefinierten Shortcodes haben, wenn es darum geht, wiederholt Dinge hinzuzufügen und zu aktualisieren, die sie wollen.

Nachdem das gesagt wurde, gibt es keinen Zweifel, dass der Block-Editor die Zukunft der WordPress-Bearbeitungserfahrung ist, also erwarten Sie, 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 WordPress-Blöcke anstelle von WordPress-Shortcodes verwenden und hinzufügen werden.

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

Teilen über:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.