WordPress-Theme-Tutorial für Anfänger – Teil 9: Menüs und Widget-Bereiche
In dieser Lektion erfahren Sie, wie Sie unserem Design zwei zentrale WordPress-Funktionen hinzufügen. Menüs und Widget-Bereiche. Wir lernen, wie man einen Standort für das Hauptnavigationsmenü einer Website registriert und das Menü in unseren Vorlagen ausgibt, sowie das Hinzufügen von Widgets in unserer Seitenleiste und im Fußzeilenbereich.
Die Begeisterten unter Ihnen haben vielleicht bemerkt, dass weder „Menüs” noch „Widgets” über das Menü „Darstellung” im Admin-Bereich zugänglich sind. Dies liegt daran, dass unser Design diese noch nicht unterstützt. Wir werden das in dieser Lektion beheben – beginnend mit den Menüs .
WordPress-Menüs
Das Hinzufügen von Menüs zu Ihrem Thema besteht aus zwei Teilen. Zuerst müssen Sie eine oder mehrere Menüpositionen in Ihrer functions.php. Ein Beispiel ist ein Hauptmenü, das sich in der Kopfzeile aller Seiten befindet. Der zweite Teil ist das Hinzufügen von Code an der Stelle, an der das Menü ausgegeben werden soll. Zum Beispiel an header.phpder Stelle, an der Sie das Hauptmenü platzieren möchten.
Registrieren eines Menüorts
In diesem Tutorial fügen wir eine Menüposition für die Hauptnavigation der Site hinzu und platzieren ihre Ausgabe in unserer header.php. Beginnen wir mit der Registrierung des Standorts in functions.php, was mit der Funktion register_nav_menu erfolgt :
add_action('init', 'wptutorial_register_menu');
function wptutorial_register_menu() {
register_nav_menu('main-nav', __('Main Navigation', 'wptutorial'));
}Wir müssen uns an den Hook anschließen init, den WordPress als einen guten „Checkpoint” für die Registrierung von Menüpositionen eingestuft hat. Innerhalb unserer Funktion rufen wir auf, register_nav_menu()die mindestens zwei Parameter akzeptiert; das Menü-Handle, bei dem es sich um einen eindeutigen Slug handelt, den Sie beim Rendern des Menüs als Kennung verwenden, und den sichtbaren Namen des Menüs, der im Admin-Bereich angezeigt wird. Beachten Sie, dass ich den Namen nach innen __()gepackt habe, um ihn übersetzbar zu machen, wie wir im vorherigen Schritt gelernt haben .
Wenn Sie Ihr Admin-Panel aktualisieren, sollten Sie jetzt einen neuen Untermenüpunkt unter „Aussehen” sehen; „Menüs”. Herzlichen Glückwunsch, Ihr Design unterstützt jetzt die Erstellung von Menüs!
Wenn Sie mit der Erstellung und Verwaltung von Menüs in WordPress nicht vertraut sind, ist dies eine gute Anleitung für Sie.
Erstellen Sie ein neues Menü in „Darstellung > Menüs” – es kann alles enthalten, was Sie wollen, ich habe nur die Dummy-Posts hinzugefügt, die ich in meinem WordPress erstellt hatte.
Nachdem Sie Ihr erstes Menü gespeichert haben, erscheint ein neuer Abschnitt namens „Menüeinstellungen” unter Ihrem Menübearbeitungsbereich, in dem Sie einen Speicherort für dieses Menü auswählen können. Es sollte einen verfügbaren Standort auflisten, und zwar den von uns erstellten; "Hauptnavigation".
Setzen Sie ein Häkchen in „Hauptnavigation” und klicken Sie auf Speichern. Jetzt ist Ihr neu erstelltes Menü mit dem Ort verbunden und wird automatisch angezeigt, wo immer Sie den Code hinzufügen, um diesen Menüort auszugeben. Lass uns das jetzt tun.
Ausgabe einer Menüposition in einer Vorlage
Öffnen header.phpSie und wo immer Sie die Menüausgabe haben möchten, fügen Sie einen Aufruf zu hinzu wp_nav_menu(). Diese Funktion akzeptiert eine ganze Reihe von Argumenten in einem Array, um die Menüausgabe wirklich anzupassen. Am wichtigsten ist, dass wir den Parameter benötigen, der angibt, den Ort der „Hauptnavigation” abzurufen. Dazu fügen wir das Argument ‘ theme_location‘ hinzu und setzen es auf das Handle unseres Menüs; ‘ main-nav‘.
Ich habe die Menüausgabe direkt nach dem Start des <body>Tags hinzugefügt, aber wenn Sie Ihre Vorlagen mit HTML ausgestaltet haben, entscheiden Sie selbst, wo das Menü erscheinen soll.
Aktualisieren Sie Ihr Frontend und Sie sollten das Menü, das Sie in Admin erstellt haben, als ungeordnete Liste am Anfang der Vorlage ausgegeben sehen.
Wie üblich ermutige ich Sie, sich ein wenig tiefer mit den Parametern wp_nav_menuin der WordPress Codex-Dokumentation dafür zu befassen und damit herumzuspielen, wie die Ausgabe aussehen soll. Zum Beispiel: Sie können festlegen, dass es nicht in einer HTML-Liste ausgegeben wird, Sie können die Menüpunkte auf nur bestimmte Ebenen beschränken (um Untermenüs zu verhindern) und mehr.
Wenn Sie neugierig auf den Styling-Teil sind; Werfen Sie einen Blick auf die Klassen, die WordPress automatisch zu jedem Menüpunkt hinzufügt. Sie können ganz einfach Stile für aktive Menüelemente, Elemente mit untergeordneten Elementen, übergeordnete Elemente eines aktiven untergeordneten Elements usw. hinzufügen.
Hinweis: Jeder Theme-Benutzer kann immer mehrere Menüs erstellen und diese mithilfe von Widgets außerhalb der registrierten Orte eines Themes anzeigen. Um dies zu tun, muss Ihr Thema jedoch einige Widget-Bereiche definieren! Das machen wir als nächstes.
Widget-Bereiche
Widget-Bereiche funktionieren ziemlich ähnlich in der Funktionsweise von Menüs. Sie registrieren einen Ort (für Widgets definieren Sie einen Bereich, in dem der Designbenutzer Widgets platzieren kann), und wo immer Sie möchten, dass der Ort/Bereich in Ihren Vorlagen erscheint, fügen Sie ein bisschen Code hinzu, der auf die Handle-ID verweist, die Sie in Ihrem bereitgestellt haben Registrierungscode.
Lassen Sie uns einen Widget-Bereich in unserer Seitenleiste und einen in der Fußzeile definieren. Es ist üblich, dass Designs mehrere Widget-Bereiche in der Fußzeile bereitstellen, um sie gut in Spalten aufzuteilen, aber in diesem Tutorial fügen wir nur einen zur Fußzeile hinzu.
Widget-Bereiche werden im WordPress-Code als „Sidebars” bezeichnet, aber es handelt sich nicht ausschließlich um die rechte Seitenleiste aus alten Zeiten in Websites. Es scheint, als wäre ein alter Name aus einer Zeit geblieben, als Websites normalerweise nur einen Widget-Bereich in der Seitenleiste hatten. Denken Sie nicht, dass „Seitenleisten” sich nur auf tatsächliche Seitenleisten beziehen können.
Registrieren Sie Widget-Bereiche
Wir beginnen mit der Registrierung von zwei Widget-Bereichen in unserer functions.php. Wir verwenden die Funktion register_sidebar, um unsere Seitenleisten zu registrieren, die an widgets_initHaken angeschlossen sind, die WordPress als den besten Haken zum Registrieren von Widget-Bereichen (und benutzerdefinierten Widgets) definiert hat.
Die register_sidebar()Funktion akzeptiert eine ganze Reihe von Argumenten, als Minimum benötigen Sie das ‘id’- und das ‘name’-Argument. Es sind Parameter verfügbar, um zu definieren, wie die Widget-HTML-Wrapper ausgegeben werden sollen.
Aktualisieren Sie Ihr Admin-Panel, und Sie sollten nun den Menüpunkt „Widgets” unter „Darstellung” sehen. Im Admin-Panel „Widgets” sehen Sie im rechten Bereich zwei verfügbare Widget-Bereiche; das ist unser „Sidebar-Widget-Bereich” und „Footer-Widget-Bereich”.
Platzieren Sie ein beliebiges Widget in unserem Sidebar- oder Footer-Widget-Bereich, damit Sie es in Aktion sehen können.
Ausgabe eines Widget-Bereichs in einer Vorlage
Der letzte Teil ist die Ausgabe der Widget-Bereiche an unsere Vorlagen. Dazu verwenden wir die Funktion dynamic_sidebar()und stellen das Handle als Parameter bereit. Öffnen sidebar.phpSie und fügen Sie Folgendes in die <aside>Tags ein:
Beachten Sie, dass ich es in ein ungeordnetes Listen-Tag (<ul>) eingeschlossen habe. Dies liegt daran, dass standardmäßig dynamic_sidebaralle Widgets in <li>Elemente verpackt ausgegeben werden. Ich ermutige Sie, mit den Ausgabeparametern herumzuspielen, wenn Sie es nicht mögen, dass Widgets eine Liste sind.
Was die Fußzeile betrifft, fügen wir sie ganz am Anfang von footer.phpein, eingeschlossen in ein <footer>Tag (wenn Sie möchten).
Das war’s für Menüs und Widget-Bereiche. Ihr Thema hat jetzt die Flexibilität des Benutzers, ein neues Menü zu erstellen und ein Widget zu verwenden, um es in der Seitenleiste oder Fußzeile anzuzeigen. In der nächsten Lektion dieser Tutorial-Serie werden wir weitere Vorlagen zu unserem Thema erstellen.