So verwenden Sie Shortcodes in Ihren WordPress-Themes

Wir verwenden Shortcodes in WordPress-Themes seit Jahren, und sie sind zu einem Standardbestandteil unserer Website-Erstellung geworden.

Sie lösen ein einfaches Problem: Wie fügt man dieselbe Funktionalität an mehreren Stellen hinzu, ohne Code zu duplizieren oder die Verwaltung Ihrer Theme-Dateien zu erschweren.

Shortcodes ermöglichen es Ihnen, einfache, wiederverwendbare Code-Schnipsel zu erstellen, die überall auf Ihrer Website funktionieren.

Ob Sie benutzerdefinierte Inhalte anzeigen, Formulare hinzufügen oder interaktive Elemente erstellen müssen, Shortcodes bieten eine saubere Möglichkeit, diese Funktionalität hinzuzufügen und sie überall dort zu verwenden, wo sie benötigt wird.

In diesem Leitfaden zeigen wir Ihnen, wie Sie Kurzcodes in Ihren Themes mit verschiedenen Methoden verwenden.

Warum Shortcodes in Ihren WordPress-Themes verwenden?

Shortcodes können alle Arten von Funktionen zu Ihrer Website hinzufügen, darunter Bildergalerien, Formulare, Social-Media-Feeds und vieles mehr.

WordPress wird mit einigen integrierten Shortcodes geliefert, aber es gibt auch viele beliebte WordPress-Plugins, die Shortcodes zu Ihrer Website hinzufügen.

Zum Beispiel hat WPForms einfach zu bedienende Blöcke, bietet aber auch Shortcodes, damit Sie Formulare in andere Bereiche Ihrer Website einfügen können.

Meistens fügen Sie Shortcodes in Inhaltsbereiche wie Beiträge und Seiten ein.

Um mehr zu erfahren, lesen Sie bitte unseren vollständigen Leitfaden dazu, wie man einen Shortcode in WordPress einfügt.

Manchmal möchten Sie jedoch vielleicht einen Shortcode innerhalb Ihrer WordPress-Theme-Dateien verwenden.

Dies ermöglicht es Ihnen, dynamische Elemente zu Bereichen hinzuzufügen, die Sie mit dem Standard-WordPress-Beitragseditor nicht bearbeiten können, wie z. B. Ihre Archivseite. Es ist auch eine einfache Möglichkeit, denselben Shortcode auf mehreren Seiten zu verwenden.

Zum Beispiel könnten Sie einen Shortcode in die Seiten- oder Beitrags-Vorlage Ihres Themes einfügen.

Lassen Sie uns nun sehen, wie Sie Shortcodes in Ihrem WordPress-Theme verwenden können. Verwenden Sie einfach die Schnelllinks unten, um direkt zu der Methode zu springen, die Sie verwenden möchten:

• Methode 1: Verwenden des Full-Site-Editors (nur Block-Themes)
• Methode 2: Bearbeiten Ihrer WordPress-Theme-Dateien (funktioniert mit jedem WordPress-Theme)
• Methode 3: Hinzufügen von Shortcodes mit einem Page Builder (benutzerdefinierte Themes)

Methode 1: Verwenden des Full-Site-Editors (nur Block-Themes)

Der einfachste Weg, einen WordPress-Kurzcode zu Ihrem Theme hinzuzufügen, ist die Verwendung des Full Site Editors. Dies ermöglicht es Ihnen, einen Kurzcode-Block zu jedem Teil Ihrer Website hinzuzufügen.

Diese Methode funktioniert jedoch nur mit blockbasierten Themes wie Hestia Pro. Wenn Sie kein Block-fähiges Theme verwenden, müssen Sie eine andere Methode anwenden.

Um zu beginnen, navigieren Sie im WordPress-Dashboard zu Design » Editor.

Standardmäßig zeigt der Full Site Editor die Startvorlage Ihres Themes an, aber Sie können Kurzcodes zu jeder Vorlage hinzufügen.

Um alle verfügbaren Optionen anzuzeigen, wählen Sie „Vorlagen“ aus.

Sie können nun auf die benutzerdefinierte Seiten-Vorlage klicken, die Sie bearbeiten möchten.

