Widgets machen WordPress wirklich flexibel. Durch Hinzufügen von Widget-Bereichen zu Ihren Designs können Benutzer ihre eigenen benutzerdefinierten Inhalte einfügen, ohne eine Codezeile schreiben zu müssen.
Sie werden am häufigsten in Seitenleisten und Fußzeilen verwendet, wo sie häufig zum Speichern von Widgets wie dem Such-Widget, dem Widget für die neuesten Beiträge oder einem benutzerdefinierten Menü verwendet werden. Wenn Sie sie jedoch zu Ihren Seiten- und Post-Vorlagen hinzufügen, werden sie noch leistungsfähiger.
Sie können Widget-Bereiche zu jeder beliebigen Vorlagendatei hinzufügen. Ich mag es, viele von ihnen zu meinen Themen hinzuzufügen, an Orten wie der Kopfzeile, vor und nach der Hauptnavigation und vor und nach dem Inhalt. Sie können sie entweder zu einem Vorlagenteil (z. B. der Kopfzeile) hinzufügen, der von jeder Seite Ihrer Website verwendet wird, oder Sie können spezifischer sein und sie einfach zu Vorlagendateien für einen bestimmten Inhaltstyp hinzufügen.
In diesem Beitrag zeige ich Ihnen, wie Sie genau das tun können. Ich erstelle ein untergeordnetes Thema des Standardthemas Twenty Seventeen und erstelle dann innerhalb dieses untergeordneten Themas einige neue Vorlagendateien: eine benutzerdefinierte Seitenvorlagendatei, eine Kategoriearchivdatei und eine einzelne Beitragsvorlagendatei.
In jedem dieser Bereiche werde ich einen Widget-Bereich hinzufügen, der für diesen Inhaltstyp spezifisch ist, sodass Benutzer ihn nur sehen, wenn sie eine Seite mithilfe der Seitenvorlage, eines Kategoriearchivs oder eines einzelnen Beitrags anzeigen.
Also fangen wir an!
Hinweis: Ich habe den Code für diesen Beitrag zu GitHub hinzugefügt, damit Sie ihn überprüfen können, wenn Sie mit diesem Tutorial zusammenarbeiten.
Einrichten des untergeordneten Themas
Ich werde ein untergeordnetes Thema des Twenty Seventeen-Themas verwenden: Wenn Sie mit Ihrem eigenen Thema arbeiten, können Sie dieses direkt bearbeiten, anstatt ein untergeordnetes Thema zu erstellen. Wenn Sie jedoch ein Thema eines Drittanbieters verwenden, müssen Sie ein untergeordnetes Thema erstellen. Dies liegt daran, dass beim Aktualisieren des Designs alle Änderungen, die Sie daran vornehmen, verloren gehen.
Erstellen Sie also in Ihrem Ordner wp-content / themes einen neuen Ordner mit dem Namen Ihres Themas. Ich nenne meine wpmu-template-Widgets. Fügen Sie darin einen Stil hinzu.CSS-Datei und fügen Sie diese hinzu:
Denken Sie daran, wenn Sie mit Ihrem eigenen Thema arbeiten, können Sie diesen Schritt überspringen. Und wenn Sie ein anderes übergeordnetes Thema verwenden, müssen Sie das Stylesheet bearbeiten, um dies widerzuspiegeln. Wenn Sie sich nicht sicher sind, lesen Sie unseren Beitrag zum Erstellen von untergeordneten Themen.
Widget-Bereiche registrieren
Bevor wir die Widget-Bereiche zu unseren Vorlagendateien hinzufügen können, müssen wir sie in der Funktionsdatei des Themas registrieren. Öffnen Sie Ihre Funktionsdatei, wenn Ihr Design bereits über eine verfügt oder wenn es sich um ein neues untergeordnetes Design handelt, erstellen Sie eine Datei mit dem Namen functions.PHP.
Beginnen wir mit dem Hinzufügen der leeren Funktion zum Registrieren der Widgets und dem Anschließen an den widgets_init -Hook. Fügen Sie Dies Ihrer Funktionsdatei hinzu:
Innerhalb dieser Funktion registrieren wir vier Widget-Bereiche: jeweils einen für die Vorlagen für einzelne Beiträge und Kategorien sowie zwei für die benutzerdefinierte Seitenvorlage.
Registrieren Sie zunächst das erste Widget:
Dies verwendet die Funktion register_sidebar() mit einem Array von Parametern wie folgt:
- Der Name des Widget-Bereichs, der im Widgets-Admin-Bildschirm und im Customizer angezeigt wird. Ich habe das übersetzbar gemacht.
- Eine eindeutige ID für den Widget-Bereich.
- Markup für vor dem Widget, das Platzhalter für die Internationalisierung verwendet.
- Markup für nach dem Widget.
- Markup für vor und nach dem Widget-Titel, der in einem
h3-Element eingeschlossen ist.
Das ist also der erste. Fügen Sie nun noch in Ihrer Funktion die anderen drei hinzu:
So haben wir jetzt vier Widgets:
- Einer nach dem Inhalt auf einzelne Beiträge.
- Einer vor dem Inhalt eines Kategoriearchivs.
- Einer vor und einer nach dem Inhalt unserer Widgetized-Seitenvorlage.
Wenn Sie Ihre Widget-Bereiche verschieben möchten (z. B. das Kategorienarchiv hinter den Inhalt oder den einzelnen Beitrag vor den Inhalt stellen), sollten Sie sie entsprechend umbenennen. Auf diese Weise wissen Sie, was los ist, wenn Sie Ihren Code in Zukunft bearbeiten, und Ihre Benutzer wissen, wo die Widget-Bereiche ausgegeben werden, wenn sie Widgets über den Widgets-Administrationsbildschirm hinzufügen. Denken Sie daran, dass Sie, wenn Sie dies ändern, den Code platzieren müssen, um die Widgets im nächsten Schritt an der richtigen Stelle in Ihren Vorlagendateien auszugeben.
Wenn Sie nun Ihre Widgets-Administrationsseite öffnen, werden Ihre Widget-Bereiche angezeigt, die für Widgets bereit sind:
Wenn Sie jedoch Widgets zu Ihren neuen Widget-Bereichen hinzufügen, werden diese nicht im Frontend Ihrer Website angezeigt. Sie müssen noch in die Vorlagendateien codiert werden.
Hinzufügen Ihrer Widget-Bereiche zu Vorlagendateien
Jetzt fügen wir den Code zur Ausgabe der Widget-Bereiche hinzu. Wenn Sie mit Ihrem eigenen Design arbeiten, müssen Sie möglicherweise nur Ihre vorhandenen Designvorlagendateien bearbeiten. Wenn Sie mit einem untergeordneten Thema arbeiten (oder Ihr Thema noch nicht über die entsprechenden Vorlagendateien verfügt), müssen Sie neue Dateien erstellen.
Beginnen wir mit der Widgetized-Seitenvorlagendatei, da Ihr Thema dies in beiden Fällen nicht hat.
Erstellen Sie in Ihrem Designordner eine neue Datei. Ich rufe meine page_widgetized .PHP. Öffne diese Datei und füge Folgendes hinzu:
Dies teilt WordPress mit, dass es sich um eine benutzerdefinierte Seitenvorlage handelt. Wenn Sie mehr über sie erfahren möchten, lesen Sie unseren detaillierten Leitfaden.
Hinweis: Verwenden Sie page-widgetized nicht als Dateinamen. Dies liegt daran, Seite- ist ein reserviertes Suffix in WordPress. Verwenden Sie einen Unterstrich anstelle eines Bindestrichs oder vermeiden Sie die Verwendung von page am Anfang, wenn Sie dies vorziehen.
Kopieren Sie nun unter diesem auskommentierten Text alles von der Seite Ihres Themas (oder der Seite des übergeordneten Themas).PHP-Datei. Eine Alternative besteht darin, eine Kopie der Datei zu erstellen und den auskommentierten Text hinzuzufügen.
Sie können diese Vorlage jetzt auswählen, wenn Sie eine Seite in Ihrer Site bearbeiten:
Wählen Sie es für eine Ihrer Seiten aus, damit Sie die Widgets ausprobieren können. Hier ist meine Seite:
Es sieht im Moment nicht sehr aufregend aus, da ich die Widget-Bereiche nicht zur Vorlagendatei hinzugefügt habe. Lass uns das machen.
Fügen Sie in Ihrer Vorlagendatei diesen Code unmittelbar über dem Seiteninhalt für den Widget-Bereich mit dem obigen Inhalt hinzu:
Hiermit wird überprüft, ob der Widget-Bereich mithilfe der eindeutigen ID ausgefüllt wurde, die Sie für den Widget-Bereich erstellt haben, als Sie ihn in Ihrer Funktionsdatei registriert haben. Wenn es ausgefüllt wurde, gibt es den Inhalt des Widget-Bereichs aus.
Fügen Sie nun den Widget-Bereich unter dem Inhalt hinzu. Fügen Sie nach Ihrem Inhalt (und innerhalb eines umschließenden Elements) Folgendes hinzu:
Speichern Sie Ihre Seitenvorlagendatei.
Hier ist der vollständige Code meiner Seitenvorlagendatei, damit Sie sehen können, wo sich das Widget vor und nach der Schleife befindet:
Jetzt, um es zu testen. Ich habe jedem der neuen Widget-Bereiche ein Widget hinzugefügt:
Und so sehen sie auf meiner Seite aus:
Das ist also die benutzerdefinierte Seitenvorlage eingerichtet. Jetzt müssen Sie die beiden anderen Seitenvorlagendateien bearbeiten (oder bei Bedarf erstellen). Befolgen Sie diese Schritte:
- Wenn Sie mit einem untergeordneten Thema arbeiten, erstellen Sie eine Datei namens category.PHP. Kopieren Sie den Inhalt der Kategorie.PHP-Datei aus Ihrem übergeordneten Thema (falls vorhanden) oder dem Archiv.PHP-Datei (oder Index.php, wenn es das nicht hat).
- Wenn Sie nicht mit einem untergeordneten Thema arbeiten, aber Ihr Thema keine Kategorie hat.PHP-Datei, erstellen Sie eine, indem Sie das Archiv kopieren.PHP-Datei (oder wenn Sie keine davon haben, den Index.PHP-Datei).
- Fügen Sie den Widget-Bereich über dem Inhalt Ihrer Kategoriearchiv-Datei hinzu – wiederum unmittelbar vor der Schleife.
Hier ist der Code für den Widget-Bereich:
Wiederholen Sie dies nun für die einzelne Vorlage:
- Erstellen Sie einen Single-Post.PHP-Datei, wenn Ihr Thema keine hat (oder Sie ein untergeordnetes Thema verwenden). Kopieren Sie den Inhalt aus dem Single-Post Ihres übergeordneten Themas.PHP-Datei in sie, oder von der nächsten Template-Datei in der Template-Hierarchie (single.php, singular.php oder Index.PHP).
- Fügen Sie erneut den Widget-Bereich hinzu – diesmal nach dem Inhalt.
Hier ist der Code:
Wenn Sie nun Widgets hinzufügen, werden diese auf Ihrer Website angezeigt. Hier ist meine, die eine Liste der letzten Beiträge nach einem einzelnen Beitrag zeigt:
Das Hinzufügen von Widget-Bereichen zu Vorlagen gibt Ihnen Flexibilität
Widget-Bereiche ermöglichen es den Benutzern Ihres Themas, zusätzlichen Inhalt hinzuzufügen, ohne Code schreiben zu müssen. Aber sie sind nicht nur für die Sidebar. Wenn Sie Ihren Vorlagendateien zusätzliche Widget-Bereiche hinzufügen, erhalten Sie gezielte Bereiche auf Ihrer Website, zu denen Sie Widgets hinzufügen können, mit feiner Kontrolle darüber, wo sie angezeigt werden.
Sie können diese Beispiele weiterführen, wenn Sie möchten, Widget-Bereiche zu allen Ihren Dateien hinzufügen oder sogar verschiedene Versionen der Seitenleiste verwenden.PHP-Datei für verschiedene Inhaltstypen. Die Welt ist deine Auster!