Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Tasse
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

So verwenden Sie Shortcodes in Ihren WordPress-Sidebar-Widgets

Nach unserer Erfahrung ist eines der grundlegenden Dinge, die Sie in WordPress lernen sollten, die Verwendung von Shortcodes in Ihren Seitenleisten-Widgets.

Das liegt daran, dass viele Plugins Shortcodes verwenden, um ihre Inhalte anzuzeigen, anstatt eigene Widgets zu haben. Zu wissen, wie man Shortcodes in Seitenleisten verwendet, ermöglicht es Ihnen, mehr mit Ihrer Website zu tun und das Beste aus verschiedenen Plugins herauszuholen.

Dieser Artikel zeigt Ihnen, wie Sie Shortcodes in Ihren WordPress-Seitenleisten-Widgets verwenden. Wir behandeln Methoden für klassische Themes und Block-Themes.

So verwenden Sie Shortcodes in Ihren WordPress-Seitenleisten-Widgets

Warum Shortcodes in Ihren WordPress-Sidebar-Widgets verwenden?

Shortcodes ermöglichen es Ihnen, erweiterte Inhalte und Funktionen zu Ihrer Website hinzuzufügen, einschließlich Kontaktformularen, Tabellen, Top-Kommentatoren und vielem mehr. WordPress wird mit mehreren integrierten Shortcodes geliefert, aber einige Plugins fügen auch ihre eigenen Shortcodes hinzu.

Sie können zum Beispiel mit einem Shortcode von Smash Balloon Instagram Feed Instagram-Fotos in der WordPress-Seitenleiste anzeigen.

Ein Beispiel für ein Social-Media-Sidebar-Widget

Diese Inhalte werden dann auf Ihrer gesamten WordPress-Website angezeigt, sodass Sie sie nicht manuell zu jeder Seite und jedem Beitrag hinzufügen müssen. Dies kann Ihnen viel Zeit und Mühe sparen und hilft, das Design Ihrer Website konsistent zu halten.

In diesem Sinne sehen wir uns einige verschiedene Möglichkeiten an, Shortcodes in WordPress-Seitenleisten-Widgets hinzuzufügen und zu verwenden. Verwenden Sie einfach die Schnelllinks unten, um direkt zu der Methode zu springen, die Sie verwenden möchten.

Methode 1: Hinzufügen von Shortcodes zum WordPress Block Widget Editor (Klassische Themes)

Die meisten kostenlosen und kostenpflichtigen klassischen WordPress-Themes werden mit Widget-fähigen Seitenleisten geliefert. In diesem Sinne können Sie Ihrer Website-Seitenleiste oft einfach ein Shortcode-Widget hinzufügen.

Gehen Sie zuerst zu Darstellung » Widgets in Ihrem Dashboard. Hier sehen Sie alle verschiedenen Bereiche, in denen Sie Widgets in WordPress hinzufügen können, einschließlich der Seitenleiste.

Hinzufügen eines Shortcode-Widgets zu einer WordPress-Seitenleiste

Klicken Sie einfach auf die Schaltfläche „+ Block hinzufügen“ und beginnen Sie mit der Eingabe von „Shortcode“.

Wenn der richtige Block erscheint, ziehen Sie ihn auf die WordPress-Seitenleiste.

So fügen Sie einen Shortcode zur WordPress-Seitenleiste hinzu

Sie können nun Ihren Shortcode zum Block hinzufügen.

Wenn Sie fertig sind, vergessen Sie nicht, auf „Aktualisieren“ zu klicken, um die Änderungen live zu schalten.

Veröffentlichen eines Shortcode-Blocks in WordPress

Sie können nun Ihren WordPress-Blog oder Ihre Website besuchen, um den Shortcode in Aktion zu sehen.

Methode 2. Hinzufügen von Shortcodes zum Full Site Editor (Block-Themes)

Wenn Sie ein Block-Theme verwenden, können Sie einen Shortcode mit dem Full Site Editor zur Seitenleiste hinzufügen. Gehen Sie in Ihrem WordPress-Dashboard zu Themes » Editor.

Öffnen des WordPress Full-Site-Editors (FSE)

Sie sehen nun einige Einstellungen, um Ihr Block-Theme zu bearbeiten.

