Cum să ascunzi un meniu mobil în WordPress (Ghid pentru începători)

Navigarea mobilă poate face sau rupe experiența utilizatorului site-ului dvs. WordPress. Și la WPBeginner, am descoperit că setările implicite ale meniului mobil nu se aliniază întotdeauna cu ceea ce utilizatorii noștri doresc să realizeze pe site-urile lor.

Deși temele WordPress fac o treabă bună la convertirea meniurilor desktop în versiuni prietenoase cu mobilul, această conversie automată nu este întotdeauna cea mai bună soluție.

Utilizatorii noștri au adesea nevoie să afișeze diferite opțiuni de navigare pentru vizitatorii lor mobili, fie pentru simplitate, promoții speciale sau rate de conversie îmbunătățite.

În acest articol, vă vom arăta cum să ascundeți cu ușurință meniul mobil implicit în WordPress, astfel încât să puteți afișa un meniu personalizat în schimb.

Vom acoperi două metode diferite în acest tutorial și puteți folosi linkurile rapide de mai jos pentru a sări la metoda pe care doriți să o utilizați:

• Metoda 1: Ascundeți un meniu mobil în WordPress folosind un plugin
• Metoda 2: Ascundeți meniul mobil folosind cod CSS

Metoda 1: Ascundeți un meniu mobil în WordPress folosind un plugin

Cel mai simplu mod de a ascunde meniul mobil furnizat de tema dvs. WordPress este să utilizați pluginul WP Mobile Menu.

Acest plugin vă permite să creați un meniu unic și apoi să îl afișați utilizatorilor de mobil. De asemenea, puteți ascunde meniul pentru mobil pe care multe teme îl oferă în mod implicit.

Creați meniul dvs. mobil

Mai întâi, trebuie să creezi meniul de navigare pe care vrei să-l afișezi pe dispozitivele mobile. Pentru a începe, accesează pagina Aspect » Meniuri din tabloul de bord WordPress.

Pe ecranul următor, trebuie să introduceți un nume pentru meniu. Este o idee bună să folosiți ceva care vă va ajuta să identificați meniul mai târziu, cum ar fi „Meniu mobil”.

După aceea, puteți selecta toate postările și paginile pe care doriți să le adăugați la meniul mobil.

Pentru instrucțiuni mai detaliate, consultați ghidul nostru despre cum să creați un meniu de navigare în WordPress.

Când sunteți mulțumit de aspectul meniului, nu uitați să faceți clic pe butonul „Salvează meniul” pentru a salva modificările.

Configurează setările pluginului

Cu aceasta făcută, este timpul să instalați și să activați plugin-ul WP Mobile Menu. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, accesați Opțiuni meniu mobil pentru a configura setările pluginului.

Aici, trebuie să derulați în josul paginii și să alegeți dacă doriți să afișați meniul mobil în partea stângă sau dreaptă a ecranului, folosind comutatoarele „Enable Left/Right Menu”.

Apoi, deschideți meniul derulant „Alegeți un meniu” și selectați meniul mobil pe care l-ați creat anterior.

După aceea, pur și simplu faceți clic pe „Salvare modificări”.

Există multe moduri de a stiliza meniul de navigare WordPress. De exemplu, poți selecta „Opțiuni font” și apoi schimba dimensiunea fontului, grosimea, spațierea și multe altele.

De asemenea, puteți selecta „Header Style” și puteți schimba modul în care arată și funcționează antetul mobil.

De exemplu, puteți adăuga o umbră, puteți modifica înălțimea antetului, crea un meniu de navigare lipicios și multe altele.

Majoritatea acestor setări sunt simple, așa că le puteți parcurge și vedea ce fel de efecte puteți crea. De exemplu, puteți adăuga o pictogramă imagine sau adăuga CSS la meniurile dvs. WordPress.

Când sunteți mulțumit de modul în care este configurat meniul mobil, faceți clic pe „Salvează modificările”.

Adăugați meniul dvs. mobil în WordPress

Acum că ați configurat pluginul, următorul pas este să indicați WordPress unde să afișeze meniul mobil, accesând Aspect » Meniuri.

Dacă nu este deja selectat, deschideți meniul derulant „Selectați un meniu de editat” și alegeți meniul mobil pe care l-ați creat anterior.

