Share
Jetzt haben wir uns mit benutzerdefinierten Menüs beschäftigt, konzentrieren wir uns auf dynamische Seitenleisten und deren Verwendung in einem Design.
Was genau ist eine dynamische Seitenleiste? Es gibt drei Teile der Benennung, mit denen wir uns in Bezug auf dieses Thema befassen müssen.
Erstens "dynamisch". Dynamisch bezieht sich auf die Tatsache, dass der Seitenleistenbereich vom Administrations-Dashboard aus gesteuert und leicht geändert werden kann. Außerdem kann der Inhalt aus ständig aktualisierten WordPress-Informationen wie Posts, Kommentaren und anderen regelmäßig aktualisierten Inhaltstypen abgerufen werden, so dass jedes Mal, wenn ein neuer Beitrag hinzugefügt wird, dieser in einen Block mit aktuellen Posts oder Inhalten (Widget) aufgenommen werden kann mit dem Begriff Widget in etwas.).
Zweitens bezieht sich "Sidebar" auf einen Inhaltsbereich, der sich nicht unbedingt an der Seite des Layouts befinden muss (merkwürdig, ich weiß es). Der Begriff wurde von den Anfängen der Layouts im Blog-Stil geerbt, bei denen Widgets fast immer an der Seite standen. Der Seitenleistenbereich enthält zusätzliche Inhaltsblöcke oder generierte Plugins-Daten, die in Form von "Widgets" angezeigt werden, die normalerweise neben der Kopfzeile oder Fußzeile von WordPress-Themes angezeigt werden. Sie können jedoch auch beliebig im Layout des Themas positioniert werden.
Ein Widget ist ein kleiner Inhaltsblock, der im Allgemeinen Links oder Inhalte enthält, die mit Seiten oder Posts verknüpft sind. Dies können Listen mit Beiträgen, Kommentaren, Tags, Kategorien und einer ganzen Reihe anderer Inhaltssammlungen sein, von denen einige integriert sind und andere durch zusätzliche Plugins generiert werden.
Widgets können mithilfe von Appearance -> Widgets im Administrations-Dashboard über den integrierten Drag & Drop-Widget-Verwaltungsbereich zu "Widget Ready" -Themen hinzugefügt werden. Themes unterstützen Widgets nicht automatisch und müssen Widget bereit gemacht werden, indem eine spezielle Funktion registriert wird, ähnlich wie wir die benutzerdefinierten Menüs registriert haben.
Bevor wir Sidebars in einem WordPress-Theme registrieren, wird beim Besuch von Appearance -> Widgets Folgendes angezeigt.
Ähnlich wie bei den benutzerdefinierten Menüs in unserer vorherigen Lektion, damit die dynamische Seitenleistenfunktion in Ihrem Design funktioniert, benötigt Ihr Design eine Datei functions.php, in der die Seitenleisten registriert werden. Die einfache functions.php-Datei sollte den folgenden Code enthalten:
Achten Sie, wie bereits erwähnt, darauf, dass in Ihrer Funktionsdatei keine Leerzeichen hinter dem Code verbleiben, da dies manchmal zu Problemen führt, die zu weißen Bildschirmen führen können, wenn Sie Ihr Design auf dem Frontend anzeigen.
Der einzige Aspekt dieses Codes, der am Anfang bearbeitet werden müsste, wäre die Anzahl der dynamischen Seitenleistenbereiche, die in "register_sidebars (1);" zu registrieren sind. Wir werden uns ein bisschen mit benannten Seitenleisten beschäftigen. Im Moment wurden in unserem Code 2 Seitenleisten registriert, die lediglich anhand ihrer Nummer identifiziert wurden.
Wenn Sie 5 dynamische Seitenleistenbereiche in Ihrem Thema haben möchten, ändert sich die Anzahl in 5 - "register_sidebars (5);". In diesem Fall hätten Sie 5 dynamische Seitenleistenbereiche mit den Nummern 1 - 5.
Die Funktion hat eine "if" -Anweisung oder ein Bedingungsargument, das überprüft, ob die register_sidebars-Funktion in dieser Version von WordPress vorhanden ist. Wenn die Antwort mit Ja zurückkommt, wird die Funktion register_sidebars ausgeführt. Da Sidebars seit Version 2.2 von WordPress unterstützt werden, ist es wahrscheinlich unnötig, sich um diesen Aspekt des Codes zu kümmern.
Sobald Ihre Funktionsdatei fertig ist, können Sie Widgets in die neuen Seitenleistenbereiche einfügen, die wir erstellt haben.
Sie können nun Widgets aus dem linken Bereich "Verfügbare Widgets" greifen und sie in die Bereiche Sidebar 1 oder 2 rechts ablegen.
Sobald Ihre Funktionsdatei fertig ist, können Sie den dynamischen Seitenleistencode in die Bereiche Ihres Designs einfügen, in denen Sie WordPress-Widgets dynamisch hinzufügen möchten. Der folgende Code ist die grundlegendste Form des Platzierungscodes für die Seitenleiste. Der einzige Aspekt, der geändert werden muss, ist die Nummer, die angibt, welche nummerierte Seitenleiste Sie an einem bestimmten Ort platzieren möchten.
Wir werden diesen Code in unsere linke Seitenleiste einfügen
Der obige Code sollte ausreichen, damit die registrierte Seitenleiste Widgetinhalt innerhalb des Designs anzeigen kann. Also fügen wir einige Widgets hinzu.
Was in ... resultiert:
Ich musste zusätzliches CSS hinzufügen, um die neu hinzugefügten Widgets zu berücksichtigen. Im Wesentlichen habe ich im Sidebar-Widget CSS aus dem Twenty Eleven-Design hinzugefügt. Möglicherweise müssen Sie ein benutzerdefiniertes CSS für Ihre eigenen Designs erstellen, damit diese in das Layout, die Gestaltung und die Farbgebung Ihres Designs passen. Ich werde das CSS am Ende der Lektion posten.
Um sicherzustellen, dass unsere Sidebar in Fällen, in denen noch keine Widgets hinzugefügt wurden, noch etwas anzeigt, oder in dem äußeren Fall, dass Sidebars nicht registriert wurden (wir hoffen, dass niemand vor Version 2 WordPress ausgeführt wird), müssen wir den Platzierungscode mit dem erweitern folgend. Beachten dynamische_seitenleiste (1) ist immer noch in der ersten Codezeile!
Was macht der obige Code??
Linie 1 des Codes überprüft, ob Sie Seitenleisten in Ihrer Datei "functions.php" registriert haben, und falls ja, welche Seitenleisten-Nummer an dieser Stelle eingefügt werden soll.
Zeile 2 fungiert als Standard-Widget, das eine Liste der Post-Kategorien Ihrer Website anzeigt, wenn keine dynamischen Widgets hinzugefügt wurden. Sobald ein dynamisches Widget zu Ihrer Seitenleiste in Ihrem Dashboard hinzugefügt wird, wird das Standard-Widget durch das dynamische Widget ersetzt.
Zeile 3 beendet das if-Argument, dessen Zeile 1 begonnen hat. In PHP-Argumenten wie if, die eine bedingte Anweisung sind, müssen sie auch beendet werden, damit das Argument keinen nachfolgenden PHP-Code beeinflusst. Das if nicht mit dem Endif schließen; bricht dein Thema!
Der einzige Teil der 3 Zeilen des dynamischen Seitenleistencodes, der wirklich bearbeitet werden muss, ist die Nummer, um anzugeben, welche bestimmte nummerierte Seitenleiste an dieser bestimmten Stelle eingefügt wird.
Aus der WordPress-Dokumentation (The Codex) sind dies einige der Funktionen, mit denen Widgets in Seitenleistenbereiche "hartcodiert" und als Standard-Widgets in Platzierungscode für Seitenleisten eingefügt werden können.
wp_list_authors () - Zeigt eine Liste der Autoren der Website (Benutzer) an. Wenn der Benutzer Beiträge verfasst hat, wird der Name des Autors als Link zu seinen Beiträgen angezeigt.
wp_list_categories () - Zeigt eine Liste von Kategorien als Links an. Wenn Sie auf einen Kategorie-Link klicken, werden alle Beiträge in dieser Kategorie angezeigt
wp_dropdown_categories () - Zeigt die HTML-Dropdown-Liste der Kategorien an oder ruft sie ab.
wp_tag_cloud () - Zeigt eine Liste von Tags in einer sogenannten "Tag-Cloud" an. Die Größe jedes Tags hängt davon ab, wie oft ein bestimmtes Tag Posts zugewiesen wurde.
wp_list_pages () - Zeigt eine Liste von WordPress-Seiten als Links an.
wp_list_bookmarks () - Zeigt Lesezeichen an, die im Bereich Administration -> Links gefunden wurden.
get_comments () - Listet Kommentare basierend auf Anzahl, Reihenfolge und anderen Parametern auf.
wp_get_archives () - Diese Funktion zeigt eine datumsbasierte Archivliste an.
Diese Funktionen können auch an beliebiger Stelle im Design verwendet werden, um Listen mit verschiedenen Inhalten auf der Website zu erstellen, damit Benutzer Inhalte leichter finden können.
Wir könnten dann diese Platzierungscode-Konvention verwenden, um unsere Sidebar Nummer 2 in den rechten Bereich unseres Themas zu platzieren.
Kategorien
Wir könnten auch andere HTML-Inhalte als Standard-Widget-Inhalt verwenden, der angezeigt werden soll, bevor dynamische Widgets über den Widgets-Administrator hinzugefügt werden. Dies kann eine Nachricht enthalten, die Websitebesitzer daran erinnert, Widgets physisch hinzuzufügen, sobald das neue Design aktiviert wird.
Keine Widgets hinzugefügt
Bitte melden Sie sich an und fügen Sie dieser Seitenleiste einige Widgets hinzu
Wie wir unten sehen können, haben wir in den Standardinhalt eines der Widgets, wie in der linken Seitenleiste dargestellt, oder einen anderen HTML-Inhalt, wie in der rechten Seitenleiste dargestellt, Seitenplatzierungscode eingefügt. Dies wird angezeigt, solange keine dynamischen Widgets über das Widgets-Dashboard hinzugefügt werden. Sobald dynamische Widgets hinzugefügt werden, werden diese Standardinhalte automatisch ersetzt.
Um nun einige dynamische Widgets zu testen, haben wir die folgenden zwei dynamischen Widgets hinzugefügt:
Welche Ergebnisse ergeben sich im folgenden Aussehen.
Derzeit haben wir 2 Platzierungscodes mit unterschiedlichem Standardinhalt, ziehen jedoch denselben Seitenleistenbereich in die linke und rechte Seite unseres Designs. Um dies zu beheben, ändern wir den Platzierungscode für die Seitenleiste in der rechten Seitenleiste, um die Seitennummer 2 anstelle der Seitenleiste 1 wie folgt zu platzieren. Wie Sie sehen, müssen wir nur die Nummer in die nummerierte Seitenleiste ändern, die wir platzieren möchten.
Keine Widgets hinzugefügt
Bitte melden Sie sich an und fügen Sie dieser Seitenleiste einige Widgets hinzu
Wir können jetzt unsere linke und rechte Seitenleiste unabhängig voneinander verwalten.
Wenn Sie eine bestimmte Anzahl von Seitenleisten zu Ihrem Thema hinzugefügt haben, werden Sie schnell erkennen, dass Sie Namen anstelle von Zahlen benötigen. Auf diese Weise können Sie sich merken, in welchen Bereichen Ihrer Seite oder in welchen Vorlagen sich die Seitenleiste befindet.
Zum Registrieren von benannten Seitenleisten muss der folgende Code verwendet werden, um die Seitenleisten in Ihrer Datei "functions.php" zu registrieren:
Der einzige Unterschied, was hier registriert wird, ist derzeit der Name der Seitenleiste. Es gibt eine Reihe von Parametern, um die HTML-Ausgabe von Sidebar-Widgets wie folgt anzupassen:
Quelle: register_sidebar
Die Verwendung einiger davon im Array-Format führt zu der folgenden Codestruktur.
'Linke Seite', 'before_widget' => '',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); ?>
Dies führt zur folgenden HTML-Ausgabe.
Wir können die HTML-Wrapper für den Widget-Container und den Titel mit anderen HTML-Klassen, Klassen, IDs usw. ändern.
Um mehr als einen Bereich der dynamischen Seitenleiste zu registrieren, duplizieren wir den register_sidebar Bereich des Codes zusammen mit seinem Array von Parametern so oft wie nötig, um zusätzliche Seitenleisten zu registrieren.
'Linke Seite', 'before_widget' => '',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',));
register_sidebar (array ('name' => 'Right Side', 'before_widget' => ')',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); ?>
Mit diesen zusätzlichen Parametern können wir die HTML-Ausgabe einfacher steuern, sodass wir die Struktur anpassen können, die wir für das gewünschte Styling benötigen. Wir verwenden den obigen Code, um unsere nummerierten Seitenleisten durch benannte zu ersetzen.
Es ist wichtig anzumerken, dass beim Ändern von Seitenleisten-Registrierungen, wie ich es gerade getan habe, oder beim Hinzufügen zusätzlicher Seitenleisten, insbesondere für Themen, die auf Live-Websites ausgeführt werden, Widgets möglicherweise falsch von WordPress zugewiesen werden
WordPress versucht im Allgemeinen, die Widgets in der Seitenleiste in ihrer Reihenfolge zu belassen. Wenn also ein Seitenleistenbereich entfernt oder hinzugefügt wird, ordnet WordPress möglicherweise Ihre vorhandenen Widgets den Seitenleistenbereichen zu, die der vorherigen Reihenfolge der Seitenleiste entsprechen. In unserem Fall ist dies derzeit kein Problem, da wir immer noch nur zwei Seitenleisten haben, sodass unsere Widgets dort bleiben, wo sie waren.
Die Namen wurden im Registrierungscode geändert. Da wir eine einfache 2-Seitenleisten-Konfiguration haben, kann WordPress weiterhin unsere benannten Seitenleisten basierend auf ihrer Reihenfolge in unserem Design platzieren. Wir müssen jedoch den Platzierungscode für die Seitenleiste bearbeiten, um die von uns erstellten Namen wiederzugeben, um mögliche Probleme in der Zukunft zu vermeiden.
Um benannte Seitenleisten zu platzieren, muss im Wesentlichen die Nummer in unserem Platzierungscode in den Namen der Seitenleiste geändert werden. Also verwenden wir den allerersten Platzierungscode, mit dem wir angefangen haben, der einfachste:
Der Name, den wir verwenden, muss mit dem Namen identisch sein, den wir in unserem Registrierungscode erhalten haben.
In Bezug auf den erweiterten Platzierungscode, den wir für unsere nummerierten Seitenleisten verwendet haben:
Keine Widgets hinzugefügt
Bitte melden Sie sich an und fügen Sie dieser Seitenleiste einige Widgets hinzu
Mithilfe der HTML-Ausgabe, die durch den Registrierungscode generiert wird, können wir unsere Seitenleistenelemente jetzt nach Herzenslust gestalten.
Der nachfolgende Link umreißt einige der wichtigsten CSS-Elemente der Seitenleiste / Widget, die bei der Vorbereitung von Designs für die Veröffentlichung berücksichtigt werden müssen. Dies bedeutet, dass Benutzer, die die gebräuchlichsten Widgets hinzufügen, vorab so gestaltet werden, dass sie dem Aussehen und dem Layout des Designs entsprechen.
WordPress-Standard-CSS-Stile - Jeff Star, DigWP
Gehen Sie jetzt weiter und machen Sie einen Widgetize!
Accentsconagua