Erstellen mehrerer Menüs bei der Verwendung des TwentyTen Theme?

Wie erhält man mehrere Menüs im TwentyTen-Design?

Solutions Collecting From Web of "Erstellen mehrerer Menüs bei der Verwendung des TwentyTen Theme?"

Es gibt mehrere Schritte zum Erstellen zusätzlicher Menüs mithilfe des neuen Menüsystems in WordPress im TwentyTen-Design oder einem beliebigen WordPress-Design (einige dieser Schritte können nicht in der richtigen Reihenfolge ausgeführt werden) . Darüber hinaus empfehle ich Ihnen sehr, ein Kindthema basierend auf TwentyTen zu erstellen, anstatt es direkt zu ändern:

  1. Erstellen Sie ein Child-Thema basierend auf dem Twenty Ten-Thema.

  2. Registrieren Sie einen Themenstandort in der Datei functions.php Ihres Themes.

  3. Erstellen Sie ein neues Menü mit der Admin-Konsole Ihrer Website.

  4. Verknüpfen Sie das neue Menü und den Themenstandort über Ihre Admin-Konsole.

  5. Rufen Sie wp_nav_menu() in der Vorlagendatei Ihres Themes auf, wo das Menü wp_nav_menu() .

  6. Gestalte dein Menü so, dass es sich visuell mit deiner Seite integrieren lässt.

Also lass uns weitermachen!

1. Erstellen Sie ein untergeordnetes Thema

Das Erstellen eines untergeordneten Themas ist sehr einfach und bietet Ihnen den Vorteil, TwentyTen upgraden zu können, wenn eine neue Version herauskommt, ohne sich darum sorgen zu müssen, dass Sie Ihre Änderungen verlieren.

Ja, es gibt eine kleine Chance, dass Ihre Änderungen mit der neuen Version nicht kompatibel sind. Wenn Sie Kopien von TwentyTen-Dateien erstellen und diese für Ihr untergeordnetes Thema ändern, müssen Sie diese Änderungen erneut anwenden, aber das ist viel besser, als Ihre Änderungen zu verlieren Thema wird aktualisiert.

Aber anstatt meine Antwort von einer anderen Frage zu kopieren, bei der ich Kinderthemen vorgeschlagen habe, werde ich Sie nur auf Folgendes hinweisen:

  • Ein WordPress-Theme anpassen, ohne es zu ändern? (Verwenden Sie untergeordnete Themen)

Für die Beispiele im Rest dieser Antwort werde ich das Kinderthema “Himanshu” nennen .

2. Registrieren Sie einen Themenstandort

Mit der function register_nav_menus() ist es sehr einfach, einen Theme-Speicherort zu register_nav_menus() ja, es wäre wirklich schön gewesen, wenn sie die function register_nav_menu_locations() aufgerufen hätten, aber ich schweife ab …)

Ich werde ein “Fußzeilen” -Menü für dieses Beispiel erstellen.

In meinem Beispiel bemerke ich, wie ich in einem Kommentar auf 'primary' referenziere; Ich tue das, damit Sie sehen können, wie der standardmäßige Nav-Menü-Speicherort benannt ist und dass Sie ihn nicht selbst definieren müssen. Beachten Sie auch, dass ich die Übersetzungsfunktion __() verwendet habe und den Namen des untergeordneten Themas als Übersetzungsdomäne angegeben habe.

