Oferirea unui meniu greoi, stil desktop, pe un telefon este o modalitate sigură de a frustra vizitatorii. Și un meniu mobil confuz îi poate face să plece la fel de repede.
Un meniu glisant rezolvă această problemă oferind site-ului dvs. un aspect curat, asemănător unei aplicații, care funcționează frumos pe ecrane mai mici. Face găsirea conținutului ușoară și menține vizitatorii implicați.
După ce am testat mai multe pluginuri pentru această sarcină exactă, am găsit o opțiune gratuită fantastică, care este atât puternică, cât și ușor de configurat. Puteți crea un meniu glisant cu aspect profesional fără a atinge o singură linie de cod.
În acest ghid, vă vom arăta exact cum să adăugați un meniu glisant în tema dvs. WordPress, pas cu pas.
🎨 Ideea principală: Utilizați pluginul gratuit Responsive Menu pentru a crea un panou glisant, optimizat pentru mobil, fără a atinge niciun cod.
De ce să adăugați un meniu cu panou glisant în temele WordPress?
Un meniu glisant face navigarea pe dispozitivele mobile mai fluidă și mai intuitivă. Oferă site-ului dvs. WordPress un aspect curat, asemănător unei aplicații, ajutând vizitatorii să găsească rapid ceea ce caută, fără să se simtă pierduți sau frustrați.
De asemenea, oferă ținte tactile mai mari pentru degete și menține ecranul curat, ceea ce poate duce la o implicare mai mare și la mai multe vânzări.
Din fericire, multe teme WordPress includ deja stiluri încorporate care afișează automat meniuri adaptate pentru mobil pe ecrane mai mici.
Cu toate acestea, s-ar putea să doriți să vă personalizați navigarea mobilă și mai mult, adăugând un meniu responsive pe tot ecranul sau un meniu animat de tip panou glisant.
Având în vedere acest lucru, vă vom arăta cum să adăugați un meniu glisant în temele WordPress. Iată o prezentare generală rapidă a tuturor subiectelor pe care le vom împărtăși în acest ghid:
Să începem.
Cum să adăugați un meniu glisant în temele WordPress
Primul lucru pe care trebuie să îl faceți este să instalați și să activați pluginul Responsive Menu. L-am testat pentru acest tutorial și este incredibil de ușor de utilizat.
În zona de administrare WordPress, accesați Plugin-uri » Adaugă Plugin.
💡 Notă: Puteți urma acest tutorial folosind pluginul gratuit. Dacă doriți teme suplimentare și funcții avansate precum logica condițională, puteți face upgrade la versiunea premium a pluginului Responsive Menu.
Apoi, trebuie doar să găsiți pluginul folosind caseta de căutare și să continuați cu instalarea. Dacă aveți nevoie de ajutor, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.
După activare, accesați Responsive Menu » Meniuri în tabloul de bord WordPress. De acolo, ar trebui să faceți clic pe butonul „Creare meniu nou” din partea de sus a ecranului.
Veți vedea apoi 4 teme pe care le puteți folosi pentru noul dvs. meniu receptiv. Teme suplimentare sunt disponibile pentru achiziție.
Pentru acest tutorial, vom folosi tema selectată automat. Apoi puteți face clic pe butonul „Următorul”.
Acest lucru vă va duce la pagina „Setări meniu”.
Aici, puteți introduce un nume pentru meniul dvs. responsive și apoi selectați ce meniu WordPress ați dori să fie afișat în panou. De exemplu, am ales meniul „Navigare”.
Dacă aveți nevoie să creați un meniu nou, atunci puteți învăța cum urmând ghidul nostru despre cum să adăugați un meniu de navigare în WordPress.
Puteți, de asemenea, să ascundeți meniul normal care vine cu tema dvs. WordPress, astfel încât utilizatorii dvs. mobili să vadă doar noul meniu de tip panou glisant. Faceți acest lucru introducând cod CSS în câmpul „Hide Theme Menu”.
Nu vă faceți griji, acest lucru va ascunde meniul doar pe dispozitivele mobile – meniul dvs. desktop va rămâne complet în siguranță.
Codul pe care trebuie să-l introduceți aici variază de la o temă la alta (selectorii comuni includ .main-navigation sau #site-navigation), iar mai multe detalii puteți afla făcând clic pe linkul „Aflați mai multe”.
✋ Sfat de expert: Puteți găsi clasa specifică a meniului dvs. făcând clic dreapta pe meniul dvs. într-un browser și selectând instrumentul „Inspect”. Căutați etichete HTML precum <nav> sau <ul> care conțin clase precum menu-toggle sau site-navigation.
Dacă aveți licența Pro, veți avea câteva setări suplimentare. De exemplu, puteți selecta dispozitivele și paginile unde ar trebui să fie afișat meniul.
Odată ce sunteți mulțumit de setări, ar trebui să faceți clic pe butonul „Creare meniu” din partea de jos a paginii. Acest lucru vă va duce la o pagină unde puteți finaliza personalizarea meniului dvs.
Veți vedea o previzualizare a site-ului dvs. web în partea dreaptă a ecranului. Există butoane în partea de jos pentru a comuta între vizualizările de telefon, tabletă și desktop pentru a vă asigura că meniul dvs. rămâne adaptat pentru mobil. Veți găsi, de asemenea, opțiuni de personalizare în stânga.
S-ar putea să observați că un text este afișat deasupra meniului. Acesta este titlul meniului și o linie de text pe care pluginul o numește „conținut suplimentar”.
Puteți edita sau ascunde textul făcând clic pe „Meniu mobil” și apoi pe „Container” în meniul din stânga paginii.
În plus, puteți introduce orice doriți în câmpul „Text titlu”, cum ar fi „Meniu principal” sau „Navigare”. Dacă nu doriți să afișați un titlu, atunci pur și simplu glisați comutatorul „Titlu” în poziția oprit.
După aceea, veți dori să derulați în jos la setarea „Conținut suplimentar”.
De aici, puteți dezactiva această setare sau puteți introduce conținut alternativ. În captura de ecran de mai jos, veți observa că comutatorul a fost dezactivat, deci cuvintele „Adăugați mai mult conținut aici…” sunt acum ascunse.
Odată ce sunteți mulțumit de setările meniului, asigurați-vă că faceți clic pe butonul „Actualizare” din partea de jos a paginii pentru a salva setările.
Pluginul Responsive Menu oferă multe alte opțiuni pentru modificarea comportamentului și aspectului meniului dvs. glisant. Puteți explora aceste opțiuni pe pagina de setări a pluginului și le puteți ajusta după cum este necesar.
Acum, puteți vizita site-ul dvs. web pentru a vedea meniul în acțiune. Iată cum arată pe site-ul nostru demo WordPress. Veți observa că pluginul chiar evidențiază pagina curentă pe care se află vizitatorul dvs. cu o bandă de culoare elegantă:
✋ Sfat expert: Stilul meniului de navigare WordPress poate îmbunătăți aspectul și utilizabilitatea site-ului dvs. Un meniu bine conceput îi ajută pe vizitatori să găsească cu ușurință ceea ce au nevoie și încurajează clicurile.
Pentru mai multe informații despre acest subiect, consultați ghidul nostru despre diferite moduri de a stiliza meniul de navigare WordPress.
Întrebări frecvente despre meniurile glisante
Încă aveți întrebări despre cum funcționează meniurile cu panou glisant în WordPress? Iată răspunsuri la câteva întrebări frecvente:
Toate temele WordPress vin cu un meniu mobil?
Majoritatea temelor WordPress moderne sunt responsive, deci includ un meniu adaptat pentru mobil. Acestea fiind spuse, este de obicei doar un meniu dropdown de bază. Dacă doriți un meniu elegant, de tip panou glisant, veți avea nevoie de un plugin.
Adăugarea unui plugin pentru meniul glisant va încetini site-ul meu?
Nu dacă alegeți un plugin bine codat precum Responsive Menu. Aceste pluginuri sunt concepute pentru a fi ușoare și nu ar trebui să afecteze în mod vizibil viteza site-ului dvs..
Pot afișa un meniu diferit pe mobil față de desktop?
Da! Puteți crea un meniu mobil separat folosind un plugin precum WP Mobile Menu sau CSS personalizat, astfel încât vizitatorii dvs. mobili să vadă o navigare diferită față de utilizatorii desktop. Acest lucru vă permite să simplificați linkurile, să evidențiați promoțiile sau să îmbunătățiți conversiile specific pentru dispozitivele mobile.
Lectură suplimentară: Mai multe resurse despre personalizarea meniurilor site-ului
Acum că ați implementat cu succes un panou glisant pentru utilizatorii dvs. mobili, poate doriți să explorați alte modalități de a îmbunătăți navigarea pe site-ul dvs. Sperăm că acest tutorial v-a ajutat să învățați cum să adăugați un meniu cu panou glisant în temele WordPress.
Pentru a vă îmbunătăți și mai mult experiența utilizatorului, consultați și alte ghiduri utile despre:
- Cum să creezi un meniu de navigare plutitor lipicios în WordPress
- Cum să adăugați un Mega Menu pe site-ul dvs. WordPress (Pas cu Pas)
- Cum să adăugați postări specifice în meniul de navigare WordPress
- Cum să adăugați meniuri de navigare personalizate în temele WordPress
- Cum să afișați meniuri diferite utilizatorilor conectați în WordPress
Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.
Jiří Vaněk
Am creat un meniu glisant folosind Elementor și ferestre pop-up cu un efect de meniu glisant. Funcționează excelent, dar, din păcate, nu pot avea Elementor PRO pe toate site-urile pe care le gestionez din cauza prețului său. Aceasta este o alternativă fantastică pentru crearea unui astfel de meniu, iar dacă este posibil să folosiți pluginul în versiunea gratuită, este cu adevărat uimitor. Pentru site-urile fără Elementor, acesta este un salvator pentru mine.
Moinuddin Waheed
Acesta este un salvator pentru mine, deoarece am avut dificultăți în a obține un panou glisant pentru meniul receptiv pentru mobil.
Anterior, am folosit fragmente de cod și le-am inserat în codul wp pentru acest lucru.
Dar acest plugin oferă mai multă personalizare, iar versiunea pro pare mai puternică în ceea ce privește controlul personalizării.
Cu siguranță voi încerca acest plugin.
Mohammad Kashif
Incredibil!
Pot adăuga un buton de închidere în fereastra pop-out?
Luke Marshall
Încă aștept un răspuns la un tichet de suport de la voi cu privire la această necesitate exactă! cel pe care îl oferiți este doar pe partea dreaptă, fără nicio modalitate aparentă de a-l schimba în stânga, mă bucur că am găsit asta.
Cynthia
Schimbați funcția „left” cu „right” în cele două locuri în care este utilizată în codul funcției.
Ru
Aveți o demonstrație pentru asta?
Vreau să o verific înainte
Daniel Jarosz
curat & simplu, mulțumesc pentru acest tutorial!
Ann
Salut, acest cod funcționează perfect când rulez site-ul meu local, dar nu și când este live. Există vreo explicație posibilă pentru asta? Am actualizat linkurile imaginilor, nu sunt sigur ce altceva trebuie actualizat, deoarece folderele nu s-au schimbat.
Madiha
nu funcționează pe site-ul meu, vă rog vizitați și spuneți-mi soluția
http://www.dailynewscompany.com
Mattia
Salut, articol interesant… Aveți un DEMO al acestuia sau un URL către un site online în care l-ați implementat? Ar fi interesant să-l văd într-un caz real, înainte de a încerca să-l folosesc! Mulțumesc mult
Jim
Este posibil să arătați cum ar putea fi modificat scriptul, astfel încât evenimentul de închidere să poată fi declanșat prin clic oriunde altundeva, dar nu pe navigație?
Cu alte cuvinte, astfel încât utilizatorul să nu fie nevoit doar să facă clic pe pictograma meniului de comutare pentru a închide bara laterală de navigare?
Mulțumesc.
Karl
Caut peste tot un plugin sau posibilitatea de a implementa tipul de meniu pe care îl aveți în prezent în partea de sus a paginii. Aveți un buton „Play” în partea dreaptă a antetului. La apăsarea acestuia, o zonă de conținut glisează din secțiunea antetului. Chiar vreau să folosesc acest tip de meniu pe site-ul meu. Dacă mă puteți îndruma chiar și către un link unde este explicat acest tip de meniu, voi continua de acolo și vă mulțumesc. Acesta este un tutorial grozav!
Suport WPBeginner
Karl, poți da click dreapta pe butonul de redare și selecta inspect element și studia codul sursă. Vom încerca, de asemenea, să-l acoperim curând pe WPBeginner ca un tutorial.
Admin
Shubham Dubey
Îmi pare rău că răspund aici, (Comentariile nu sunt disponibile)
Salut! Folosesc framework-ul Genesis, cu tema sa copil, nu reușesc să găsesc fișierul header.php acolo,
i just copied the header.php file from genesis to my child themes folder, but after opening header.php file didn’t found any lines
CUM SE FACE ASTA CU TEME CHILD, VĂ ROG EXPLICĂȚI.
Jim
Ghid excelent. Sunt aproape gata cu o implementare de test, totuși mă întreb… pot folosi o cale relativă în fișierul sidepanel.js în loc de calea absolută?
Am încercat să fac asta, dar nu reușesc să-mi dau seama. Calea relativă ar trebui să fie relativă la fișierul html care apelează javascript-ul?
Mulțumesc
krish
Este un conținut bun și util. Captura de ecran și codul sunt ușor de înțeles și de aplicat pe site-ul meu. Bravo, omule!!!
Håkon Stillingen
Articol interesant. Cum aș putea înlocui antetul implicit în Genesis Framework?