Afișarea unui meniu folosind funcția wp_nav_menu. CSS și HTML5: meniu de navigare receptiv
Bună ziua, astăzi vom vorbi din nou despre crearea unui meniu (vertical și orizontal) în wordpress prin intermediul panoului de control, precum și despre cum să-l afișați oriunde pe site-ul dvs. folosind funcția wp_nav_menu, totul va fi mult mai ușor decât ghidurile mele scrise anterior la crearea meniurilor.
Puteți descărca sursele articolului de mai jos
Ghidul de mai jos se bazează pe articolul meu anterior -
Totuși, aici vom face totul mai simplu (nu vom atinge fișierul functions.php și nici nu vom folosi scripturi pentru a face meniul drop-down), și anume, vom învăța cum să facem meniu vertical sau un meniu orizontal non-derulant.
Să începem!
1. Accesați panoul de control al site-ului WordPress, în meniul din stânga selectați „ Aspect” și sub-elementul său „Meniu”.
Aici creăm meniul de care avem nevoie.
De exemplu, să creăm un meniu din categorii, dar nu din toate, ci doar din cele de care avem nevoie și de care le denumim acest meniu– „rubrici”, așa va arăta:
2. Pentru a afișa meniul în WordPress vom folosi următoarea funcție:
Este simplu, în codul de mai sus, în loc de „numele meniului” înlocuiți numele meniului creat și lipiți codul oriunde pe site-ul dvs.
Pentru meniul creat în exemplul nostru, această funcție va arăta astfel:
3. Introduceți meniul în locul dorit de pe site-ul nostru.
Să inserăm, de exemplu, meniul nostru „rubrici” în antet, în partea de sus.
De exemplu, să luăm tema standard wordpress – Twenty Twelve.
Pentru a face acest lucru, în panou management wordpress accesați elementul – „Vizualizare cap” și subelementul său „Editor”, din dreapta în lista de șabloane selectați – header.php.
În codul său găsim deschiderea eticheta corporală, iar imediat după ea există o etichetă care deschide blocul „pagină” - după aceasta vom introduce ieșirea meniului nostru „rubrici” folosind funcția - wp_nav_menu:
...
>Salvăm modificările și mergem pe site-ul nostru web, vedem ce avem:
După cum puteți vedea, obținem un meniu vertical, iar acest lucru este bine dacă aveți nevoie de un meniu vertical, totuși, să spunem că avem nevoie de un meniu orizontal, apoi trebuie să specificăm stiluri de design pentru meniul nostru – „rubrici”.
4. Scriem stiluri de meniu.
Pentru început, să includem funcția de afișare a meniului nostru bloc nou, de exemplu „menu2”, pentru a specifica stiluri de design pentru acesta.
Adică, codul din fișierul header.php (calea 3 acest manual) va arăta astfel:
...
>Următorul pas pe care trebuie să-l facem este să setăm stilurile de design pentru noul nostru bloc („menu2”), care conține noul nostru meniu („rubrici”).
Și pentru a face acest lucru, în panoul de control WordPress, în meniul din stânga, selectați elementul „Aspect”, apoi subelementul „Editor”, iar în dreapta dintre șabloane selectați fișierul - style.css.
Mergeți în partea de jos a codului și introduceți următorul fragment:
#menu2 ( umplutură: 0 0 0 20px; margine: 0; ) #menu2 li ( float: stânga; stil listă: niciunul; font: 12px Tahoma, Arial; ) #menu2 li a ( afișare: bloc; fundal: #20548E ; umplutură: 5px 12px: alb solid: #EAFFED: nowrap: 0; alb solid;
Apoi mergem pe site și vedem ce avem:
După cum puteți vedea, meniul nostru a trecut de la vertical la orizontal, tot ce rămâne este să ajustați stilurile de design pentru a se potrivi site-ului dvs.
De exemplu, în în acest exemplu trebuie să extindem lățimea fiecărui element de meniu - atributul este responsabil pentru aceasta:
Latime: 70px;
il schimb in:
Latime: 170px;
După care meniul meu va arăta astfel:
În articolul de pe blog dinaintea trecutului, am scris despre inovații interesante ultima versiune WordPress este un mecanism special de creare și gestionare. Acum a devenit mult mai convenabil și mai ușor utilizatorii obișnuiți creați meniuri de complexitate diferită, care pot consta nu numai din pagini sau categorii de blog, dar pot avea și link-uri către orice adresă URL. Pentru a afișa meniul în șablon, se folosește o funcție specială wp_nav_menu - vă voi spune despre asta astăzi.
Dacă nu există nicio secțiune de meniu în administratorul WordPress, o puteți activa prin adăugare cod special la fișierul functions.php
Iată mai întâi numele meniului pe care l-am creat. Aceasta este utilizarea funcției în caz general fără widget-uri, va trebui să lucrați cu ele puțin diferit. Cu toate acestea, funcția wp_nav_menu poate fi scoasă fără argumente, rezultând „navigare” situație diferită— mai întâi, o potrivire după numele meniului dacă este specificat cel puțin un element de meniu pentru acesta, altfel va fi afișat pur și simplu un meniu negol etc. Dar din nou, vă sfătuiesc să utilizați codul de mai sus și să nu vă dați seama ce ar trebui să scoată funcția fără argumente. Sintaxa sa este următoarea:
Următorii parametri sunt utilizați aici:
$meniu— identificatorul selectat pentru meniu — ID, slug sau numele meniului.
$container- Meniul UL este „împachetat” în mod implicit într-un container DIV folosind această setare.
$container_class— indică clasa containerului, valoarea sa implicită este menu-(menu slug)-container, adică în cazul nostru, de exemplu, va exista o clasă menu-first-container.
$container_id— puteți adăuga un ID la container, care nu este specificat în mod implicit.
$menu_class— clasa pentru elementul de meniu UL, valoarea sa este meniu.
$menu_id— ID pentru elementul ul, implicit la meniu-(slug)
$ecou— dacă nu doriți să afișați meniul, dar să returnați valoarea funcției, utilizați valoarea 0 pentru această setare.
$fallback_cb— dacă meniul nu există, se apelează funcția wp_page_menu.
$inainte— setează textul care este afișat înaintea linkului A.
$link_before— afișează expresia înainte de textul linkului, nespecificat.
$link_after— afișat după textul linkului, de asemenea, gol.
$adâncime— setează numărul de niveluri ierarhice pentru afișarea meniului; valoarea implicită 0 afișează întregul meniu.
$walker- un fel de „obiect walker” personalizat de neînțeles, probabil mai necesar pentru dezvoltatorii avansați.
$theme_location— locația temei în care va fi utilizat meniul trebuie activată prin register_nav_menu() pentru ca utilizatorul să o poată selecta. De asemenea, un fel de setare nu complet clară, aparent, atunci când lucrați cu widget-uri.
Exemple de utilizare a funcției wp_nav_menu
Cel mai simplu cod din cod este:
Eliminarea containerului DIV din meniu
"")); ?>
În principiu, nu este nimic complicat în crearea și gestionarea meniul wordpress 3.0 nr. Dezvoltatorii au simplificat semnificativ procedura de lucru și au extins capacitățile a acestui element navigare. Soluția este adesea folosită într-o varietate de sarcini șablon, de exemplu, atunci când se creează pentru versiuni mobile și desktop. Puțin mai târziu, voi adăuga încă câteva fragmente pe acest subiect.
P.S. gardian. Interesant și util pentru webmasteri Blog SEO, unde vei găsi răspunsuri la întrebările tale SEO.
Compania Aweb s-a impus de mult timp foarte bine in domeniul promovarii, optimizarii si promovarea motorului de căutareîn internet.
Navigarea este prezentă pe orice site bun, chiar dacă este unul de o pagină. In functie de situatie, link-uri de navigare poate duce la diverse secțiuni ale site-ului sau poate trimite la un marcaj (ancoră) situat pe pagina curenta. Redactare competenta navigarea în care utilizatorul nu se încurcă necesită anumite cunoștințe și experiență. Designul barei de navigare trebuie, de asemenea, realizat cu înțelepciune, iar în acest tutorial vă vom arăta cum să creați unul ușor de utilizat. meniu de navigatie.
Crearea navigației
Ce este navigația? Aceasta este o colecție de link-uri, adesea ordonate și grupate după semnificație. Un meniu de navigare este adesea creat folosind o etichetă de listă HTML
- , unde în fiecare punct
- conține un singur link . În HTML5, a fost introdusă o etichetă separată pentru navigare