Wenn Sie ein untergeordnetes Thema verwenden, müssen Sie eine functions.php Datei in Ihrem Thema erstellen, um diese function aufzunehmen. Wenn Sie jedoch ein Thema ändern, suchen Sie einfach nach functions.php und fügen es am Ende hinzu:

 register_nav_menus(array( //'primary' => __('Primary Menu Area','himanshu'), ==> Primary defined by default 'footer' => __('Footer Menu Area','himanshu'), )); 

Wenn Sie Code für Ihr eigenes Thema schreiben und es nicht an andere verteilen oder sich um Übersetzungen kümmern müssen, können Sie Folgendes tun:

 register_nav_menus(array('footer'=>'Footer Menu Area')); 

3. Erstellen Sie ein neues Menü

Als Nächstes erstellen wir Ihr Fußzeilenmenü, indem Sie in der Admin-Konsole zur Menüoption des Menüs Darstellung navigieren. Klicken Sie auf das “+” , um ein Menü hinzuzufügen, geben Sie den Namen Ihres Menüs ein und klicken Sie dann auf “Create Menu” :

Erstellen eines Nav-Menüs in WordPress 3.x

Beachten Sie, dass Sie Ihr Menü oft mit dem Namen Ihres Menüstandorts gleich benennen, aber das ist nicht erforderlich und WordPress behandelt Menüs und deren Menüpositionen als separate Einheiten .

Achten Sie darauf, einige Optionen zu Ihrem Menü hinzuzufügen, oder es wird wenig nutzen. Wählen Sie die benötigten Optionen über die Admin-Konsole, fügen Sie sie zu Ihrem Menü hinzu und speichern Sie dann (in meinem Screenshot zeige ich nur “Seiten” für Menüoptionen, aber Sie können verschiedene Arten von Menüoptionen, die WordPress bietet, kombinieren) :

Optionen zu einem Navigationsmenü in WordPress 3.x hinzugefügt

4. Ordnen Sie das neue Menü und den Themenstandort zu

Es ist einfach, Ihr neues Menü mit dem gewünschten Thema zu verknüpfen. Verwenden Sie einfach die Admin-Konsole von WordPress:

Verknüpfen eines Navigationsmenüs mit einem Themenmenü in WordPress 3.0

5. Rufen Sie wp_nav_menu() in der Vorlagendatei auf

Jetzt müssen wir zurück zum Code gehen. Ich habe eine Kopie von footer.php aus dem TwentyTen-Theme erstellt und in das Themenverzeichnis “Himanshu” kopiert. So sehen die ersten 18 Zeilen aus:

 < ?php /** * The template for displaying the footer. * * Contains the closing of the id=main div and all content * after. Calls sidebar-footer.php for bottom widgets. * * @package WordPress * @subpackage Himanshu (based on Twenty Ten) * @since Twenty Ten 1.0 */ ?>   

Ich habe den Aufruf von wp_nav_menu() zusammen mit Wrapper-HTML direkt nach

in Zeile 18 eingefügt, sodass die Zeilen 13 bis 24 jetzt wie folgt aussehen:

   

Hinweis Ich habe gewählt, den Wrapper footernav und den inneren Container menu-footer footer aufzurufen, und ich folgte TwentyTens Führung und setzte role="navigation" . Der wichtigste Aspekt des Codes ist jedoch 'theme_location' => 'footer' was mit unserem benannten 'theme_location' => 'footer' in Schritt 2 übereinstimmt.

All diese Schritte ergeben ein Footer-Menü, das wie folgt aussieht:

Ein Footer Nav Menü in WordPress 3.x vor dem Styling

6. Stil dein Menü

Schließlich müssen wir nur CSS in die style.css Datei unseres Themes style.css und wir können ein Fußzeilenmenü erhalten, das so aussieht:

Ein Footer Nav Menü in WordPress 3.x mit Styling

Das Styling ist sehr einfach, also bitte nicht meine schrecklichen Design-Fähigkeiten gegen mich, da ich kein Designer bin, noch habe ich jemals gedroht, eins zu sein! Ich habe Kommentare in den CSS-Code eingefügt. Erklären Sie, warum ich jeden Selektor und meine CSS-Eigenschaft verwendet habe:

 #colophon { padding-top:6px; /* Move menu closer to thick black line (TwentyTen has 18px) */ } #footernav { /* Use same font-family as TwentyTen does for menus */ font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif; font-size:1.1em; /* Make a little bigger than default */ padding-bottom:6px; /* Put some breathing room under the menu */ } #footernav .menu-footer { text-align:center; /* Needed to center the menu */ } #footernav ul { margin:0 auto; /* Also needed to center the menu */ width:auto; /* Make menu only as wide as needs to be */ display:inline; /* Also needed to keep width to a minumum */ } #footernav li { display:inline; /* Make menu horizontal instead of veritcal */ } #footernav a { text-decoration:none; /* Remove underlines from links */ background-color:#ddd; /* Create a light grey background for each option */ color:black; /* Make the items easy to see with text in black */ padding:0.25em 0.5em; /* Add space around the items for the background to display*/ margin:0 0.5em; /* Add space between the items */ } #footernav a:hover { background-color:black; /* Surround the menu item under the mouse pointer in black */ color:white; /* Make the text for the same menu item be white */ } 

Das ist alles! Beachten Sie, dass dies ein Werkzeug ist, das ein Designer verwenden kann, damit Sie oder jeder, der Ihr Designer ist, Menüs implementieren können, indem Sie dies aus einer Theme- Perspektive praktisch beliebig verwenden; Rufen wp_nav_menu() einfach die function wp_nav_menu() , die auf Ihre Menüs und wp_nav_menu() verweist, und Sie können wp_nav_menu() !