Creazione di menu più quando si utilizza il tema TwentyTen?

Question

Come arrivare più menu in TwentyTen tema?

Answer 1

Ci sono diversi passaggi per la creazione di menu aggiuntivi utilizzando il nuovo sistema di menu in WordPress nel tema TwentyTen o qualsiasi tema WordPress (di cui alcuni di questi passi può essere fatto fuori uso) . Inoltre, ho intenzione di raccomandare vivamente di creare un tema bambino sulla base di TwentyTen invece di modificare direttamente:

1. Crea un Tema Bambino sul tema Twenty Ten.

2. Registra un Tema posizione nel file di functions.php del vostro tema.

3. Crea un nuovo menu utilizzando la console di amministrazione del tuo sito web.

4. Associare il nuovo menu e il Tema Luogo utilizzando la console di amministrazione.

5. Chiamata wp_nav_menu() nel file di modello del vostro tema in cui si desidera visualizzare il menu.

6. Style tuo Menu in modo che si integra visivamente con il tuo sito.

Quindi cerchiamo di essere avanti con lui!

1. Creare un bambino tema

La creazione di un tema bambino è estremamente semplice e ti dà il vantaggio di essere in grado di aggiornare TwentyTen se una nuova versione viene fuori, senza avere di non preoccuparsi di perdere le modifiche.

Sì, c'è una piccola probabilità le modifiche saranno incompatibili con la nuova versione, e se si fanno le copie dei file TwentyTen e modificarli per il tema del bambino avrete bisogno di riapplicare quei cambiamenti, ma questo è molto meglio che perdere le modifiche quando si aggiorna il tema.

Ma piuttosto che duplicare la mia risposta da un'altra domanda in cui ho suggerito temi bambino mi limiterò a sottolineare lì:

• Personalizzazione di un tema WordPress senza cambiare vero? (Temi Usa Bambino)

Per gli esempi nel resto di questa risposta ho intenzione di chiamare il tema bambino "Himanshu" .

2. Registra un Tema Luogo

Registrazione dei luoghi tema è molto semplice utilizzando la funzione di register_nav_menus() (sì, sarebbe stato davvero bello se avevano chiamato quella funzione register_nav_menu_locations(), ma sto divagando ...)

creerò un "Piè di pagina" per questo esempio.

Nel mio esempio notare come riferisco 'primary' in un commento; Lo faccio in modo che vedrete cosa la posizione del menu di navigazione di default è chiamato e che non c'è bisogno di definire da soli. Si noti inoltre che ho usato per la funzione di traduzione __() e specificate il nome del tema bambino come il dominio di traduzione.

Se si utilizza un tema bambino è necessario creare un file functions.php nel tema per ospitare questa funzione, ma se si sta modificando un tema loro solo trovare functions.php e aggiungerlo alla fine:

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

Se si scrive codice per il proprio tema e non c'è bisogno di distribuirlo a terzi, o preoccuparsi di traduzioni si può semplicemente fare questo:

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

3. Creare un nuovo menu

Avanti creiamo menu piè di pagina si trova navigando alla Menu del Aspetto nella console di amministrazione. Fai clic sul "+" per aggiungere un menu, digitare il nome del vostro menu e quindi fare clic su "Crea Menu" :

_{(fonte: mikeschinkel.com )}

Nota che spesso si nome vostro menu lo stesso come il nome della località menu, ma che non è obbligatorio e menu ossequi WordPress e le loro posizioni li menu come separate entità .

Assicurarsi di aggiungere alcune opzioni al menu o sarà di scarsa utilità. Selezionare le opzioni necessarie mediante la console di amministrazione, aggiungerli al tuo menu e quindi salvare (nel mio screenshot Ho solo mostrare selezionando "Pagine" per le opzioni del menu, ma si può mescolare e abbinare che cosa mai tipi di opzioni di menu WordPress fornisce) :

_{(fonte: mikeschinkel.com )}

4. Associare il nuovo menu e la località tema

Associazione del nuovo menu con la vostra posizione tema desiderato è semplice, basta utilizzare la console di amministrazione di WordPress':

_{(fonte: mikeschinkel.com )}

5. Chiamata wp_nav_menu() nel file modello

Ora abbiamo bisogno di tornare testa al codice. Ho fatto una copia del footer.php dal tema TwentyTen e copiato nella directory "Himanshu" a tema. Ecco ciò che i primi 18 linee assomigliano:

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

Ho inserito la chiamata a wp_nav_menu() con wrapper HTML subito dopo <div id="colophon"> sulla linea 18 in modo da linee 13-24 ora simile al seguente:

</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 footernav involucro e il contenitore interno menu-footer e ho seguito l'esempio di TwentyTen e set role="navigation". Tuttavia, il più importante aspetto del codice è 'theme_location' => 'footer' , che corrisponde alla nostra posizione tema chiamato al punto # 2.

Tutte queste misure ci dà un menu piè di pagina che appare come il seguente:

_{(fonte: mikeschinkel.com )}

6. Style tuo Menu

Infine abbiamo solo bisogno di aggiungere CSS per il file style.css del nostro tema e possiamo ottenere un menu piè di pagina che assomiglia così:

_{(fonte: mikeschinkel.com )}

Lo stile è molto semplice quindi si prega di non tenere le mie abilità di progettazione terribile contro di me come io sono non un designer né ho mai minacciato di essere uno! ho incluso commenti nel codice CSS spiegare perché ho usato ogni proprietà di selezione e CSS che ho fatto:

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

Questo è tutto! Do atto che questo è uno strumento per un designer per l'uso in modo da voi o chiunque vostro progettista è in grado di implementare i menu che utilizzano questo praticamente in qualsiasi modo ti piace da un tema punto di vista; basta chiamare la funzione wp_nav_menu() riferimento i menu e le posizioni di menu e si sta bene ad andare!