Um die Seitenleiste Ihres Themes zu bearbeiten, müssen Sie normalerweise auf das Menü „Muster“ klicken.

Das Menü „Muster“ im Full Site Editor anklicken

Scrollen Sie nun nach unten zu „Template Parts“.

Hier finden Sie die Standard-Vorlagenteile Ihres Block-Themes, wie Header, Footer und Sidebars. Klassische Themes kategorisieren diese Elemente typischerweise als Widget-Bereiche.

Genau wie klassische Themes kann Ihr Block-Theme ein Seitenleisten-Template-Teil haben oder auch nicht. In diesem Fall müssen Sie möglicherweise selbst eines erstellen. In unserem Anfängerleitfaden zur WordPress Full Site Editing erfahren Sie, wie das geht.

Sobald Sie Ihre Sidebar gefunden haben, klicken Sie einfach darauf.

Auswahl des Sidebar-Template-Teils im Full Site Editor

Klicken Sie dann einfach auf den Bleistift 'Bearbeiten'-Button.

Dies bringt Sie zum Block-Editor, um die Sidebar zu bearbeiten.

Bearbeiten des Seitenleisten-Vorlagenteils im Full Site Editor

Jetzt können Sie, genau wie bei der Verwendung des Block-Editors, überall auf die Schaltfläche „Block hinzufügen“ klicken.

Wählen Sie danach den Block „Shortcode“ aus.

Hinzufügen des Shortcode-Blocks zu einer Seitenleiste im Full Site Editor

Sobald Sie fertig sind, fügen Sie den Shortcode einfach wie gewohnt hinzu.

Klicken Sie dann auf „Speichern“, um Ihre Änderungen zu bestätigen.

Änderungen an einer Sidebar im Full Site Editor speichern

Profi-Tipp: Wenn Sie kürzlich von einem klassischen Theme zu einem Block-Theme gewechselt haben und Ihr altes Seitenleisten-Widget als Block verwenden möchten, lesen Sie unseren Leitfaden, wie Sie ein WordPress-Widget in einen Block konvertieren.

Methode 3: Verwendung des benutzerdefinierten HTML-Widgets (flexibler)

Manchmal möchten Sie neben dem Shortcode auch andere Inhalte anzeigen. Zum Beispiel kann RafflePress einen Wettbewerb oder ein Gewinnspiel über einen Shortcode zu Ihrer Seitenleiste hinzufügen. Um dem Wettbewerb noch mehr Aufmerksamkeit zu schenken, möchten Sie vielleicht eine Überschrift über dem Wettbewerb anzeigen.

Ein Beispiel für eine Verlosung, die mit RafflePress erstellt wurde

Anstatt separate Shortcode- und Überschriftenblöcke zu erstellen, können Sie einfach den Shortcode und Text zu einem Benutzerdefinierten HTML-Block hinzufügen.

Dies hilft Ihnen, die verschiedenen Inhalte in einem schönen Layout anzuordnen. Sie können den Block auch mit HTML gestalten, sodass Sie genau steuern können, wie er in der Seitenleiste aussieht.

Weitere Details finden Sie in unserem vollständigen RafflePress-Testbericht.

Der Block „Benutzerdefiniertes HTML“ unterstützt standardmäßig keine Shortcodes, aber Sie können dies leicht ändern, indem Sie benutzerdefinierten Code zu WordPress hinzufügen. Nach dem Hinzufügen dieses Codes können Sie Shortcodes in jedem Block „Benutzerdefiniertes HTML“ auf Ihrer gesamten WordPress-Website verwenden.

Oft finden Sie Anleitungen, die Anweisungen zum Hinzufügen von benutzerdefiniertem Code zur functions.php-Datei Ihrer Website enthalten. Dies wird jedoch nicht empfohlen, da Fehler im Code häufige WordPress-Fehler verursachen oder Ihre Website sogar vollständig beschädigen können.

Dafür gibt es WPCode.

Dieses kostenlose Plugin erleichtert das Hinzufügen von benutzerdefiniertem CSS, PHP, HTML und mehr zu WordPress, ohne Ihre Website zu gefährden. Noch besser, es kommt mit einer Bibliothek von fertigen Snippets, einschließlich Code, der es Ihnen ermöglicht, Shortcodes in Text-Widgets zu verwenden.

Zuerst müssen Sie WPCode installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung, wie Sie ein WordPress-Plugin installieren.

