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 la tema dvs. WordPress, pas cu pas. 🎨
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.
Meniurile bine concepute îi ajută pe vizitatorii dvs. să navigheze pe site-ul dvs. WordPress. Mulți dintre vizitatorii dvs. vor folosi dispozitive mobile, așa că este important să previzualizați versiunea mobilă a site-ului dvs. WordPress pentru a vedea cum arată meniul de navigare pe ecrane mai mici.
Din fericire, multe teme WordPress vin cu stiluri încorporate care afișează automat meniuri prietenoase cu dispozitivele mobile atunci când sunt vizualizate pe un ecran mic.
Cu toate acestea, s-ar putea să doriți să vă personalizați și mai mult navigarea mobilă și să adăugați un meniu responsive pe tot ecranul sau un meniu glisant animat.
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:
- Cum să adăugați un meniu glisant în temele WordPress
- Întrebări frecvente despre meniurile glisante
- Lectură suplimentară: Mai multe resurse despre personalizarea meniurilor site-ului
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. Dacă aveți nevoie de unul, atunci puteți consulta ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.
💡 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.
La activare, să navigăm la Meniu Responsive » Meniuri din tabloul de bord WordPress. Odată ajunși 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. să vadă doar noul meniu glisant. Faceți acest lucru introducând cod CSS în câmpul „Ascunde meniul temei”.
Codul pe care trebuie să îl introduceți aici variază de la o temă la alta și puteți afla mai multe detalii făcând clic pe linkul „Aflați mai multe”.
📝 Notă: Utilizatorii cu versiunea Pro au câteva setări suplimentare. De exemplu, utilizatorii Pro pot selecta dispozitivele și paginile unde ar trebui 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. pe partea dreaptă a ecranului, iar în partea de jos există butoane pentru a comuta între vizualizările pentru telefon, tabletă și desktop. 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. pentru a vedea meniul în acțiune. Iată cum arată pe site-ul nostru demo. Rețineți că, dacă pagina curentă se află în meniu, aceasta este evidențiată cu o bandă colorată.
✋ Sfat expert: Stilul meniului de navigare WordPress poate îmbunătăți aspectul și utilizabilitatea site-ului dvs. Un meniu bine conceput ajută vizitatorii 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 nevoie de clarificări despre cum funcționează meniurile glisante pe 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 prietenos cu dispozitivele mobile. Acestea fiind spuse, de obicei este doar un meniu derulant de bază. Dacă doriți un meniu elegant, cu 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
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 celelalte ghiduri utile ale noastre 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 o bară de căutare în meniul WordPress (Pas cu Pas)
- Cum să creezi un meniu derulant în WordPress (Ghid pentru începători)
- Cum să afișați meniuri diferite utilizatorilor conectați în WordPress
- Cum să adăugați meniuri de navigare personalizate în temele 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.
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, te rog vizitează-l și spune-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?