Apoi, sub „Setări meniu”, trebuie să selectați fie „Meniu mobil stânga”, fie „Meniu mobil dreapta”, în funcție de locul unde doriți să afișați meniul.

După aceea, pur și simplu faceți clic pe „Salvează meniul”.

Acum, fie vizitați site-ul dvs. pe un dispozitiv mobil, fie vizualizați versiunea mobilă a site-ului dvs. WordPress de pe desktop. Ar trebui să vedeți meniul mobil personalizat.

Depanare: Cum să ascundeți meniul mobil implicit

Implicit, pluginul ascunde automat elementele de meniu utilizate de cele mai populare teme WordPress. Acest lucru înseamnă că meniul mobil implicit al temei tale ar trebui să fie ascuns fără să fie nevoie să faci nimic.

Cu toate acestea, dacă meniul mobil implicit apare în continuare, va trebui să accesați Opțiuni meniu mobil » Opțiuni generale » Opțiuni de vizibilitate în tabloul de bord WordPress.

Aici, faceți clic pe butonul „Găsește element”.

Aceasta deschide o versiune mobilă a site-ului dvs. web.

În acest popup, faceți clic pentru a selecta conținutul pe care doriți să îl ascundeți pe dispozitivele mobile, cum ar fi meniul furnizat de tema dvs. WordPress.

Aceasta adaugă clasa CSS a conținutului în câmpul „Ascunde elemente”.

Cu aceasta făcută, faceți clic pe „Salvează modificările”. Acum, meniul temei nu ar trebui să mai apară pe dispozitivele mobile.

Metoda 2: Ascundeți meniul mobil folosind cod CSS

Această metodă este puțin avansată și necesită să adăugați cod personalizat pe site-ul dvs..

Pentru această metodă, puteți alege între două abordări diferite. Puteți ascunde întregul meniu mobil implicit folosind CSS sau puteți ascunde elemente individuale ale meniului pe dispozitivele mobile.

1. Ascunderea unui meniu complet pe dispozitive mobile folosind CSS

O opțiune este să eliminați complet meniul mobil implicit din tema dvs. WordPress. Aceasta este o alegere bună dacă doriți să utilizați o metodă diferită de navigare pe mobil, cum ar fi linkuri de navigare tip firimituri sau imagini interactive.

Mai întâi, trebuie să găsești elementul pe care trebuie să-l modifici. Pentru a face acest lucru, pur și simplu accesează site-ul tău WordPress și plasează cursorul mouse-ului peste meniul de navigare.

După aceea, dă clic dreapta și selectează instrumentul Inspectează al browserului tău.

Ecranul browserului dvs. se va împărți acum în două și veți vedea codul paginii, inclusiv codul pentru meniul de navigare.

Cu toate acestea, nu dorim să modificăm acest meniu de navigare, deoarece îl putem vedea pe ecranul desktop.

Din fericire, există o modalitate ușoară de a accesa meniul mobil în schimb.

Pur și simplu trage colțul browserului pentru a-l micșora până când WordPress înlocuiește meniul de navigare desktop cu meniul mobil.

Acum, trebuie să aflați identificatorul și clasa CSS utilizate de meniul de navigare mobil. Pur și simplu mutați mouse-ul peste codul sursă până când browserul dvs. evidențiază zona meniului. Această secțiune conține clasa și identificatorul pe care trebuie să le utilizați.

Odată ce aveți aceste informații, puteți ascunde meniul pe dispozitive mobile folosind cod.

Adesea, ghidurile WordPress vă vor cere să adăugați cod personalizat în fișierul dvs.  functions.php . Cu toate acestea, acest lucru nu este foarte prietenos cu utilizatorul, iar chiar și o mică greșeală în cod poate provoca tot felul de  erori comune WordPress. Codul personalizat poate chiar să vă deterioreze complet site-ul web.

În schimb, este mai sigur să adăugați cod personalizat folosind WPCode.

Acest plugin gratuit facilitează adăugarea de CSS personalizat, PHP, HTML și multe altele în WordPress, fără a vă pune site-ul în pericol. Puteți pur și simplu să lipiți codul plugin-ului în editorul WPCode, apoi să activați și să dezactivați codul printr-un clic pe un buton.

