Acum că știm cum să creăm o temă WordPress de bază de la zero, haideți să aruncăm o privire la cum să creăm un meniu de navigare personalizat pentru tema noastră. Acest meniu ar trebui să aibă posibilitatea de a fi controlat din tabloul de bord WordPress. Cu alte cuvinte, ar trebui să puteți intra în tabloul de bord și să adăugați sau să eliminați linkuri către orice pagini, postări sau categorii pe care le doriți. Până la sfârșitul acestui tutorial, asta este exact ceea ce vom avea. Haideți să ne adâncim și să vedem cum să realizăm acest obiectiv.
Deschideți header.php
Dați-i drumul și deschideți fișierul header.php din tema pe care am lucrat. Scopul nostru va fi să adăugăm un meniu care să locuiască deasupra conținutului principal al site-ului, dar sub zona cu numele site-ului și sloganul. Pentru a face acest lucru, putem adăuga următorul cod de mai jos:
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php wp_nav_menu() ?> </nav> </header>Rețineți că ne folosim de o funcție specială pusă la dispoziție de WordPress de wp_nav_menu(). Această funcție se ocupă de toată munca de teren pentru dvs. în construirea unui meniu personalizat. Nu trebuie să tastați manual tot html-ul singur, așa că acest lucru este destul de util. Acum nu avem încă prea multe pagini, dar dacă vizităm site-ul nostru de test, funcția emite deja un link către pagina de probă care există pe instalația noastră.
Pasarea de argumente către funcția wp_nav_menu()
Ca majoritatea funcțiilor din WordPress, puteți trece argumente opționale către funcția wp_nav_menu(). Aici vom seta o matrice și vom configura doar o singură opțiune. Folosim un array în cazul în care dorim să trecem mai multe opțiuni în viitor. Iată cum am putea adăuga această bucată de cod.
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php $args = ; ?><?php wp_nav_menu( $args ) ?> </nav> </header>Această opțiune ne oferă o modalitate de a denumi anumite meniuri din tema noastră. S-ar putea să dorim să avem mai mult de un meniu, iar aceasta este metoda prin care puteți face diferența între mai multe meniuri.
Registrează locația meniului în functions.php
Pentru a utiliza meniul pe care tocmai l-am creat în fișierul header.php, din tabloul de bord de administrare WordPress, trebuie să înregistrăm locația meniului în fișierul functions.php al temei. Așadar, cum putem înregistra noul nostru meniu cu WordPress? Putem face acest lucru cu funcția register_nav_menus() încorporată în WordPress. Să înregistrăm meniul nostru astfel:
<?phpfunction custom_theme_assets() {wp_enqueue_style( 'style', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );register_nav_menus( );Configurați meniul nostru personalizat în WordPress Dashboard
Noul nostru meniu ar trebui acum să fie înregistrat cu WordPress core. WordPress este acum conștient de meniul nostru și de locația acestuia în temă. Putem acum să intrăm în tabloul de bord, să creăm un nou meniu și să gestionăm locația acestuia. În mod specific, dorim să îl facem să apară acolo unde am folosit funcția wp_nav_menu(). Vom vizita Appearance->Menusuri și apoi vom face clic pe „creați un nou meniu”.
Putem numi acest meniu cum vrem noi. Vom alege doar Meniul principal pentru a simplifica și apoi vom da click pe ‘Create Menu’.
În următorul pas, vom face legătura cu toate categoriile noastre. Așa că putem alege Categorii, Selectați toate, actualizăm locația de afișare la ‘Meniu principal’ și apoi facem clic pe ‘Salvează meniul’. Să încercăm.
Vizitarea site-ului nostru ne arată că acum avem un link către fiecare categorie din noul meniu pe care l-am creat. Deocamdată este doar o listă neordonată și nu este cea mai frumoasă deocamdată – dar funcționează!
Care este avantajul înregistrării meniului personalizat?
Știu, știu. Vă gândiți că nici măcar nu are sens să treceți prin toată această tevatură doar pentru a obține câteva hyperlink-uri către câteva categorii care să fie afișate pe site-ul dumneavoastră. Într-un fel, aveți dreptate. De ce să nu construiești tu însuți manual unele dintre aceste lucruri. Sigur, acest lucru se poate face, dar atunci când ne construim meniul așa cum am făcut aici, avem acum puterea tabloului de bord WordPress pentru a controla codul pe care l-am inclus în tema noastră. Acum putem cu ușurință să tragem și să plasăm ordonarea legăturilor, printre alte lucruri, chiar din Dashboard. Haideți să schimbăm ordinea de la WordPress, PHP, JavaScript la JavaScript, WordPress și apoi PHP. Foarte ușor!
Acum, când vizitați site-ul, ordinea linkurilor din meniu este actualizată. Cu această abordare nu este nevoie să vă jucați cu codul subiacent.
Stilizați acel meniu personalizat
Lista aceea neordonată nu va fi suficientă! Trebuie să facem lucrurile un pic mai șmecherește decât atât. Haideți să petrecem puțin timp aplicând niște CSS personalizat pentru a curăța puțin acel meniu. În primul rând, dorim să transformăm lista neordonată orientată pe verticală într-un meniu orientat pe orizontală. Am dori, de asemenea, să eliminăm punctele de glonț din fiecare element de listă, să adăugăm niște umplutură și marjă, precum și să eliminăm sublinierea pentru link-uri. Iată o încercare de a crea acest efect în fișierul nostru style.css.
/* Nav Menu */.navigation-menu ul { margin: 0; padding: 0;}.navigation-menu ul:before, .navigation-menu ul:after { content: ""; display: table;}.navigation-menu ul:after { clear: both;}.navigation-menu ul { *zoom: 1}.navigation-menu ul li { list-style: none; float: left; margin-right: 3px;}.navigation-menu ul li a:link,.navigation-menu ul li a:visited { display: block; padding: 12px 17px; border: 2px solid #ecf0f1; border-bottom: none; text-decoration: none;}Se întâmplă cam multe lucruri în CSS-ul listat mai sus. Haideți să le parcurgem. În primul selector .navigation-menu ul, eliminăm toate umpluturile și marginile din lista neordonată. În continuare, ne asigurăm că lista neordonată va șterge flotoarele copiilor elementelor din listă. În selectorul .navigation-menu ul li, eliminăm gloanțele din listă, facem ca elementele listei să plutească în stânga și adăugăm o mică marjă în dreapta. La sfârșit, țintim legăturile. Mai întâi le transformăm în elemente de nivel de bloc cu o umplutură de 12px pe verticală și 17px pe orizontală. Adăugăm un efect frumos de bordură și eliminăm sublinierea pe linkuri. Să o verificăm acum în browser.
Frumos! Acest meniu arată mult mai bine decât arăta inițial.
Cum să adăugați o culoare personalizată la hover la meniu
Stilizarea de bază insă la locul ei. Ar fi frumos să avem un pic de efect de hover atunci când se trece cu mouse-ul peste fiecare link. Acest lucru este foarte ușor de configurat folosind următorul fragment:
.navigation-menu ul li a:hover { background-color: #ebf5fb;}
Aceasta arată destul de bine!
Cum să țintim starea activă a unui element de meniu
Un alt lucru pe care am putea dori să-l adăugăm este posibilitatea de a personaliza culoarea unui link activ. Acest lucru este diferit de simplul efect hover. În acest caz, atunci când vizităm un anumit link din meniu, dorim ca WordPress să fie conștient de faptul că aceasta este acum pagina activă vizualizată și să actualizeze reprezentarea vizuală pentru a reflecta link-ul activ. Pentru a face acest lucru, ne putem folosi de o clasă specială care este încorporată în WordPress pentru a rezolva exact acest lucru. Aceasta este clasa current-menu-item. Iată cum o putem încorpora în meniul nostru personalizat.
.navigation-menu ul li.current-menu-item a:link,.navigation-menu ul li.current-menu-item a:visited { background-color: #4285f4; color: #ffffff;}Dacă vizităm site-ul nostru acum și testăm vizitarea diferitelor linkuri din meniul personalizat, putem vedea că arată foarte bine. Acum avem un aspect special pentru starea hover și un aspect diferit pentru starea activă a linkurilor din meniul nostru. Aceasta este o modalitate foarte bună de a vă asigura că vizitatorii site-ului dvs. știu unde se află în prezent, menținând meniul activ aprins, ca să spunem așa.
Cum să creați un meniu personalizat în WordPress Rezumat
În acest tutorial, am avut o privire bună asupra modului de adăugare a unui meniu personalizat la tema noastră personalizată în WordPress. Ne-am folosit de câteva funcții WordPress pentru a ne ajuta. Prima pe care am folosit-o a fost wp_nav_menu(). Această funcție poate construi în mod automat o listă neordonată și elemente copii pentru a crea structura unui meniu frumos, căruia îi puteți aplica stilizare. Există multe argumente pe care le puteți transmite acestei funcții, dar noi ne-am concentrat doar pe elementele de bază aici. Următoarea funcție pe care am folosit-o a fost funcția register_nav_menus(). Această funcție ne permite să îi spunem lui WordPress despre noul nostru meniu și să ne conectăm la el în WordPress Dashboard. Odată ce noul nostru meniu a fost înregistrat cu WordPress, am constatat că a fost ușor să adăugăm sau să eliminăm orice dorim din acel meniu, direct din tabloul de bord WordPress și fără a fi nevoie să modificăm vreun cod în fișierele temei noastre. În cele din urmă, ne-am luat ceva timp pentru a îmbunătăți aspectul meniului nostru prin utilizarea unor stilizări CSS personalizate.
.