Gehen Sie danach im WordPress-Dashboard zu Code-Snippets » Snippet hinzufügen. Sie können jetzt mit der Eingabe von 'shortcode' beginnen.

Hinzufügen eines Code-Snippets zu Ihrer WordPress-Website

Wenn er erscheint, bewegen Sie Ihre Maus über den folgenden Ausschnitt: „Shortcode-Ausführung in Text-Widgets aktivieren.“

Sie können dann auf 'Snippet verwenden' klicken.

Hinzufügen eines Shortcodes zu einem benutzerdefinierten HTML-Block mit Code

Dies öffnet den Snippet im WPCode-Editor. WPCode konfiguriert die Snippet-Einstellungen für Sie, sodass Sie einfach auf den Schalter „Inaktiv“ klicken können, damit er blau wird.

Wenn Sie fertig sind, klicken Sie auf 'Aktualisieren', um den Ausschnitt live zu schalten.

Shortcode zu einem Sidebar-Widget mit Code hinzufügen

Nun können Sie einen Shortcode zu jedem Text-Widget hinzufügen.

Gehen Sie einfach zu Design » Widgets und geben Sie 'Benutzerdefiniertes HTML' in die Suchleiste ein.

Hinzufügen eines benutzerdefinierten HTML-Widgets zu einer WordPress-Seitenleiste

Wenn der richtige Block erscheint, ziehen Sie ihn auf die Seitenleiste Ihrer Website.

Wenn das erledigt ist, können Sie Ihr HTML und Ihren Shortcode zum Block hinzufügen.

Hinzufügen eines benutzerdefinierten HTML-Widgets zu einer WordPress-Website

Wenn Sie mit der Einrichtung des Widgets zufrieden sind, klicken Sie auf „Aktualisieren“.

Wenn Sie nun Ihre Website besuchen, sehen Sie den Shortcode und das benutzerdefinierte HTML live.

FAQs: Shortcodes in WordPress-Seitenleisten-Widgets verwenden

Unabhängig davon, welches Theme Sie verwenden, sollten Sie in der Lage sein, Shortcodes mit einer der oben genannten Methoden zur Sidebar hinzuzufügen.

Wenn Sie jedoch zusätzliche Hilfe benötigen, finden Sie hier einige der am häufigsten gestellten Fragen zum Hinzufügen von Shortcodes zur Seitenleiste.

Wie ändere ich, wo das Sidebar-Widget erscheint?

Der Speicherort der Seitenleiste wird von Ihrem WordPress-Theme gesteuert. Wenn Sie mit der Position der Seitenleiste nicht zufrieden sind, können Sie diese möglicherweise über die Theme-Einstellungen ändern.

Viele WordPress-Themes lassen Sie zwischen verschiedenen Layouts wählen. Oft beinhaltet dies die Anzeige der Seitenleiste auf verschiedenen Seiten des Bildschirms.

Sie können zum WordPress Theme Customizer oder zum Full Site Editor gehen, um die verfügbaren Seitenleistenbereiche anzuzeigen.

Wie füge ich eine Sidebar zu meinem WordPress-Theme hinzu?

Wenn Ihr Theme keine Seitenleiste hat, können Sie ein Child-Theme erstellen und dann mit Code eine Seitenleiste hinzufügen.

Lesen Sie unseren Leitfaden So fügen Sie benutzerdefinierte Header, Footer und Seitenleisten in WordPress hinzu für weitere Informationen.

Wenn Sie nicht gerne Code schreiben, können Sie auch ein benutzerdefiniertes WordPress-Theme mit einem Plugin wie SeedProd erstellen. Sie können dieses beliebte Page-Builder-Plugin verwenden, um Ihr eigenes Theme und Ihre eigene Seitenleiste mit einem einfachen Drag-and-Drop-Editor zu gestalten.

Schritt-für-Schritt-Anleitungen finden Sie in unserem Leitfaden zur Erstellung eines benutzerdefinierten WordPress-Themes ohne Code.

Wie verwende ich einen anderen Shortcode für jeden Beitrag oder jede Seite?

Manchmal möchten Sie vielleicht verschiedene Shortcodes in einigen Ihrer Beiträge und Seiten verwenden. Zum Beispiel möchten Sie vielleicht die beliebtesten Beiträge auf Ihrer Archivseite anzeigen und Anzeigen schalten auf Ihrer Homepage.

