Création de menus multiples lorsque vous utilisez le thème TwentyTen?

Question

Comment obtenir plusieurs menus dans le thème TwentyTen?

Answer 1

Il y a plusieurs étapes pour créer des menus supplémentaires à l'aide du nouveau système de menu dans WordPress dans le thème TwentyTen ou tout autre thème WordPress (dont certaines de ces étapes peut être fait sur commande) . De plus, je vais recommander fortement de créer un thème enfant basé sur TwentyTen au lieu de modifier directement:

1. Créer un thème enfant sur le thème Twenty Ten.

2. Enregistrer un emplacement thématique dans le fichier functions.php de votre thème.

3. Créer un nouveau menu en utilisant la console d'administration de votre site.

4. Associer le nouveau menu et l'emplacement du thème en utilisant votre console d'administration.

5. Appel wp_nav_menu() dans le fichier modèle de votre thème où vous voulez que le menu apparaisse.

6. Style menu de manière à intégrer visuellement avec votre site.

Alors, nous allons être avec elle!

1. Créer un thème enfant

Création un thème enfant est extrêmement simple et vous donne l'avantage de pouvoir mettre à niveau TwentyTen si une nouvelle version sort sans avoir à vous soucier de ne pas perdre vos modifications.

Oui, il y a une petite chance vos modifications ne seront pas compatibles avec la nouvelle version, et si vous faites des copies de fichiers Twentyten et les modifier pour le thème de votre enfant, vous aurez besoin de présenter une nouvelle demande de ces changements, mais c'est beaucoup mieux que de perdre vos modifications lorsque le thème est mis à jour.

Mais plutôt que de dupliquer ma réponse d'une autre question où j'évoquaient les enfants, je vais vous signaler là:

• Personnalisation d'un thème WordPress sans changer il? (Utilisez les thèmes pour enfants)

Pour les exemples dans le reste de cette réponse que je vais appeler le thème de l'enfant « Himanshu » .

2. Inscrivez-vous un emplacement à thème

Enregistrement d'un emplacement à thème est très simple en utilisant la fonction register_nav_menus() (oui, il aurait été vraiment bien s'ils avaient appelé cette fonction register_nav_menu_locations(), mais je digresse ...)

Je vais créer un "Pied de page" Menu pour cet exemple.

Dans mon exemple avis comment je fais référence 'primary' dans un commentaire; Je le fais de sorte que vous verrez ce que l'emplacement du menu de navigation par défaut est nommé et que vous ne devez pas définir vous-même. Notez également que je faisais fonction de traduction de __() et spécifier le nom du thème de l'enfant comme le domaine de la traduction.

Si vous utilisez un thème enfant, vous devez créer un fichier functions.php dans votre thème à la maison cette fonction, mais si vous les modifiez un thème trouverez juste functions.php et l'ajouter à la fin:

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

Si vous écrivez du code pour votre propre thème et ne pas besoin de le distribuer à d'autres ou vous soucier de traductions que vous pouvez simplement faire ceci:

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

3. Créer un nouveau menu

Ensuite, nous allons créer le menu de bas de page situé en accédant à la Menus options du menu Apparence dans la console d'administration. Cliquez sur le "+" pour ajouter un menu, tapez le nom de votre menu, puis cliquez sur "Créer un menu" :

_{(source: mikeschinkel.com )}

Remarque que vous souvent le nom de votre menu, le même que le nom de votre emplacement de menu, mais ce n'est pas nécessaire et WordPress traite les menus et les leurs emplacements de menu que sentités compte séparée .

Assurez-vous de ajouter des options à votre menu ou il sera de peu d'utilité. Sélectionnez les options dont vous avez besoin à l'aide de la console d'administration, les ajouter à votre menu, puis enregistrer (dans ma capture d'écran je montre que la sélection « Pages » pour les options de menu, mais vous pouvez mélanger et assortir ce que jamais les types d'options de menu WordPress offre) :

_{(source: mikeschinkel.com )}

4. Associer le nouveau menu et le thème Emplacement

votre nouveau menu Associer votre emplacement à thème désiré est facile, il suffit d'utiliser la console d'administration de WordPress:

_{(source: mikeschinkel.com )}

5. Appel wp_nav_menu() dans le fichier modèle

Maintenant, nous avons besoin de retourner au code. J'ai fait une copie de footer.php du thème TwentyTen et recopié à la « Himanshu » Répertoire thématique. Voici ce que les 18 premières lignes ressemblent à:

<?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">

J'inséré l'appel à wp_nav_menu() avec wrapper HTML juste après <div id="colophon"> en ligne 18 donc des lignes 13-24 maintenant se présenter comme suit:

</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>

Remarque J'ai choisi d'appeler l'emballage footernav et le récipient intérieur menu-footer et je suivais l'avance de TwentyTen et role="navigation" ensemble. Cependant, le plus important aspect du code est 'theme_location' => 'footer' qui correspond à l'emplacement de notre thème nommé à l'étape 2.

Toutes ces étapes nous donne un menu de bas de page qui se présente comme suit:

_{(source: mikeschinkel.com )}

6. Style de menu

Enfin, nous juste besoin d'ajouter CSS à notre fichier style.css de thème et nous pouvons obtenir un menu de pied de page qui ressemble à ceci:

_{(source: mikeschinkel.com )}

Le style est très basique alors s'il vous plaît ne pas tenir mes compétences en conception terrible contre moi que je suis pas un designer et je n'ai jamais menacé d'être un! J'ai inclus des commentaires dans le code CSS expliquer pourquoi je chaque sélecteur et la propriété CSS que je l'ai fait:

#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 */
}

C'est à ce sujet! Notez que cette façon est un outil pour un concepteur d'utiliser si vous ou quiconque votre concepteur est peut implémenter des menus à l'aide de cela dans pratiquement quelque manière que vous aimez d'un thème perspective; il suffit d'appeler la fonction wp_nav_menu() le référencement de vos menus et les emplacements de menu et vous êtes bon pour vous!