So verwenden Sie Shortcodes in Ihren WordPress-Themes

Möchten Sie Shortcodes in Ihrem WordPress-Theme verwenden?

Normalerweise verwenden Sie Shortcodes in Inhaltsbereichen wie Beiträgen, Seiten oder Seitenleisten-Widgets. Manchmal möchten Sie jedoch möglicherweise einen Shortcode in Ihr WordPress-Theme einfügen.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach beliebige Shortcodes zu Ihrem WordPress-Theme hinzufügen.

Warum Shortcodes in Ihren WordPress-Themes verwenden?

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

WordPress verfügt über einige integrierte Shortcodes, es gibt jedoch auch viele beliebte WordPress-Plugins, die Shortcodes zu Ihrer Website hinzufügen.

WPForms verfügt beispielsweise über einfach zu verwendende Blöcke, bietet aber auch Shortcodes, damit Sie Formulare zu anderen Bereichen Ihrer Website hinzufügen können.

Meistens fügen Sie Shortcodes innerhalb von Inhaltsbereichen wie Beiträgen und Seiten hinzu.

Weitere Informationen finden Sie in unserer vollständigen Anleitung zum Hinzufügen eines Shortcodes in WordPress.

Manchmal möchten Sie jedoch möglicherweise einen Shortcode in Ihren WordPress-Themedateien verwenden.

Auf diese Weise können Sie dynamische Elemente zu Bereichen hinzufügen, die Sie mit dem Standard-WordPress-Post-Editor nicht bearbeiten können, z. B. Ihrer 404-Seite. Es ist auch eine einfache Möglichkeit, denselben Shortcode auf mehreren Seiten zu verwenden.

Beispielsweise können Sie der Seiten- oder Beitragsvorlage Ihres Themes einen Shortcode hinzufügen.

Sehen wir uns vor diesem Hintergrund an, wie Sie Shortcodes in Ihrem WordPress-Theme verwenden können. Verwenden Sie einfach die folgenden Quicklinks, um direkt zu der Methode zu gelangen, die Sie verwenden möchten.

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

Der einfachste Weg, Shortcodes in Ihrem WordPress-Theme zu verwenden, ist die Verwendung des vollständigen Site-Editors. Auf diese Weise können Sie jedem Teil Ihrer Website einen Shortcode-Block hinzufügen.

Diese Methode funktioniert jedoch nur mit blockbasierten Themes wie Hestia Pro. Wenn Sie kein blockfähiges Design verwenden, müssen Sie stattdessen eine andere Methode verwenden.

Um zu beginnen, gehen Sie im WordPress-Dashboard zu Themes » Editor .

Standardmäßig zeigt der vollständige Site-Editor die Home-Vorlage Ihres Themes an, Sie können jedoch Shortcodes zu jeder Vorlage oder jedem Vorlagenteil hinzufügen, z. B. der Kopf- oder Fußzeile.

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

Sie können nun auf die Vorlage oder den Vorlagenteil klicken, die Sie bearbeiten möchten.

Als Beispiel fügen wir der 404-Seitenvorlage einen Shortcode hinzu, aber die Schritte sind unabhängig von der ausgewählten Vorlage genau die gleichen.

WordPress zeigt nun eine Vorschau der Vorlage oder des Vorlagenteils an.

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

Klicken Sie anschließend auf das blaue „+“-Symbol in der oberen linken Ecke.

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

Wenn der richtige Block angezeigt wird, ziehen Sie ihn per Drag & Drop auf die Designvorlage.

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

Klicken Sie anschließend auf die Schaltfläche „Speichern“.

Besuchen Sie jetzt einfach Ihren WordPress-Blog, um den Shortcode in Aktion zu sehen.

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

Sie können Ihrem WordPress-Theme auch Shortcodes hinzufügen, indem Sie die Theme-Dateien bearbeiten. Diese Methode ist fortgeschrittener, funktioniert aber mit jedem WordPress-Theme.

Wenn Sie Ihrer Website noch keinen Code 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 ändern, aber das macht es schwierig, Ihr WordPress-Theme zu aktualisieren, ohne dass die Anpassung verloren geht. Aus diesem Grund empfehlen wir, die Theme-Dateien durch die Erstellung eines Child-Themes zu überschreiben.

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

