Meniul de navigare din partea de sus a unui site web conține, de obicei, linkuri către toate paginile cele mai importante. Când faceți acest meniu lipicios, îl puteți menține pe ecran pe măsură ce utilizatorul derulează în jos pe pagină. Astfel, este întotdeauna la îndemână.
Acest lucru face navigarea mai accesibilă, permițând utilizatorilor să sară rapid la diferite secțiuni ale site-ului dvs. fără a fi nevoie să derulați înapoi la început. În opinia noastră, utilizarea unui meniu fix poate contribui la creșterea implicării și la îmbunătățirea utilizabilității generale a site-ului web.
În acest articol, vă vom arăta cum să adăugați cu ușurință un meniu de navigare plutitor fix pe site-ul dvs. WordPress.
Ce este un meniu de navigare plutitor lipicios?
Un meniu de navigare lipicios sau plutitor „se lipește” de partea de sus a ecranului pe măsură ce utilizatorul derulează în jos, astfel încât să fie mereu vizibil.
De obicei, meniul de navigare principal din WordPress conține linkuri către cel mai important conținut al site-ului dvs. Făcând acest meniu lipicios, vizitatorii pot face clic pe acele linkuri oricând, fără a fi nevoie să derulați.
Dacă aveți un magazin online, meniul de navigare de sus include de obicei linkuri către pagini concepute pentru conversie, cum ar fi pagina de finalizare a comenzii și coșul de cumpărături al clientului. Prin transformarea meniului de sus într-unul fix, puteți reduce adesea ratele de abandon al coșului și puteți obține mai multe vânzări.
Acestea fiind spuse, să vedem cum puteți crea cu ușurință un meniu de navigare plutitor lipicios în orice temă WordPress sau magazin WooCommerce. Pur și simplu utilizați linkurile rapide de mai jos pentru a sări la metoda pe care doriți să o utilizați:
- Metoda 1: Adăugați un meniu fix utilizând setările temei dvs. (Ușor)
- Metoda 2: Adăugați meniul de navigare fix folosind un plugin (Recomandat)
- Metoda 3: Adăugarea unui meniu de navigare plutitor lipicios folosind cod
- Bonus: Faceți postările dvs. WordPress lipicioase
Metoda 1: Adăugați un meniu fix utilizând setările temei dvs. (Ușor)
Unele dintre cele mai bune teme WordPress au suport încorporat pentru meniuri de navigare lipicioase. Acestea fiind spuse, merită să verificați setările temei dvs. accesând Teme » Personalizare în tabloul de bord WordPress și căutând orice setări etichetate „Meniuri”.
Dacă nu sunteți sigur dacă tema dvs. suportă meniuri lipicioase, puteți verifica documentația temei sau chiar contacta dezvoltatorul pentru ajutor. Pentru mai multe informații, consultați ghidul nostru despre cum să solicitați corect suport WordPress și să îl obțineți.
Dacă tema dvs. nu are suport încorporat pentru meniuri lipicioase, atunci va trebui să utilizați una dintre celelalte metode de mai jos.
Metoda 2: Adăugați meniul de navigare fix folosind un plugin (Recomandat)
Cel mai simplu mod de a adăuga un meniu de navigare fix în WordPress este prin utilizarea pluginului Sticky Menu & Sticky Header. Acesta vă permite să faceți orice element fix, inclusiv meniuri.
Mai întâi, va trebui să instalați și să activați pluginul. Dacă aveți nevoie de ajutor, consultați ghidul nostru pentru începători despre cum să instalați un plugin WordPress.
După activare, accesați Setări » Meniu fix (sau orice altceva!).
Pentru a începe, va trebui să obțineți ID-ul CSS al meniului de navigare pe care doriți să îl faceți lipicios, folosind instrumentul de inspecție al browserului dvs.
Pur și simplu vizitați site-ul dvs. și treceți cursorul mouse-ului peste meniul de navigare. Apoi, faceți clic dreapta și selectați „Inspect” din meniul browserului.
Aceasta va deschide un nou panou în browser, unde puteți vedea codul sursă pentru meniul de navigare.
Va trebui să găsiți linia de cod care se referă la meniu sau la antetul site-ului dvs. Va arăta cam așa:
<nav id="site-navigation" class="main-navigation" role="navigation">
Dacă vă chinuiți să găsiți codul, plasați cursorul mouse-ului peste diferitele linii de cod din panoul „Inspect”. Când găsiți codul corect, browserul va evidenția meniul de navigare, așa cum puteți vedea în imaginea următoare.
În acest caz, ID-ul CSS al meniului de navigare este site-navigation.
Odată ce aveți aceste informații, reveniți la tabloul de bord WordPress și adăugați-le în câmpul „Element fix (obligatoriu)”.
Va trebui, de asemenea, să adăugați un caracter hash (#) la început, astfel încât site-navigation să devină #site-navigation.
După aceea, faceți clic pe butonul „Salvare modificări” din partea de jos a paginii pentru a salva modificările.
Acum, dacă vizitați site-ul dvs. WordPress și derulați, meniul ar trebui să rămână în partea de sus.
Uneori, meniul lipicios poate suprapune conținut pe care nu doriți să îl ascundeți.
Dacă se întâmplă acest lucru, va trebui să definiți un spațiu între partea de sus a ecranului și meniul de navigare fix, tastând un număr în câmpul „Spațiu între partea de sus a paginii și elementul fix”.
Meniurile lipicioase pot cauza probleme pentru dispozitivele cu ecrane mai mici, cum ar fi dispozitivele mobile. Având acest lucru în vedere, este o idee bună să verificați versiunea mobilă a site-ului dvs. WordPress de pe desktop.
Dacă nu sunteți mulțumiți de aspectul meniului, îl puteți „dezlipi” pentru utilizatorii de mobil, găsind câmpul următor: „Nu lipi elementul când ecranul este mai mic decât.”
Aici, tastați „780px”.
Există și alte setări de explorat, dar acestea sunt tot ce aveți nevoie pentru a crea un meniu de navigare fix funcțional.
Când sunteți mulțumit de modul în care este configurat meniul de navigare, faceți clic pe „Salvează modificările” pentru a stoca setările.
Metoda 3: Adăugarea unui meniu de navigare plutitor lipicios folosind cod
Puteți crea, de asemenea, un meniu de navigare lipicios folosind CSS.
Cel mai bun mod de a adăuga cod personalizat la WordPress este prin utilizarea WPCode. Este cel mai bun plugin pentru fragmente de cod care vă permite să adăugați CSS, PHP, HTML personalizat și multe altele.
Deoarece nu editați direct fișierele temei, puteți evita multe erori comune WordPress. De asemenea, puteți actualiza tema sau puteți trece la o temă complet diferită fără a pierde codul personalizat.
Puteți, de asemenea, să activați și să dezactivați meniul fix printr-un singur clic.
Mai întâi, va trebui să instalați și să activați pluginul gratuit WPCode. Pentru mai multe informații, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.
După activarea pluginului, accesați pagina Code Snippets » + Add Snippet, unde veți vedea toate fragmentele WPCode gata făcute pe care le puteți adăuga pe site-ul dvs.
Acestea includ un fragment care vă permite să dezactivați complet comentariile, să încărcați tipuri de fișiere pe care WordPress nu le suportă în mod obișnuit, să dezactivați paginile de atașament și multe altele.
Aici, pur și simplu plasați cursorul mouse-ului peste „Adăugați codul dvs. personalizat (Snippet nou)” și faceți clic pe butonul „Utilizați snippet” atunci când apare.
Pe ecranul următor, trebuie să introduceți un titlu pentru fragmentul de cod. Acesta este doar pentru referința dvs., deci puteți folosi orice doriți.
Apoi, deschideți meniul derulant „Tip cod” și alegeți „Fragment CSS”.
Cu asta făcut, adăugați următorul fragment în editorul de cod WPCode:
#site-navigation {
background:#00000;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
Acest lucru va crea un meniu de navigare cu un fundal negru. Puteți folosi orice culoare doriți, schimbând codul hexazecimal de lângă background.
De exemplu, utilizarea background: #ffffff vă va oferi un fundal alb pentru meniu. Dacă nu sunteți sigur ce cod hex să utilizați, puteți consulta o resursă precum codul culorilor HTML.
Va trebui, de asemenea, să înlocuiți #site-navigation cu ID-ul CSS al meniului dvs. de navigare. Pentru a găsi acest cod, urmați pur și simplu același proces descris mai sus.
Când sunteți mulțumit de cod, faceți clic pe comutatorul 'Inactive' pentru ca acesta să devină 'Active', apoi faceți clic pe butonul 'Save Snippet'.
Acum, dacă vizitezi blogul sau site-ul tău WordPress, vei vedea meniul de navigare fix, plutitor, în acțiune.
În funcție de tema dvs., uneori meniul de navigare poate apărea sub antetul site-ului în loc de deasupra acestuia. În acest caz, meniul de navigare lipicios ar putea apărea prea aproape de titlul site-ului și antet sau chiar să îl suprapună.
Dacă se întâmplă acest lucru, puteți adăuga următoarele la fragmentul dvs. CSS personalizat:
.site-branding {
margin-top:60px !important;
}
Pur și simplu înlocuiți site-branding cu clasa CSS a zonei antetului dvs. Pentru a obține aceste informații, utilizați pur și simplu instrumentul „Inspect” al browserului dvs. și apoi urmați același proces descris în Metoda 2.
Bonus: Faceți postările dvs. WordPress lipicioase
Dacă aveți un blog WordPress, atunci este o idee bună să faceți lipicioase unele dintre postările dvs. de blog. Acestea pot fi articolele de bază care includ cel mai important conținut al site-ului dvs. sau anunțuri și postări de concurs cu care doriți ca utilizatorii să interacționeze.
Când faci o postare la alegere să fie fixată, aceasta va rămâne în partea de sus a paginii blogului tău chiar și pe măsură ce publici conținut nou, care va fi afișat sub postarea fixată.
Poți face cu ușurință postarea de pe blogul tău să fie fixată deschizând-o în editorul de conținut. Odată ce ai făcut acest lucru, pur și simplu extinde fila „Rezumat” din panoul de blocuri și bifează opțiunea „Fixează în partea de sus a blogului”.
După aceea, faceți clic pe butonul „Actualizează” sau „Publică” din partea de sus pentru a stoca setările. Acum ați creat cu succes o postare de blog lipicioasă pe site-ul dvs. WordPress.
Pentru mai multe detalii, consultați tutorialul nostru despre cum să faceți postări lipicioase în WordPress.
Sperăm că acest articol v-a ajutat să adăugați un meniu de navigare plutitor lipicios pe site-ul dvs. WordPress. De asemenea, ați putea dori să consultați ghidul nostru pentru începători despre cum să adăugați un meniu cu panou glisant în temele WordPress și tutorialul nostru despre adăugarea pictogramelor de rețele sociale la meniul WordPress.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Dennis Muthomi
există o modalitate de a face ca meniul lipicios să se aplice doar anumitor postări/pagini? De exemplu, să nu fie lipicios pe pagina principală a blogului meu, dar să fie lipicios peste tot altundeva pe site?
Suport WPBeginner
If your theme does not offer that option then we would recommend the plugin for a simple method to have that conditional display
Admin
Mrteesurez
Bine realizat, mă bucur să văd pluginul pe care l-ați distribuit aici „sticky menu or (anything) on scroll”. Asta înseamnă că poate fi folosit pentru a face lipicios orice element, în afară de meniu.
Inițial am folosit cod brut pentru asta, mulțumesc pentru că ați distribuit această metodă ușoară.
Dayo Olobayo
Sunt de acord, domnule teesurez, meniurile lipicioase sunt o caracteristică valoroasă a site-ului web. Pe lângă crearea unui meniu lipicios, ați putea lua în considerare și încorporarea unui efect de „derulare lină” pentru a îmbunătăți și mai mult experiența utilizatorului atunci când navigați între secțiuni pe pagina dvs. web.
Jiří Vaněk
Mulțumesc pentru tutorial. Căutam mereu un șablon care să facă practic acest lucru. Conform acestui ghid, nu mai trebuie.
Suport WPBeginner
Glad we could help open up your theme options
Admin
Paul
Unde să las cele 5 stele…..mulțumesc mult!!
Suport WPBeginner
Glad our guide was helpful
Admin
Jess
Mulțumesc foarte, foarte mult pentru acest post util!!! Atât de clar și ușor de urmat.
Suport WPBeginner
Glad our guide was helpful
Admin
Ivaylo
Tutorial practic excelent. Am urmat Metoda 2 și a funcționat instantaneu, însă când deschid site-ul pe mobil, butoanele din meniu au dispărut. Știe cineva de ce sau cum să rezolv asta?
Noroc!
Suport WPBeginner
Dacă nu ați făcut-o deja, vă recomandăm să verificați cu suportul temei dvs. specifice pentru a vedea dacă ar putea fi un conflict cu CSS-ul temei dvs.
Admin
Serena Richardson
Salut,
Cum creez un meniu plutitor fix în partea dreaptă a unei pagini, în loc să fie în partea de sus, astfel încât să coboare pe măsură ce derulezi în jos.
Mulțumesc!
Serena
Suport WPBeginner
Aceasta ar fi adăugarea unui widget fix pentru care avem o recomandare în articolul nostru de mai jos:
https://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/
Admin
Tom Browne
A funcționat instantaneu. Mulțumesc
Suport WPBeginner
You’re welcome
Admin
simran
nivelul de perfecțiune și modul de prezentare a informațiilor…mulțumesc.
Suport WPBeginner
Glad our guide was helpful
Admin
Theo
Unde pot afla ID-ul meniului meu de navigare?
Nu-l găsesc.
Suport WPBeginner
Pentru a face acest lucru, ați folosi instrumentul de inspectare a elementelor. Avem un ghid despre cum să utilizați corect instrumentul de inspectare a elementelor mai jos:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site
Admin
Natasha T
O salvare, nu vă pot mulțumi suficient.
Suport WPBeginner
You’re welcome
Admin
Tam
Hello!
Thanks for your help! It worked like magic :D.
I learn a little CSS and tried to make my nav sticky from a free theme (GeneratePress) but didn’t work. (I tried “position: sticky;” in CSS), but thank your code that helped me to fix it
Suport WPBeginner
Glad our article was helpful
Admin
alexandre
Exact ce căutam! Un plugin grozav. Mulțumesc
Suport WPBeginner
You’re welcome, glad you found our recommendation helpful
Admin
Guy Bailey
Mulțumesc mult pentru ajutor – doar o mică întrebare; fundalul meniului meu este transparent când derulez în jos. Există soluții rapide sau trucuri pentru a adăuga o culoare solidă în spatele lui (alb, în cazul nostru)?
Suport WPBeginner
Ar depinde de modul în care este configurat meniul dvs., dar puteți folosi inspect element pentru a găsi obiectul căruia îi puteți seta proprietatea background-color la: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Manish
Mulțumesc. Când Wpbeginner scrie un articol pe un subiect, este sigur că va fi util.
Suport WPBeginner
Glad our content has been helpful
Admin
Everest
Thanks so much.
You made my day.
Suport WPBeginner
You’re welcome, glad we could help
Admin
Tony Chung
Codul CSS a funcționat și a trebuit să adaug o margine la antet pentru ca întregul titlu să fie afișat. Bara mea de meniu se întinde pe toată lungimea de sus, dar butoanele meniului încep din stânga și se opresc la mijloc. Cum mut butoanele pentru a fi centrate pe pagină?
Suport WPBeginner
Acest lucru ar varia de la o temă la alta, dar în mod normal ar trebui să modificați CSS-ul. Puteți testa modificările folosind inspect element: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Chinedu
Uau, asta funcționează perfect.
Mulțumesc
Suport WPBeginner
Glad our solution worked for you
Admin
Gillian Davies
Am o listă de cărți într-un tabel. Am importat imaginile coperților lor în Media, acum vreau ca imaginile să apară pe măsură ce derulezi lista. Similar cu o trecere de mouse peste rând, dar cum fac asta într-un tabel creat în table maker?
Raul
Cum pot face ca acest meniu de navigare fix să fie derulabil?
Deci l-am folosit pentru o bară laterală, dar când bara laterală este prea lungă, nu încape pe ecran și nu o pot derula în jos.
Rushikesh Thawale
Salut,
Cum ai scris codul CA UN COD în această postare? Adică cum să afișezi coduri HTML ca acesta într-o postare?
Mulțumesc.
Tara
Probabil ați aflat până acum, dar pentru cei care caută, cum să afișați codul pe postarea dvs. folosiți caracterul html pentru paranteza de deschidere a tag-urilor html < fără spațiu.
Suport WPBeginner
Aceasta este o metodă, dar pentru aceasta, folosim a doua metodă din articolul nostru aici: https://www.wpbeginner.com/wp-tutorials/how-to-easily-display-code-on-your-wordpress-site/
Admin
Cesar
Great post! your CSS code works for me
dani
Alain
Foarte util!
mulțumesc.
amin
De asemenea, poți folosi „z-index: 999xxxx” pentru logo sau orice element pe care vrei să-l pui în bara de navigare
Sujith Reghu
Vreau să știu cum să adaug un meniu fix într-o postare sau pagină WordPress. De exemplu, pentru o postare lungă, anteturile și sub-anteturile postării în sine să fie prezentate în meniul fix, astfel încât un cititor să poată naviga cu ușurință dintr-o secțiune în alta a postării. Mulțumesc…
Zac
mulțumesc pentru tutorial!
ceea ce am nevoie este puțin diferit, am nevoie de un „mini-meniu” care să apară când plasați cursorul pe meniu... deci să nu apară decât când plasați cursorul... ca un meniu derulant
dacă ai putea face acest tutorial, aș aprecia.
amin
puteți folosi un plugin mega-menu sau uber menu, dar îl puteți face și fără plugin, cu css sau jquery, cum ar fi meniul bootstrap3