Cum să creezi mai multe meniuri în tema TwentyTen?

Există mai mulți pași pentru a crea meniuri suplimentare folosind noul sistem de meniu din WordPress în tema TwentyTen sau orice altă temă WordPress (dintre care unii pași pot fi făcuți în altă ordine). În plus, vă recomand să creați o temă copil bazată pe TwentyTen în loc să o modificați direct:

1. Creați o Temă Copil bazată pe tema Twenty Ten.

2. Înregistrați o Locație de Temă în fișierul functions.php al temei dumneavoastră.

3. Creați un Meniu Nou folosind consola de administrare a site-ului dumneavoastră.

4. Asociați Noul Meniu și Locația de Temă folosind consola de administrare.

5. Apelați wp_nav_menu() în Fișierul Șablon al temei dumneavoastră unde doriți să apară meniul.

6. Stilizați Meniul astfel încât să se integreze vizual cu site-ul dumneavoastră.

Așadar, să începem!

1. Creați o Temă Copil

Crearea unei teme copil este extrem de simplă și vă oferă avantajul de a putea actualiza TwentyTen dacă apare o versiune nouă, fără a vă face griji că veți pierde modificările.

Da, există o mică șansă ca modificările dumneavoastră să fie incompatibile cu noua versiune, iar dacă faceți copii ale fișierelor TwentyTen și le modificați pentru tema copil, va trebui să reaplicați acele modificări, dar asta este mult mai bine decât să pierdeți modificările când tema este actualizată.

Dar în loc să repet răspunsul meu de la o altă întrebare unde am sugerat teme copil, vă voi îndruma acolo:

• Personalizarea unei teme WordPress fără a o modifica? (Folosiți Teme Copil)

Pentru exemplele din restul acestui răspuns, voi numi tema copil "Himanshu".

2. Înregistrați o Locație de Temă

Înregistrarea unei locații de temă este foarte simplă folosind funcția register_nav_menus() (da, ar fi fost foarte frumos dacă ar fi numit acea funcție register_nav_menu_locations(), dar mă îndepărtez...)

Voi crea un meniu "Footer" pentru acest exemplu.

În exemplul meu, observați cum fac referire la 'primary' într-un comentariu; fac asta pentru a vedea cum este numită locația implicită a meniului de navigare și că nu trebuie să o definiți singur. De asemenea, rețineți că am folosit funcția de traducere __() și am specificat numele temei copil ca domeniu de traducere.

Dacă folosiți o temă copil, trebuie să creați un fișier functions.php în tema dumneavoastră pentru a găzdui această funcție, dar dacă modificați o temă, găsiți pur și simplu functions.php și adăugați-o la sfârșit:

register_nav_menus(array(
  //'primary' => __('Primary Menu Area','himanshu'), ==> Primary definit implicit
  'footer'  => __('Footer Menu Area','himanshu'),
));

Dacă scrieți cod pentru propria temă și nu trebuie să o distribuiți altora sau să vă faceți griji cu privire la traduceri, puteți face pur și simplu astfel:

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

3. Creați un Meniu Nou

În continuare, să creăm meniul de footer navigând la opțiunea Meniuri din meniul Aspect în consola de administrare. Faceți clic pe "+" pentru a adăuga un meniu, tastați numele meniului și apoi faceți clic pe "Creează Meniu":

_{(sursa: mikeschinkel.com)}

Notă că veți numi adesea meniul la fel ca numele locației de meniu, dar acest lucru nu este obligatoriu și WordPress tratează meniurile și locațiile lor ca entități separate.

Asigurați-vă că adăugați câteva opțiuni la meniul dumneavoastră altfel va fi de puțin folos. Selectați opțiunile de care aveți nevoie folosind consola de administrare, adăugați-le la meniu și apoi salvați (în captura mea de ecran arăt doar selectarea "Pagini" pentru opțiunile de meniu, dar puteți amesteca și potrivi orice tipuri de opțiuni de meniu pe care le oferă WordPress):

