So fügen Sie Shortcodes zu WordPress-Seitenleisten-Widgets hinzu

Shortcodes sind eine großartige Möglichkeit, Ihre Website zu bereichern oder neue Funktionen und Funktionen hinzuzufügen. Shortcodes haben jedoch die Einschränkung, dass sie nur innerhalb des Inhalts von Seiten und Beiträgen verwendet werden können. Dies ist bei jedem Standard-Shortcode der Fall sowie bei benutzerdefinierten Shortcodes, die von Themes, Plugins oder privaten WordPress-Benutzern erstellt wurden. Um dieses Problem zu umgehen, haben sich einige WordPress-Benutzer in der Vergangenheit dafür entschieden, die Vorlagendateien ihrer Themes, Plugins oder sogar WordPress-Kerndateien zu bearbeiten. Dies würde es ihnen ermöglichen, Shortcodes in anderen Teilen ihrer Website zu verwenden, wie der Fußzeile oder der Kopfzeile. Abgesehen davon, dass diese Methode fehleranfällig ist, müssen Sie dieselben Dateien immer wieder bearbeiten, da die Änderungen nach jedem Update überschrieben werden.

Das wird zum Glück nicht mehr benötigt. Jetzt können Sie einen Shortcode-Aufruf in bestimmte Widgets einfügen und sie in allen verfügbaren Widget-Bereichen (oder WordPress-Sidebars, wie manche Programmierer sie nennen) verwenden. Auf diese Weise können Sie die Funktionalität eines bestimmten Shortcodes auf jeden Teil Ihrer Website erweitern. Da die Verwendung von Shortcodes auf diese Weise jedoch möglicherweise nicht allgemein bekannt ist, haben wir uns entschlossen, diesen Artikel zu erstellen, in dem erläutert wird, wie Sie dies tun können. Lasst uns beginnen.

So fügen Sie Shortcodes zu WordPress-Seitenleisten-Widgets hinzu

Für diesen Artikel verwenden wir zwei Shortcodes, die wir für unser Tutorial zu benutzerdefinierten Shortcodes als Beispiele erstellt haben. Der erste ist der Shortcode für das aktuelle Datum, der das aktuelle Datum im Format TT – MM – JJJJ anzeigt. Der zweite ist der Shortcode für farbigen Text, der einen bestimmten Text in der von Ihnen gewählten Farbe anzeigt. Wir empfehlen, das benutzerdefinierte Shortcode-Tutorial zu lesen, das wir oben verlinkt haben, da es mit diesem Artikel verknüpft ist. Das Tutorial bietet auch viele weitere Informationen zu den beiden benutzerdefinierten Shortcodes, die wir verwenden werden, und zeigt Ihnen, wie Sie einen Shortcode-Aufruf im Allgemeinen einfügen.

Obwohl diese beiden Shortcodes sehr einfach sind, sind sie sehr nützlich, um zu demonstrieren, wie man einem entsprechenden Sidebar-Widget einen Shortcode hinzufügt. Das heißt, wie man einen Shortcode-Aufruf innerhalb der beiden Widgets, die diese Funktionalität ermöglichen, richtig hinzufügt. Diese beiden sind ein Text-Widget und ein benutzerdefiniertes HTML-Widget. Lassen Sie uns erklären, wie.

Verwenden des Text-Widgets

Das Text-Widget ist eines der nützlichsten Standard-WordPress-Widgets. Es ermöglicht Ihnen, Text oder HTML-Code innerhalb eines Widget-Bereichs hinzuzufügen, ohne Vorlagendateien zu ändern. Beim Hinzufügen von Inhalten zu diesem Widget sollte der Text im . hinzugefügt werden Visuell Registerkarte, während der HTML-Code im Text Registerkarte, damit es richtig gerendert wird.

Darüber hinaus akzeptiert das WordPress Text-Widget Shortcode-Aufrufe (z [shortcode_name]) als gültige Textform. Ein so hinzugefügter Shortcode-Aufruf wird dann im Frontend der Website korrekt gerendert, um die Ausgabe des Shortcodes anzuzeigen.

Wenn Sie also beispielsweise Ihrer WordPress-Sidebar einen Shortcode hinzufügen möchten, können Sie dies mit einem Text-Widget tun. Beginnen Sie mit Navigieren Sie zu Darstellung > Widgets, suchen Sie den Widget-Bereich wo Sie Ihren Shortcode hinzufügen möchten, und füge ein Text-Widget ein. Dann, füge den Shortcode-Anruf hinzu innerhalb des Visuell Registerkarte und drücke die Speichern Taste unter.