Pentru a începe, va trebui să instalați și să activați WPCode. Pentru mai multe informații, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După aceea, accesați Fragmente de cod » Adăugați fragment în tabloul de bord WordPress.

Aici, veți vedea toate fragmentele pre-făcute pe care le puteți adăuga pe site-ul dvs. Aceasta include un fragment care vă permite să dezactivați complet comentariile, să încărcați tipuri de fișiere pe care WordPress nu le suportă de obicei, să dezactivați paginile de atașament, și multe altele.

Pentru a adăuga CSS personalizat pe site-ul dvs., pur și simplu treceți cu mouse-ul peste „Adăugați codul dvs. personalizat” și apoi faceți clic pe butonul „+ Adăugați un fragment personalizat”.

Apoi, selectați „Fragment CSS” ca tip de cod din lista de opțiuni care apar pe ecran.

Acest lucru vă va duce la pagina Creare fragment personalizat.

Pentru a începe, introduceți un titlu pentru fragmentul de cod. Acesta poate fi orice lucru care vă ajută să identificați fragmentul în tabloul de bord WordPress.

După aceea, puteți lipi sau tasta următorul cod în editorul de cod:

.navbar-toggle-wrapper {
display:none;
}

Nu uitați să înlocuiți .navbar-toggle-wrapper cu identificatorul pe care l-ați găsit folosind instrumentul Inspect al browserului dvs.

Când ești gata să publici fragmentul de cod, derulează în partea de sus a ecranului și dă clic pe comutatorul „Inactiv” pentru ca acesta să devină „Activ”.

În final, faceți clic pe ‘Save Snippet’ pentru a face fragmentul activ.

Acum, meniul mobil al temei dvs. va fi ascuns pe smartphone-uri și tablete.

2. Ascunderea elementelor specifice ale meniului în meniul mobil folosind CSS

Această metodă vă permite să creați un meniu de navigare și apoi să afișați sau să ascundeți selectiv elementele pe care nu doriți să apară pe dispozitive mobile sau desktop.

În acest fel, puteți folosi același meniu de navigare pentru vizitatorii mobili și desktop. Mai întâi, accesați Aspect » Meniuri.

După ce ați făcut acest lucru, faceți clic pe butonul „Opțiuni ecran” din colțul din dreapta sus al ecranului.

De aici, trebuie să bifați căsuța de lângă opțiunea „CSS Classes”.

După aceea, derulați la un element de meniu pe care doriți să îl ascundeți pe mobil și faceți clic pentru a-l extinde.

În setările elementului de meniu, veți vedea opțiunea de a adăuga o clasă CSS. Aici, pur și simplu mergeți mai departe și adăugați o clasă CSS .hide-mobile.

Repetați procesul pentru toate elementele meniului pe care doriți să le ascundeți pe mobil.

Similar, puteți face clic pe orice elemente de meniu pe care doriți să le ascundeți pe computere desktop. Cu toate acestea, de data aceasta, adăugați clasa CSS .hide-desktop în schimb.

Când ați terminat, nu uitați să faceți clic pe butonul „Salvează meniul” pentru a salva modificările.

Cu asta făcut, ești gata să ascunzi aceste elemente de meniu folosind CSS personalizat. Pur și simplu creează un nou fragment de cod personalizat urmând același proces descris mai sus.

Acum, puteți adăuga următorul CSS în editorul de cod WPCode:

@media (min-width: 980px){

    .hide-desktop{
    display: none !important;
    }

}

    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }

}

După aceea, pur și simplu publicați fragmentul de cod.

Acum, dacă vizitați blogul dvs. WordPress, veți vedea că elementele de meniu pe care doreați să le ascundeți pe desktop nu mai sunt vizibile. Pentru a testa cum arată meniul pe mobil, pur și simplu micșorați ecranul browserului până când WordPress comută la meniul mobil.

Sperăm că acest articol v-a ajutat să învățați cum să ascundeți cu ușurință un meniu mobil în WordPress. De asemenea, ați putea dori să consultați selecțiile noastre experte pentru cele mai bune constructori de pagini drag and drop pentru WordPress și ghidul nostru despre cum să adăugați logică condițională la meniuri.

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.