_{(sursa: mikeschinkel.com)}

4. Asociați Noul Meniu și Locația de Temă

Asocierea noului meniu cu locația de temă dorită este ușoară, folosiți pur și simplu consola de administrare WordPress:

_{(sursa: mikeschinkel.com)}

5. Apelați wp_nav_menu() în Fișierul Șablon

Acum trebuie să ne întoarcem la cod. Am făcut o copie a footer.php din tema TwentyTen și am copiat-o în directorul temei "Himanshu". Iată cum arată primele 18 linii:

<?php
/**
 * Șablonul pentru afișarea footer-ului.
 *
 * Conține închiderea div-ului id=main și tot conținutul
 * după. Apel sidebar-footer.php pentru widget-urile de jos.
 *
 * @package WordPress
 * @subpackage Himanshu (bazat pe Twenty Ten)
 * @since Twenty Ten 1.0
 */
?>
  </div><!-- #main -->

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

Am inserat apelul la wp_nav_menu() împreună cu HTML-ul wrapper imediat după <div id="colophon"> pe linia 18, astfel încât liniile 13 până la 24 arată acum astfel:

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

Notă Am ales să numesc wrapper-ul footernav și containerul intern menu-footer și am urmat exemplul TwentyTen și am setat role="navigation". Cu toate acestea, cel mai important aspect al codului este 'theme_location' => 'footer' care se potrivește cu locația de temă numită în pasul #2.

Toți acești pași ne oferă un meniu de footer care arată astfel:

_{(sursa: mikeschinkel.com)}

6. Stilizați Meniul

În final, trebuie doar să adăugăm CSS în fișierul style.css al temei noastre și putem obține un meniu de footer care arată astfel:

_{(sursa: mikeschinkel.com)}

Stilizarea este foarte simplă așa că vă rog să nu mă judecați pentru abilitățile mele de design, deoarece nu sunt și nici nu am pretins vreodată să fiu un designer! Am inclus comentarii în codul CSS care explică de ce am folosit fiecare selector și proprietate CSS pe care le-am folosit:

#colophon {
  padding-top:6px;        /* Mută meniul mai aproape de linia neagră groasă (TwentyTen are 18px) */
}
#footernav {              /* Folosește aceeași familie de fonturi ca TwentyTen pentru meniuri */
  font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
  font-size:1.1em;        /* Face textul puțin mai mare decât implicit */
  padding-bottom:6px;     /* Adaugă puțin spațiu sub meniu */
}
#footernav .menu-footer {
  text-align:center;      /* Necesar pentru a centra meniul */
}
#footernav ul {
  margin:0 auto;          /* De asemenea, necesar pentru a centra meniul */
  width:auto;             /* Face meniul doar atât de larg cât este necesar */
  display:inline;         /* De asemenea, necesar pentru a menține lățimea la minimum */
}
#footernav li {
  display:inline;         /* Face meniul orizontal în loc de vertical */
}
#footernav a {
  text-decoration:none;   /* Elimină sublinierea din link-uri */
  background-color:#ddd;  /* Creează un fundal gri deschis pentru fiecare opțiune */
  color:black;            /* Face elementele ușor de văzut cu text negru */
  padding:0.25em 0.5em;   /* Adaugă spațiu în jurul elementelor pentru a afișa fundalul */
  margin:0 0.5em;         /* Adaugă spațiu între elemente */
}
#footernav a:hover {
  background-color:black; /* Înconjoară elementul de meniu sub cursorul mouse-ului cu negru */
  color:white;            /* Face textul pentru același element de meniu să fie alb */
}

Cam asta este! Rețineți că acesta este un instrument pentru un designer, astfel încât dumneavoastră sau oricine este designerul dumneavoastră să poată implementa meniuri folosind acest lucru în practic orice mod doriți dintr-o perspectivă de temă; apelați pur și simplu funcția wp_nav_menu() referindu-vă la meniurile și locațiile de meniu și sunteți gata!