Come creare menu multipli nel tema TwentyTen di WordPress

Ci sono diversi passaggi per creare menu aggiuntivi utilizzando il nuovo sistema di menu in WordPress nel tema TwentyTen o in qualsiasi tema WordPress (alcuni di questi passaggi possono essere eseguiti in ordine diverso). Inoltre, ti consiglio vivamente di creare un child theme basato su TwentyTen invece di modificarlo direttamente:

1. Crea un Child Theme basato sul tema Twenty Ten.

2. Registra una Posizione del Tema nel file functions.php del tuo tema.

3. Crea un Nuovo Menu utilizzando la console di amministrazione del tuo sito.

4. Associa il Nuovo Menu e la Posizione del Tema utilizzando la console di amministrazione.

5. Chiama wp_nav_menu() nel File Template del tuo tema dove vuoi che appaia il menu.

6. Personalizza il tuo Menu in modo che si integri visivamente con il tuo sito.

Quindi, iniziamo!

1. Crea un Child Theme

Creare un child theme è estremamente semplice e ti permette di aggiornare TwentyTen se viene rilasciata una nuova versione senza doverti preoccupare di perdere le tue modifiche.

Sì, c'è una piccola possibilità che le tue modifiche siano incompatibili con la nuova versione, e se fai copie dei file di TwentyTen e li modifichi per il tuo child theme dovrai riapplicare quelle modifiche, ma è comunque meglio che perdere le tue modifiche quando il tema viene aggiornato.

Invece di ripetere la mia risposta da un'altra domanda in cui ho suggerito i child theme, ti rimando direttamente lì:

• Personalizzare un tema WordPress senza modificarlo? (Usa i Child Theme)

Per gli esempi nel resto di questa risposta, chiamerò il child theme "Himanshu".

2. Registra una Posizione del Tema

Registrare una posizione del tema è molto semplice utilizzando la funzione register_nav_menus() (sì, sarebbe stato bello se avessero chiamato questa funzione register_nav_menu_locations(), ma divago...)

Per questo esempio, creerò un menu "Footer".

Nel mio esempio, nota come faccio riferimento a 'primary' in un commento; lo faccio in modo che tu veda come è chiamata la posizione predefinita del menu di navigazione e che non devi definirla tu stesso. Inoltre, nota che ho utilizzato la funzione di traduzione __() e ho specificato il nome del child theme come dominio di traduzione.

Se stai utilizzando un child theme, devi creare un file functions.php nel tuo tema per ospitare questa funzione, ma se stai modificando un tema, basta trovare functions.php e aggiungerlo alla fine:

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

Se stai scrivendo codice per il tuo tema e non hai bisogno di distribuirlo ad altri o di preoccuparti delle traduzioni, puoi semplicemente fare questo:

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

3. Crea un Nuovo Menu

Ora creiamo il tuo menu footer navigando nell'opzione Menù del menu Aspetto nella console di amministrazione. Clicca il "+" per aggiungere un menu, digita il nome del tuo menu e poi clicca "Crea Menu":

_{(fonte: mikeschinkel.com)}

Nota che spesso darai al tuo menu lo stesso nome della posizione del menu, ma non è obbligatorio e WordPress tratta menu e posizioni dei menu come entità separate.

Assicurati di aggiungere alcune opzioni al tuo menu altrimenti sarà di poca utilità. Seleziona le opzioni che ti servono utilizzando la console di amministrazione, aggiungile al tuo menu e poi salva (nella mia screenshot mostro solo la selezione di "Pagine" per le opzioni del menu, ma puoi mischiare e abbinare qualsiasi tipo di opzione fornita da WordPress):

_{(fonte: mikeschinkel.com)}

4. Associa il Nuovo Menu e la Posizione del Tema

Associare il tuo nuovo menu alla posizione del tema desiderata è semplice, basta utilizzare la console di amministrazione di WordPress:

_{(fonte: mikeschinkel.com)}

5. Chiama wp_nav_menu() nel File Template

Ora torniamo al codice. Ho fatto una copia di footer.php dal tema TwentyTen e l'ho copiata nella directory del tema "Himanshu". Ecco come appaiono le prime 18 righe:

<?php
/**
 * Il template per visualizzare il footer.
 *
 * Contiene la chiusura del div id=main e tutto il contenuto
 * successivo. Chiama sidebar-footer.php per i widget in basso.
 *
 * @package WordPress
 * @subpackage Himanshu (basato su Twenty Ten)
 * @since Twenty Ten 1.0
 */
?>
  </div><!-- #main -->

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

Ho inserito la chiamata a wp_nav_menu() insieme all'HTML wrapper subito dopo <div id="colophon"> alla riga 18, quindi le righe da 13 a 24 ora appaiono così:

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

Nota ho scelto di chiamare il wrapper footernav e il contenitore interno menu-footer e ho seguito l'esempio di TwentyTen impostando role="navigation". Tuttavia, l'aspetto più importante del codice è 'theme_location' => 'footer' che corrisponde alla nostra posizione del tema nominata nel passo #2.

Tutti questi passaggi ci danno un menu Footer che appare così:

_{(fonte: mikeschinkel.com)}

6. Personalizza il tuo Menu

Infine, dobbiamo solo aggiungere CSS al file style.css del nostro tema e possiamo ottenere un menu footer che appare così:

_{(fonte: mikeschinkel.com)}

La personalizzazione è molto semplice quindi per favore non giudicare le mie scarse abilità di design, non sono un designer né ho mai avuto intenzione di esserlo! Ho incluso commenti nel codice CSS per spiegare perché ho utilizzato ciascun selettore e proprietà CSS:

#colophon {
  padding-top:6px;        /* Avvicina il menu alla linea nera spessa (TwentyTen ha 18px) */
}
#footernav {              /* Usa lo stesso font-family di TwentyTen per i menu */
  font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
  font-size:1.1em;        /* Rendi un po' più grande del default */
  padding-bottom:6px;     /* Aggiungi un po' di spazio sotto il menu */
}
#footernav .menu-footer {
  text-align:center;      /* Necessario per centrare il menu */
}
#footernav ul {
  margin:0 auto;          /* Anche necessario per centrare il menu */
  width:auto;             /* Rendi il menu largo quanto necessario */
  display:inline;         /* Necessario per mantenere la larghezza minima */
}
#footernav li {
  display:inline;         /* Rendi il menu orizzontale invece che verticale */
}
#footernav a {
  text-decoration:none;   /* Rimuovi le sottolineature dai link */
  background-color:#ddd;  /* Crea uno sfondo grigio chiaro per ogni opzione */
  color:black;            /* Rendi il testo nero per una migliore visibilità */
  padding:0.25em 0.5em;   /* Aggiungi spazio attorno agli elementi per lo sfondo */
  margin:0 0.5em;         /* Aggiungi spazio tra gli elementi */
}
#footernav a:hover {
  background-color:black; /* Sfondo nero per l'elemento sotto il puntatore */
  color:white;            /* Testo bianco per l'elemento sotto il puntatore */
}

Questo è tutto! Nota che questo è uno strumento che un designer può utilizzare per implementare menu praticamente in qualsiasi modo desideri da una prospettiva di tema; basta chiamare la funzione wp_nav_menu() riferendosi ai tuoi menu e alle posizioni dei menu e sei a posto!