Als Beispiel fügen wir einen Shortcode zur 404-Seiten-Vorlage hinzu, aber die Schritte sind genau dieselben, unabhängig davon, welche Vorlage Sie auswählen.

WordPress zeigt nun eine Vorschau der Vorlage an.

Um einen Shortcode hinzuzufügen, klicken Sie auf das kleine Bleistiftsymbol.

Wenn das erledigt ist, klicken Sie auf das blaue „+“-Symbol in der oberen linken Ecke des Block-Editors.

In der Suchleiste müssen Sie „Shortcode“ eingeben.

Wenn der richtige Block erscheint, ziehen Sie ihn per Drag & Drop auf die Theme-Vorlage.

Sie können nun den Shortcode, den Sie verwenden möchten, einfügen oder eingeben.

Klicken Sie danach auf die Schaltfläche „Speichern“.

Besuchen Sie nun einfach Ihr WordPress-Blog, um den Shortcode in Aktion zu sehen.

Methode 2: Bearbeiten Ihrer WordPress-Theme-Dateien (funktioniert mit jedem WordPress-Theme)

Sie können auch Shortcodes zu Ihrem WordPress-Theme hinzufügen, indem Sie die Theme-Dateien bearbeiten. Diese Methode ist fortgeschrittener, funktioniert aber sowohl mit klassischen als auch mit Block-Themes.

Wenn Sie noch keinen Code auf Ihrer Website hinzugefügt haben, lesen Sie unsere Schritt-für-Schritt-Anleitung zum Kopieren und Einfügen von Code in WordPress.

Sie können die einzelnen Theme-Dateien direkt bearbeiten, aber das erschwert das Aktualisieren Ihres WordPress-Themes ohne Verlust von Anpassungen. Aus diesem Grund empfehlen wir, die Theme-Dateien zu überschreiben, indem Sie ein Child-Theme erstellen.

Wenn Sie ein benutzerdefiniertes Theme erstellen, können Sie den Code in Ihren vorhandenen Theme-Dateien hinzufügen oder ändern.

Beim Bearbeiten Ihrer Theme-Dateien können Sie den Shortcode nicht im gleichen Format hinzufügen, wie Sie es mit Standard-Inhaltsbereichen tun. Anstatt die Ausgabe des Shortcodes zu sehen, sehen Sie den Shortcode selbst auf dem Bildschirm.

Dies geschieht, weil WordPress Shortcodes nicht innerhalb von Theme-Template-Dateien ausführt. Stattdessen müssen Sie WordPress explizit anweisen, den Shortcode mithilfe der Funktion do_shortcode auszuführen.

Weitere Informationen finden Sie in unserem Leitfaden zum einfachen Hinzufügen von benutzerdefiniertem Code.

Hier ist ein Beispiel für den Code, den Sie zu Ihren WordPress-Theme-Dateien hinzufügen werden:

echo do_shortcode('[gallery]');

Ersetzen Sie einfach 'gallery' durch den Shortcode, den Sie verwenden möchten.

Wenn Sie nicht sicher sind, wo Sie den Shortcode einfügen sollen, lesen Sie bitte unseren Einsteigerleitfaden zur WordPress-Vorlagenhierarchie.

Wenn Sie einen Shortcode mit zusätzlichen Parametern hinzufügen, müssen Sie einen etwas anderen Code-Snippet verwenden.

Stellen Sie sich vor, Sie haben ein Kontaktformular mit WPForms erstellt. In diesem Fall müssen Sie den Standard-WPForms-Shortcode plus die ID des Formulars verwenden:

echo do_shortcode("[wpforms id='92']");

Fehlerbehebung: Was tun, wenn do_shortcode nicht funktioniert

Manchmal fügen Sie möglicherweise einen Shortcode zu einer Theme-Datei hinzu, aber die Ausgabe des Codes erscheint nicht auf Ihrer WordPress-Website. Dies bedeutet normalerweise, dass der Shortcode von einem WordPress-Plugin oder einem anderen Code auf Ihrer Website abhängig ist.

Wenn die Funktion do_shortcode nicht funktioniert, stellen Sie sicher, dass das Plugin, das den Shortcode bereitstellt, installiert und aktiviert ist, indem Sie zu Plugins » Installierte Plugins gehen.