Weitere Informationen finden Sie in unserem Leitfaden zur Anzeige unterschiedlicher Seitenleisten für jeden Beitrag und jede Seite in WordPress.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einfach Shortcodes zu Ihren WordPress-Seitenleisten-Widgets hinzufügen können. Möglicherweise möchten Sie auch unseren Leitfaden zum Ein- oder Ausblenden von Widgets auf bestimmten WordPress-Seiten und unsere Expertenauswahl der besten Gutenberg-freundlichen Themes sehen.

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.

Offenlegung: Unsere Inhalte werden von den Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Sehen Sie, wie WPBeginner finanziert wird, warum das wichtig ist und wie Sie uns unterstützen können. Hier ist unser Redaktionsprozess.

Das ultimative WordPress-Toolkit

Erhalten Sie KOSTENLOSEN Zugang zu unserem Toolkit – eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Leserinteraktionen

39 CommentsLeave a Reply

  1. Ich habe festgestellt, dass die Erstellung einer standardisierten Vorlage, die Shortcodes mit benutzerdefiniertem HTML und CSS-Klassen kombiniert, die Aufrechterhaltung einer konsistenten Markenidentität erheblich erleichtert und gleichzeitig Anpassungen für spezifische Kunden ermöglicht.
    Die Verwendung von WPCode anstelle der direkten Bearbeitung von functions.php hat mich vor vielen potenziellen Problemen auf verschiedenen Websites bewahrt. Toller Tipp, diesen sichereren Ansatz in den Leitfaden aufzunehmen!

  2. Meinen Sie mit der letzten Methode, dass ich Shortcodes in das ursprüngliche HTML-Widget-Feld einfügen und es genauso gut funktionieren lassen kann wie das Shortcode-Widget-Feld?

  3. Shortcodes sind eines der besten Dinge in WordPress. Sie sparen so viel Zeit, wenn wir den Code nur an einer Stelle ändern müssen und sich alles andere von selbst aktualisiert. Ich liebe sie!
    Ich habe Ad Inserter jahrelang benutzt, aber es ist in der kostenlosen Version auf 20 Shortcodes beschränkt. Ich werde jetzt definitiv auf die WordPress-Methode umsteigen, wenn ich davon weiß.

  4. Hallo. Ich habe es auf meiner Website ausprobiert, die lokal entwickelt wurde, aber es funktioniert nicht. Ich habe es sowohl mit dem Text-Widget als auch durch Hinzufügen des Filters zu functions.php und Verwendung des benutzerdefinierten HTML versucht. Können Sie bitte Ihre Gedanken dazu mitteilen? Cheers

    • Möglicherweise möchten Sie sicherstellen, dass der von Ihnen verwendete Shortcode ein funktionierender Shortcode ist.

      Admin

  5. Hallo
    Guten Morgen
    Eigentlich möchte ich nur den Text des Beitrags auf einer bestimmten Seite anzeigen, wie kann ich das tun?

  6. Gestern Abend habe ich ein Plugin für Shortcodes installiert. Aber ich konnte es nicht benutzen. Aber jetzt bin ich erfolgreich

  7. Sehr guter und informativer Beitrag darüber, wie man Shortcodes verwendet.

    Ich habe nach einem solchen Artikel gesucht.

    Shortcodes machen wirklich einen Unterschied in Blogs und viele Leute wissen nicht, wie man sie richtig benutzt.

  8. Wo kann ich eigentlich die Shortcodes erstellen?? Ich suche nach den Einstellungen, die in diesem Screenshot gezeigt werden:

  9. Hallo,

    Ich habe Erfahrung in der Website-Entwicklung, bin aber neu bei WooCommerce. Ich baue eine Website für einen Kunden, basierend auf dem Avada WP-Theme (5.6.1). Dies befindet sich in der Entwicklung:

    Sie werden sehen, dass es auf der Startseite einen Karussell gibt, aber ich habe erfolglos nach einem Plugin gesucht, um dies zu ersetzen, das es mir ermöglicht, variable Produkte im Galerie-/Rasterstil anzuzeigen. Muss mit WooCommerce-Produktvarianten funktionieren, z. B. Preis, Kategorie, kurze Beschreibung. Warenkorb wäre auch ideal.

    Ich frage mich, ob Shortcodes verwendet werden könnten, um dies zu erstellen?

    Wenn ja, wie könnten sie hinzugefügt werden, um den Karussell zu ersetzen?

    Danke.

    Neville

  10. Hallo,

    Ich habe versucht, das Shortcode-Widget wie von Ihnen vorgeschlagen zu verwenden, aber ich kann die Widgets im Footer immer noch nicht nebeneinander, sondern übereinander ausrichten.

    Können Sie bitte helfen?

    Danke!

    Brendan

  11. Hallo

    Ich habe das Site Specific Plugin erstellt und das Plugin aktiviert.

    Ich versuche, einen Shortcode in einem anderen Bereich zum Laufen zu bringen, in dem ein Shortcode mit meinem Theme derzeit nicht funktioniert.

    Ich verwende das Socrates 3.08 Version Theme.

    Hier ist ein Link zu einem Screenshot, den ich erstellt habe und der die beiden Stellen zeigt, die ich mit einem roten Kreis markiert habe, wo ich einen Shortcode benötige, und ich habe mit der rechten Maustaste auf den Bereich geklickt, in dem ich das Plugin hinzufügen muss, und es inspiziert, um den Code in dem Bereich meines Themes zu finden, in dem ich versuche, einen Shortcode zum Laufen zu bringen, und habe auch den Screenshot des Codes hinzugefügt.

    Könnte mir jemand sagen, ob es eine Funktion gibt, die ich dem site-spezifischen Plugin hinzufügen kann, damit ein Shortcode in den beiden von mir eingekreisten Bereichen funktioniert.

  12. Hallo,

    Benutzer meldete nach neuem WordPress-Update 4.5.3.

    Shortcode funktioniert nicht im Text-Widget..

    Unser Plugin ist

    Brauche Hilfe, danke im Voraus.

    Ein WP-Leben

  13. Wirklich großartig, ich liebe alle Ihre Blogbeiträge. Weil ich etwas über die Entwicklung von WordPress-Themes lerne. Es hilft mir wirklich bei der add_filter-Hook.

    Danke,

  14. Danke dafür. Lebensretter. Ich habe ein Plugin (GCAL) mit einem speziellen Seitenleisten-Widget verwendet, das mir jedoch keinen Link zum Kalender darunter hinzufügte, ohne in den Code einzutauchen. Einfach dies hinzuzufügen und den Shortcode zu verwenden, hat wirklich den Zweck erfüllt. Vielen Dank. Funktioniert in 4.1.1

  15. Ich habe versucht, es am Ende der functions PHP-Vorlage innerhalb der PHP-Tags einzufügen, und erhalte immer noch den RAW-Code, der meinen Shortcode umschließt. Der Shortcode wird angezeigt, aber er zeigt [raw] [/raw] auf beiden Seiten an.

    Andere Vorschläge? Vielen Dank im Voraus!

  16. @queenofthehivemomof5 Sie müssen ihn zwischen die PHP-Tags einfügen und sicherstellen, dass er nicht Teil einer anderen Funktion ist… daher ist es am besten, ihn unten zu platzieren.

  17. Gibt es einen bestimmten Teil der functions.php-Datei, in den ich ihn einfügen sollte? Es scheint für mich nicht zu funktionieren. Ich bekomme meine Shortcode-Ausgabe, aber sie ist von „Raw“ umgeben

    [raw][/raw]TAB 1TAB 2TAB 3[raw][/raw]Tab-Inhalt 1[raw] [raw] [raw][/raw] (etwas in dieser Art)

  18. Diese Codezeile kann zu einem Plugin hinzugefügt werden, das einen Shortcode hat, und sie bewirkt dasselbe ... obwohl das Hinzufügen der Codezeile zur functions.php-Datei eines Child-Themes eine zukunftssicherere Methode wäre.

Leave A Reply

Vielen Dank, dass Sie sich entschieden haben, einen Kommentar zu hinterlassen. Bitte beachten Sie, dass alle Kommentare gemäß unserer Kommentarrichtlinie moderiert werden und Ihre E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwenden Sie KEINE Schlüsselwörter im Namensfeld. Lassen Sie uns ein persönliches und bedeutungsvolles Gespräch führen.