Erstellen Sie mehrere Menüs, wenn Sie das Twentyten -Thema verwenden?

Question

Wie bekomme ich mehrere Menüs in Twentyten Thema?

Answer 1

Es gibt Mehrere Schritte zum Erstellen zusätzlicher Menüs mit dem neuen Menüsystem in WordPress im Twentyten -Thema oder einem WordPress -Thema (von denen einige dieser Schritte außerhalb der Reihenfolge ausgeführt werden können). Außerdem werde ich Ihnen sehr empfehlen, ein Kinderthema basierend auf Twentyten zu erstellen, anstatt es direkt zu ändern:

1. Erstellen Sie ein Kinderthema Basierend auf dem Twenty Ten -Thema.

2. Registrieren Sie einen Themenstandort in Ihrem Thema functions.php Datei.

3. Erstellen Sie ein neues Menü Verwenden der Administratorkonsole Ihrer Website.

4. Verbinden Sie das neue Menü und den Standort des Themas zusammen Verwenden Sie Ihre Administratorkonsole.

5. Anruf wp_nav_menu() In der Vorlagendatei Ihr Thema, wo das Menü angezeigt werden soll.

6. Stylen Sie Ihr Menü so dass es visuell in Ihre Website integriert wird.

Also lass uns damit sein!

1. Erstellen Sie ein Kinderthema

Erstellen Ein Kinderthema ist extrem einfach Und gibt Ihnen den Vorteil, dass Sie in der Lage sind, Twentyten zu verbessern, wenn eine neue Version herauskommt, ohne sich nicht darum zu kümmern, Ihre Änderungen zu verlieren.

Ja, es besteht eine geringe Wahrscheinlichkeit, dass Ihre Änderungen mit der neuen Version unvereinbar sind. Wenn Sie Kopien von Twentyten -Dateien erstellen und diese für Ihr Kinderthema ändern, müssen Sie diese Änderungen erneut anwenden, aber das ist viel besser, als Ihre Änderungen zu verlieren, wenn die Das Thema wird aktualisiert.

Aber anstatt meine Antwort aus einer anderen Frage zu duplizieren, bei der ich Kinderthemen vorgeschlagen habe, werde ich Sie nur dorthin verweisen:

• Anpassen eines WordPress -Themas, ohne es zu ändern? (Verwenden Sie Kinderthemen)

Für die Beispiele in der restlichen Antwort werde ich das Kinderthema nennen "Himanshu".

2. Registrieren Sie einen Themenstandort

Registrieren Sie einen Themenstandort ist sehr einfach mit dem register_nav_menus() Funktion (Ja, es wäre wirklich schön gewesen, wenn sie diese Funktion genannt hätten register_nav_menu_locations(), Aber ich schweife ab...)

Ich werde a erstellen "Fusszeile" Menü für dieses Beispiel.

Beachten Sie in meinem Beispiel, wie ich Bezugnahme habe 'primary' in einem Kommentar; Ich mache das, damit Sie sehen, wie der Standard -NAV -Menüstandort benannt ist und dass Sie ihn selbst nicht definieren müssen. Beachten Sie auch, dass ich früher __() Übersetzungsfunktion und spezifizierte den Namen des untergeordneten Themas als Übersetzungsdomäne.

Wenn Sie ein Kinderthema verwenden, müssen Sie eine erstellen functions.php Datei in Ihrem Thema, um diese Funktion unterzubringen, aber wenn Sie ein Thema ändern, finden Sie es einfach functions.php und fügen Sie es zum 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 ihn nicht an andere verteilen oder sich um Übersetzungen Sorgen machen müssen, können Sie dies einfach tun:

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

3. Erstellen Sie ein neues Menü

Als nächstes erstellen wir Ihr Fußzeilenmenü, indem wir zum Navigieren zum Navigieren Menüs Option der Aussehen Menü in der Administratorkonsole. Drücke den "+" Um ein Menü hinzuzufügen, geben Sie den Namen Ihres Menüs ein und klicken Sie dann auf "Menü erstellen":

_{(Quelle: mikeschinkel.com)}

Notiz dass Sie Ihr Menü häufig genauso wie den Namen Ihres Menüstandorts nennen, das ist jedoch nicht erforderlich und WordPress behandelt Menüs und ihre Menüpositionen sie als separate Einheiten.

Sicher sein zu Fügen Sie Ihrem Menü einige Optionen hinzu Oder es wird wenig nützlich sein. Wählen Sie die Optionen aus, die Sie mit der Administratorkonsole benötigen, fügen Sie sie in Ihr Menü hinzu und speichern Sie dann (In meinem Screenshot zeige ich nur die Auswahl von "Seiten" für Menüoptionen, aber Sie können die Arten von Menüoptionen, die WordPress bietet, mischen und übereinstimmen.):

_{(Quelle: mikeschinkel.com)}

4. Verbinden Sie das neue Menü und den Themenstandort zusammen

Die Zusammenarbeit mit Ihrem neuen Menü mit Ihrem gewünschten Themenstandort ist einfach. Verwenden Sie einfach WordPress 'Admin -Konsole:

_{(Quelle: mikeschinkel.com)}

5. Rufen Sie an wp_nav_menu() In der Vorlagendatei

Jetzt müssen wir zurück zum Code gehen. Ich habe eine Kopie von gemacht footer.php aus dem Twentyten -Thema und kopierte es an die "Himanshu" Themenverzeichnis. 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
 */
?>
  </div><!-- #main -->

  <div id="footer" role="contentinfo">
    <div id="colophon">

Ich habe den Anruf eingelegt wp_nav_menu() zusammen mit Wrapper html direkt danach <div id="colophon"> In Zeile 18 sehen die Zeilen 13 bis 24 jetzt wie folgt aus:

</div><!-- #main -->

<div id="footer" role="contentinfo">
  <div id="colophon">
    <div id="footernav" role="navigation">
      <?php
        wp_nav_menu(array(
          'container_class' => 'menu-footer',
          'theme_location' => 'footer'
        ));
      ?>
    </div>

Notiz Ich habe mich entschlossen, den Wrapper anzurufen footernav und der innere Behälter menu-footer Und ich folgte Twentytens Führung und setzte role="navigation". Jedoch, Der wichtigste Aspekt des Code ist 'theme_location' => 'footer' Was zu unserem benannten Themenort in Schritt 2 übereinstimmt.

All diese Schritte geben uns ein Fußzeilenmenü, das wie folgt aussieht:

_{(Quelle: mikeschinkel.com)}

6. Stylen Sie Ihr Menü

Schließlich müssen wir nur CSS zu unserem Thema hinzufügen style.css Datei und wir können ein Fußzeilenmenü erhalten, das so aussieht:

_{(Quelle: mikeschinkel.com)}

Das Styling ist sehr einfach Also bitte halte meine schrecklichen Designfähigkeiten nicht gegen mich, als ich bin nicht Ein Designer noch habe ich jemals gedroht, einer zu sein! Ich habe Kommentare in den CSS -Code aufgenommen und erklärt, warum ich jede Selektor- und CSS -Eigenschaft verwendet habe, die ich getan 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 für einen Designer ist, damit Sie oder wer Ihr Designer Menüs implementieren kann Thema Perspektive; Rufen Sie einfach die an wp_nav_menu() Funktion auf Ihre Menüs und Menüorte, und Sie können loslegen!