Im folgenden Bild ist WPForms installiert, aber deaktiviert, daher funktioniert der Code echo do_shortcode nicht.

Sie können auch überprüfen, ob ein Shortcode verfügbar ist, indem Sie die Funktion shortcode_exists() zu Ihrer index.php-Datei hinzufügen.

Im folgenden Ausschnitt prüfen wir, ob der WPForms-Snippet auf unserer Website verwendet werden kann:

if ( shortcode_exists( 'wpforms' ))  {
  echo do_shortcode("[[wpforms id='147']]");
}

Wenn Sie die Shortcode-Ausgabe auf Ihrer Website immer noch nicht sehen, versuchen Sie, den WordPress-Cache zu löschen, da Sie möglicherweise eine veraltete Version Ihrer Website sehen.

Methode 3: Hinzufügen von Shortcodes mit einem Page Builder (benutzerdefinierte Themes)

Eine weitere Option ist die Erstellung eines benutzerdefinierten WordPress-Themes. Dies ist eine fortgeschrittenere Methode, aber sie ermöglicht es Ihnen, beliebig viele Shortcodes in jeden Bereich Ihres WordPress-Themes einzufügen. Sie können auch andere Änderungen vornehmen, um genau die Funktionen und das Design zu erstellen, das Sie sich wünschen.

Früher musste man normalerweise einem komplizierten Tutorial folgen oder benutzerdefinierten Code schreiben, um ein benutzerdefiniertes WordPress-Theme zu erstellen. Jetzt können Sie jedoch ein benutzerdefiniertes Theme erstellen, ohne eine einzige Zeile Code zu schreiben, indem Sie SeedProd verwenden.

SeedProd ist der beste WordPress Page Builder und kommt auch mit einem Theme Builder sowie kompletten Site-Kits und Vorlagen. Er ermöglicht es Ihnen, Ihre eigenen Themes mit einem Drag-and-Drop-Editor zu gestalten.

Mehrere unserer Partner-Marken haben ihre gesamten Websites damit gestaltet, und ihre Teams liebten, wie anfängerfreundlich und unkompliziert die Nutzung ist.

Eine Schritt-für-Schritt-Anleitung finden Sie in unserem Leitfaden zur Erstellung eines benutzerdefinierten WordPress-Themes (ohne Code).

Nach der Erstellung eines Themes können Sie Shortcodes zu jedem Teil Ihrer WordPress-Website hinzufügen, indem Sie zu SeedProd » Theme Builder gehen.

Hier finden Sie die Vorlage, in der Sie den Shortcode verwenden möchten.

Dann fahren Sie einfach mit der Maus über diese Vorlage und klicken Sie auf 'Design bearbeiten', wenn sie erscheint.

Dies öffnet die Vorlage in SeedProds Theme-Builder.

Scrollen Sie im linken Menü zum Abschnitt „Erweitert“. Finden Sie hier den Shortcode-Block und ziehen Sie ihn in Ihr Layout.

Klicken Sie im Live-Vorschau einfach, um den Shortcode-Block auszuwählen.

Sie können Ihren Shortcode jetzt in das Feld „Shortcode“ einfügen.

Standardmäßig zeigt SeedProd die Shortcode-Ausgabe nicht in der Live-Vorschau an.

Um Ihren Shortcode in Aktion zu sehen, klicken Sie auf den Schalter „Shortcode-Option anzeigen“.

Danach möchten Sie möglicherweise einige Stile zum Shortcode-Output hinzufügen, indem Sie die Registerkarte „Erweitert“ auswählen.

Hier können Sie den Abstand ändern, benutzerdefiniertes CSS hinzufügen und sogar CSS-Animationseffekte hinzufügen.

Wenn Sie mit dem Aussehen der Seite zufrieden sind, klicken Sie einfach auf die Schaltfläche „Speichern“.

Wählen Sie danach „Veröffentlichen“, um den Shortcode live zu schalten.

Sie können Ihre Website jetzt besuchen, um den benutzerdefinierten Shortcode in Aktion zu sehen.

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie WordPress-Shortcodes in Ihren Themes verwenden. Möglicherweise möchten Sie auch unseren Leitfaden zum Erstellen einer Landingpage in WordPress und unseren ultimativen Leitfaden zu den effektivsten WordPress-Designelementen lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.