Beim Bearbeiten Ihrer Designdateien können Sie den Shortcode nicht in demselben Format hinzufügen, das Sie für Standardinhaltsbereiche verwenden. Anstatt die Ausgabe des Shortcodes zu sehen, sehen Sie den Shortcode selbst auf dem Bildschirm.

Dies liegt daran, dass WordPress keine Shortcodes in Theme-Vorlagendateien ausführt. Stattdessen müssen Sie WordPress mithilfe der Funktion do_shortcode explizit anweisen, den Shortcode auszuführen.

Weitere Informationen finden Sie in unserer Anleitung zum einfachen Hinzufügen von benutzerdefiniertem Code.

Hier ist ein Beispiel für den Code, den Sie Ihren WordPress-Themedateien hinzufügen:

echo do_shortcode('[gallery]');

Gehostet mit ️ von WPCode

1-Klick In WordPress verwenden

Ersetzen Sie einfach „Galerie“ durch den Shortcode, den Sie verwenden möchten.

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

Wenn Sie einen Shortcode mit zusätzlichen Parametern hinzufügen, ändert sich auch das Code-Snippet ein wenig.

Stellen Sie sich vor, Sie haben mit WPForms ein Kontaktformular 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ängt.

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, sodass der echo do_shortcode Code nicht funktioniert.

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

Im folgenden Snippet prüfen wir, ob das WPForms-Snippet für die Verwendung auf unserer Website verfügbar ist:

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

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

Methode 3: Erstellen Sie Ihr eigenes WordPress-Theme (vollständig anpassbar)

Eine weitere Möglichkeit besteht darin, ein benutzerdefiniertes WordPress-Theme zu erstellen. Dies ist eine fortgeschrittenere Methode, aber Sie können damit beliebig viele Shortcodes zu jedem Bereich Ihres WordPress-Themes hinzufügen. Sie können auch andere Änderungen vornehmen, um ein Theme zu erstellen, das genau die Funktionen und das Design aufweist, die Sie möchten.

In der Vergangenheit mussten Sie komplizierten WordPress-Tutorials folgen und Code schreiben, um ein benutzerdefiniertes WordPress-Theme zu erstellen. Mit SeedProd ist es jetzt jedoch möglich, ein benutzerdefiniertes Design zu erstellen, ohne eine einzige Codezeile schreiben zu müssen.

SeedProd ist der beste WordPress-Seitenersteller und verfügt außerdem über einen Theme-Builder. Dadurch können Sie Ihre eigenen Themes per Drag & Drop entwerfen.

Eine Schritt-für-Schritt-Anleitung finden Sie in unserer Anleitung zum Erstellen eines benutzerdefinierten WordPress-Themes (ohne Code).

Nachdem Sie ein Theme erstellt haben, können Sie Shortcodes zu jedem Teil Ihrer WordPress-Website hinzufügen, indem Sie zu SeedProd » Theme Builder gehen.

Suchen Sie hier die Vorlage, in der Sie einen Shortcode verwenden möchten.

Bewegen Sie dann einfach Ihre Maus über die Vorlage und klicken Sie auf „Design bearbeiten“, wenn sie angezeigt wird.

Dadurch wird die Vorlage im Drag-and-Drop-Seitenersteller von SeedProd geöffnet.

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

Klicken Sie in der Live-Vorschau einfach auf den Shortcode-Block, um ihn auszuwählen.

Sie können jetzt Ihren Shortcode in das Feld „Shortcode“ hinzufü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“.

Anschließend möchten Sie der Shortcode-Ausgabe möglicherweise etwas Stil verleihen, 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 anschließend „Veröffentlichen“, um den Shortcode live zu schalten.

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

Wir hoffen, dass Ihnen dieses Tutorial dabei geholfen hat, die Verwendung von Shortcodes in Ihren WordPress-Themes zu erlernen. Vielleicht möchten Sie auch unseren Leitfaden zum Erstellen einer Landingpage in WordPress und unsere Expertenauswahl für die besten Social-Media-Plugins für WordPress 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.

Der Beitrag „So verwenden Sie Shortcodes in Ihren WordPress-Themes“ erschien zuerst auf WPBeginner.