Wir haben in diesem Beispiel beide der oben genannten benutzerdefinierten Shortcodes verwendet. Lassen Sie uns sie kurz erklären.

Da der erste Shortcode keine Parameter akzeptiert, haben wir ihn einfach mit dem Shortcode-Namen „aufgerufen“, d [current_date]. Und da der zweite Shortcode zwei Parameter akzeptiert – Titel und Titelfarbe, haben wir diese im entsprechenden Shortcode-Aufruf bereitgestellt. Darüber hinaus haben wir auch Dummy-Text von Lorem Ipsum hinzugefügt, um die Ausgabe dieser beiden Shortcodes visuell zu trennen. Nachdem wir alle drei Dinge hinzugefügt haben, haben wir die Ausgabe erhalten, die Sie auf dem Screenshot unten sehen können.

Verwenden des benutzerdefinierten HTML-Widgets

Das benutzerdefinierte HTML-Widget ist, wie der Name schon sagt, das dedizierte Standard-WordPress-Widget zum Hinzufügen von benutzerdefiniertem HTML-Code in Ihren Widget-Bereichen. Der von Ihnen eingefügte HTML-Code wird direkt in die HTML-Struktur des Frontends der Seite eingefügt. Es befindet sich an der Stelle, die dem Widget-Bereich entspricht, in dem Sie das benutzerdefinierte HTML-Widget hinzugefügt haben.

Neben HTML akzeptiert dieses Widget auch Shortcode-Aufrufe und gibt deren Ausgabe auf der Website entsprechend aus. Daher ist eine zusätzliche Funktion dieses Widgets das Hinzufügen eines Shortcodes zu einem gewünschten WordPress-Widget-Bereich.

Um einen Shortcode mit dem benutzerdefinierten HTML-Widget hinzuzufügen, Navigieren Sie zu Darstellung > Widgets und finde den Widget-Bereich wo Sie den Shortcode einfügen möchten. Ein benutzerdefiniertes HTML-Widget hinzufügen in Ihrem gewählten Widget-Bereich und dann füge den Shortcode-Anruf hinzu dazu. Fertig bis Drücken Sie die Speichern Taste unter.

Da wir in diesem Beispiel und im vorherigen Beispiel dieselben beiden Shortcode-Aufrufe verwendet haben, gilt das zuvor Gesagte auch hier. Wir haben denselben Platzhaltertext hinzugefügt, um die Ausgabe wieder visuell zu trennen. Sie haben jedoch vielleicht auf dem obigen Bild bemerkt, dass der Platzhaltertext in ein umbrochenes a Absatz Schild. Dies ist notwendig, da alle Nur-Text-Abschnitte, die innerhalb des benutzerdefinierten HTML-Widgets hinzugefügt werden, direkt der HTML-Struktur Ihrer Webseite hinzugefügt werden. Dies ist jedoch beim Text-Widget nicht der Fall, da es standardmäßig Klartextabschnitte innerhalb eines Absatzes platziert.

Nachdem wir all diese Dinge zum Widget hinzugefügt haben, ist die Ausgabe, die wir erhalten haben, die gleiche wie im vorherigen Beispiel. Das Einfügen derselben Shortcodes in ein benutzerdefiniertes HTML-Widget und ein Text-Widget kann dieselbe Ausgabe erzeugen.

Vergleichen wir die beiden Ausgaben und wie die Shortcode-Aufrufe hinzugefügt wurden, können wir feststellen, dass sowohl das Text- als auch das benutzerdefinierte HTML-Widget gleichwertig sind, wenn es darum geht, Shortcodes zu Sidebar-Widgets hinzuzufügen. Es hängt also von Ihren persönlichen Vorlieben ab, welches Sie verwenden werden.

Abschließende Gedanken

In diesem Artikel haben wir uns angesehen, wie Sie mit zwei WordPress-Widgets – dem Text- und dem benutzerdefinierten HTML-Widget – Shortcodes zu jedem Widget-Bereich auf Ihrer Website hinzufügen können. Dies gibt Ihnen die Freiheit, Teile Ihrer Website anzupassen, die Sie zuvor möglicherweise nicht anpassen konnten. Und da der Prozess recht unkompliziert ist, können Sie Ihr Ziel erreichen oder Ihr Design in wenigen Minuten realisieren. Stellen Sie sicher, dass Sie diesen Artikel mit einem Lesezeichen versehen, damit Sie diese oft übersehene Verwendung von zwei vielseitigen WordPress-Widgets nicht vergessen.