Cum să adăugați un meniu dropdown în WordPress: un ghid cuprinzător

În contextul site-urilor web WordPress, meniurile drop-down joacă un rol esențial în îmbunătățirea navigării, organizarea ordonată a conținutului și asigurarea că vizitatorii pot naviga cu ușurință de la o pagină la alta.

Acest ghid cuprinzător nu numai că acoperă cum să adăugați un meniu drop-down în WordPress, dar oferă și cele mai bune practici și sfaturi pentru structurarea intuitivă a navigației.

FAQ

Introducere în meniurile drop-down în WordPress

Meniurile de navigare sunt esențiale pentru a îmbunătăți experiența utilizatorului pe un site web, pentru a ghida vizitatorii prin conținutul dvs. și pentru a vă asigura că găsesc ceea ce caută. Să explorăm câteva dintre cele mai populare tipuri de meniuri de navigare utilizate pe diferite site-uri web:

Meniuri de antet

Meniurile de antet sunt probabil cel mai comun tip de meniu de navigare. Găsite de obicei în partea de sus a unui site web, aceste meniuri sunt întotdeauna vizibile, oferind acces ușor la secțiunile principale ale site-ului. Acestea prezintă adesea funcționalitate drop-down, permițând un design mai curat, oferind în același timp opțiuni de navigare profunde.

De exemplu , adăugarea unui meniu drop-down în antetul unui site web, cum ar fi 10Web, prezintă produse sau servicii și trecerea cursorului peste linkurile meniului de nivel superior afișează meniuri sau imagini suplimentare.

Meniuri din bara laterală

Meniurile din bara laterală sunt proeminente, în special pe site-urile web care necesită o abordare mai structurată a navigării, cum ar fi platformele de comerț electronic sau blogurile extinse. Poziționate în partea laterală a unei pagini web, aceste meniuri oferă opțiuni de navigare verticală.

De exemplu, în tabloul de bord 10Web, meniurile drop-down din bara laterală organizează linkuri pentru setările contului, serviciile de găzduire și opțiunile de organizare într-un format compact, ușor accesibil.

Meniuri cu hamburger

Meniurile cu hamburgeri sunt un element de bază pe site-urile mobile, dar pot fi găsite și pe site-urile complete. Denumite după pictograma iconică de meniu cu trei linii, care seamănă cu un hamburger, aceste meniuri reprezintă o soluție care economisește spațiu, ascund opțiunile de navigare până când se face clic sau se atinge pictograma.

De exemplu, pe site-ul mobil Popular Mechanics, meniul hamburger se extinde pentru a dezvălui o listă de opțiuni de navigare. Acest lucru economisește spațiul pe ecran, oferind totuși accesul la navigare completă.

Meniuri de navigare derulante (Navbar)

Meniurile de navigare drop-down, numite și bare de navigare, sunt similare cu meniurile de antet, dar sunt concepute pentru a economisi spațiu pe ecran prin utilizarea funcționalității submeniului. Acest tip de meniu este deosebit de eficient pentru site-urile cu o gamă largă de categorii de conținut sau nevoi extinse de navigare.

De exemplu, Opensource.com are o bară de navigare drop-down care ascunde diferitele categorii de conținut, afișându-le doar atunci când utilizatorul trece cu mouse-ul peste sau face clic pe bara de navigare principală, păstrând astfel interfața curată și neaglomerată.

Se confirmă suportul temei și opțiunile de personalizare

Înainte de a implementa oricare dintre aceste tipuri de meniu, trebuie să vă asigurați că tema dvs. WordPress acceptă stilul de navigare specific pe care intenționați să îl utilizați. Majoritatea temelor vor indica suportul lor pentru aceste tipuri de meniu în documentația lor. Cu toate acestea, pentru temele care nu acceptă în mod nativ anumite tipuri de meniuri, HTML sau CSS personalizat pot fi folosite pentru a crea un meniu de navigare derulant personalizat, care se potrivește cerințelor de design și de utilizare ale site-ului dvs.

Fiecare tip de meniu de navigare oferă avantaje distincte în funcție de aspectul site-ului dvs., structura conținutului și obiectivele de proiectare. Alegând tipul potrivit și asigurându-vă că este susținut de tema dvs. (sau personalizându-l după cum este necesar), puteți îmbunătăți semnificativ experiența de navigare a site-ului dvs., făcându-l mai intuitiv, mai accesibil și mai captivant pentru vizitatorii dvs.

Importanța și utilitatea meniurilor drop-down

Meniurile drop-down din WordPress sunt mai mult decât o simplă opțiune de navigare elegantă; sunt o piatră de temelie pentru îmbunătățirea experienței utilizatorului. Prin clasificarea eficientă a link-urilor și prin reducerea aglomerației din bara de navigare a site-ului dvs., acestea îi ajută pe vizitatori să găsească ceea ce caută cu un efort minim. Un meniu derulant bine implementat poate îmbunătăți în mod semnificativ atractivitatea estetică a site-ului dvs., îl poate menține organizat și poate reduce ratele de respingere, încurajând vizitatorii să exploreze mai mult conținut.

Meniurile drop-down sunt o componentă crucială în designul și funcționalitatea unui site web WordPress, servind nu doar ca element de design, ci și ca instrument strategic pentru îmbunătățirea navigării utilizatorilor și a gradului de utilizare general al site-ului.

Raționalizarea experienței utilizatorului

Utilitatea principală a meniurilor drop-down constă în capacitatea lor de a simplifica experiența utilizatorului. Prin consolidarea informațiilor într-un format de submeniu, aceste meniuri reduc nevoia de defilare și clic excesiv, permițând vizitatorilor să acceseze secțiuni mai profunde ale site-ului dintr-un singur punct de acces. Această eficiență nu numai că accelerează interacțiunea, ci și face călătoria utilizatorului mai lină și mai intuitivă.

Îmbunătățirea esteticii site-ului

Din perspectiva designului, meniurile drop-down contribuie în mod semnificativ la o interfață a site-ului web curată și neaglomerată. Acestea permit o bară de navigare minimalistă care nu copleșește vizitatorii cu prea multe informații simultan. Ascunzând opțiunile secundare, meniurile drop-down ajută la menținerea unui echilibru estetic pe pagină, concentrând atenția utilizatorului asupra conținutului principal, oferind în același timp acces ușor la resurse mai aprofundate.

Îmbunătățirea descoperirii conținutului

Meniurile drop-down îmbunătățesc capacitatea de descoperire a conținutului prin clasificarea inteligentă a subiectelor sau serviciilor conexe sub un titlu unificat. Această grupare logică încurajează utilizatorii să exploreze zone ale site-ului pe care nu le-ar fi observat altfel. De exemplu, un meniu drop-down etichetat Servicii se poate extinde pentru a dezvălui opțiuni precum Consultanță, Dezvoltare software și Asistență pentru clienți, fiecare conducând la alte subcategorii sau pagini. Această metodă nu numai că expune utilizatorii la o gamă mai largă de oferte, dar poate, de asemenea, să îmbunătățească semnificativ SEO-ul site-ului prin structurarea conținutului mai logic și interconectarea paginilor conexe.

Reducerea ratelor de respingere

Meniurile derulante bine concepute pot contribui la scăderea ratelor de respingere. Oferind vizitatorilor acces imediat la mai multe secțiuni conexe ale site-ului dvs., le oferiți un motiv să rămână și să exploreze, mai degrabă decât să plece după ce au consumat o singură bucată de conținut. Această implicare mai profundă nu numai că îmbunătățește șansele de a converti vizitatorii în clienți sau adepți, ci și semnalează motoarele de căutare că site-ul dvs. oferă conținut valoros, potențial îmbunătățindu-vă clasamentul.

Facilitarea navigării complexe pe site

Meniurile drop-down sunt indispensabile pentru site-urile web mai mari sau pentru cele cu o gamă largă de produse sau servicii. Acestea fac posibilă navigarea în structuri complexe de site fără a forța utilizatorii să revină la funcția de căutare sau harta site-ului. Utilizatorii pot obține o imagine de ansamblu rapidă a ceea ce este disponibil pe site fără a fi nevoie să navigheze departe de pagina lor curentă, sporind semnificativ satisfacția utilizatorilor și eficiența generală a navigării pe site.

Adaptarea la standardele moderne de utilizare

În lumea de astăzi, pe care o primește pe mobil, meniurile drop-down se adaptează perfect la diferite dispozitive, menținând standardele de utilizare pe desktop-uri, tablete și smartphone-uri. Meniurile derulante moderne sunt concepute pentru a fi receptive, asigurând că navigarea rămâne accesibilă și ușor de utilizat, indiferent de dimensiunea ecranului. Această adaptabilitate este esențială, deoarece navigarea pe mobil continuă să crească, necesitând site-urilor web să ofere o experiență consecventă pe toate platformele.

Cum să adăugați un meniu drop-down în WordPress

Înainte de a adăuga un meniu derulant în WordPress, este important să planificați structura meniului site-ului dvs. Gândiți-vă la categoriile principale ale conținutului dvs. și la modul în care acestea pot fi organizate în mod logic. Acest pas asigură că site-ul dvs. și vizitatorii primesc cele mai bune beneficii posibile din meniul dvs. derulant.

Odată ce structura meniului este planificată, există mai multe metode de a adăuga un meniu derulant în WordPress:

1. Creați un meniu nou sau editați unul existent în editorul administratorului.
2. Inserați un bloc de navigare într-o postare sau pagină.
3. Utilizați Editorul site-ului.
4. Utilizați un plugin de meniu.
5. Adăugați manual un meniu derulant folosind PHP.

Adăugați un meniu drop-down în WordPress utilizând editorul de meniu încorporat

WordPress are un editor de meniuri încorporat ușor de utilizat , care vă permite să creați aceste meniuri fără a avea nevoie de pluginuri suplimentare sau expertiză în codare. Mai întâi, vom analiza cum să adăugați un nou meniu și să creăm un meniu drop-down. Apoi, veți avea opțiunea de a modifica meniul cu CSS personalizat .

Pasul 1: Accesați editorul de meniu

În primul rând, va trebui să vă conectați la backend-ul site-ului dvs. WordPress. Odată ce ați ajuns, navigați la secțiunea Aspect > Meniuri din tabloul de bord WordPress .

Pasul 2: Creați un nou meniu

La intrarea în ecranul Meniuri, faceți clic pe butonulCreați meniu pentru a începe să vă creați noul meniu.

Acest pas este baza structurii meniului dvs., unde definiți cum va fi organizat și afișat meniul dvs. pe site-ul dvs. În loc să creați un meniu nou, puteți edita orice meniuri existente pe care le aveți deja pentru a adăuga un meniu drop-down.

Pasul 3: Configurați meniul

Dați noului dvs. meniu un nume descriptiv pentru a vă ajuta să îl identificați printre alte meniuri pe care le puteți crea.

Puteți adăuga automat noi pagini de nivel superior la acest meniu bifând caseta respectivă. Această caracteristică este la îndemână pentru a menține navigarea la zi pe măsură ce site-ul dvs. crește. Cu toate acestea, fiți precaut cu această funcție pentru a preveni aglomerarea neintenționată a meniului cu prea multe articole.

Pasul 4: Gestionarea locațiilor

Apoi, în secțiunea Setări meniu, puteți alege locația acestuia pe site-ul dvs. Majoritatea temelor acceptă mai multe locații de meniu, cum ar fi meniul principal, subsolul sau meniul de linkuri sociale.

Tema Twenty Twenty, de exemplu, oferă mai multe zone de meniu, inclusiv:

• Meniul orizontal de pe desktop : situat de obicei în antetul site-ului, este ideal pentru navigarea primară.
• Meniul extins pentru desktop : oferă un aspect alternativ pentru navigarea pe desktop.
• Meniul mobil : conceput special pentru utilizatorii de telefonie mobilă, asigurându-vă că site-ul dvs. este navigabil pe dispozitive mai mici.
• Meniul Subsol : Vă permite să adăugați linkuri de navigare secundare în subsolul site-ului dvs.
• Meniu social : o locație specială de meniu pentru conectarea la profilurile de rețele sociale.

Pentru majoritatea site-urilor, în special cele care utilizează tema Twenty Twenty, locațiaDesktop Horizontal Menu este cea mai potrivită pentru meniul dvs. vertical principal.Acest lucru plasează meniul dvs. vizibil în antetul site-ului, făcându-l imediat accesibil vizitatorilor dvs.

Pentru o vedere mai holistică a locului în care sunt poziționate meniurile sau pentru a atribui diferite meniuri unor locații specifice, navigați la filaGestionați locații din zona Meniuria tabloului de bord.

Aici, puteți vedea o listă cuprinzătoare a tuturor locațiilor de meniu acceptate de tema dvs. și meniului pe care l-ați atribuit fiecăruia. Această prezentare generală vă ajută să vă asigurați că meniurile dvs. sunt poziționate corect pentru a se potrivi cu designul și obiectivele de utilizare ale site-ului dvs.

Pasul 5: Adăugați elemente de meniu

Acum, îți vei completa meniul cu articole. În secțiuneaAdăugați elemente de meniu din partea stângă a ecranului, selectați paginile, postările, linkurile personalizate sau categoriile pe care doriți să le includeți.

Pasul 6: Organizați-vă meniul

După ce adăugați elemente în meniul dvs., puteți aranja ordinea acestora trăgându-le și plasându-le în partea dreaptă a ecranului.

Pentru a crea un meniu derulant, trageți pur și simplu un element de meniu în dreapta sub elementul părinte, indicând că este un element de submeniu. Acest editor vizual de tip drag-and-drop permite vizualizarea simplă a ierarhiei și structurii meniului, permițând ajustări ușoare.

Pasul 7: Salvați și revizuiți

Odată mulțumit de structura și setările meniului dvs., faceți clic peSalvare meniu.După salvare, vizitați site-ul dvs. și consultați meniul drop-down. Verificați dacă funcționalitatea meniului derulant funcționează conform așteptărilor și dacă estetica meniului se aliniază cu designul site-ului dvs.

Urmând acești pași detaliați, veți avea un meniu derulant funcțional și elegant pe site-ul dvs. WordPress, fără a fi nevoie de pluginuri suplimentare sau modificări tehnice.

Cum să vă personalizați meniul drop-down WordPress cu CSS

Dacă doriți să continuați să vă personalizați site-ul WordPress, adăugarea de stil personalizat la meniurile dvs. derulante prin CSS crește atractivitatea vizuală și îmbunătățește experiența utilizatorului. Adaptarea aspectului site-ului dvs. pentru a se potrivi cu marca dvs. vă poate diferenția de mulțime.

Iată un ghid pas cu pas pentru a adăuga personalizare la meniurile dvs. folosind clase CSS.

Pasul 1: Activați clasele CSS în meniul dvs

În primul rând, pentru a țese în CSS personalizat, trebuie să faceți clasele CSS accesibile în editorul de meniu. Căutați fila Opțiuni ecran în colțul din dreapta sus al tabloului de bord WordPress.

Făcând clic pe această filă, se deschide un panou cu mai multe casete de selectare, dezvăluind opțiuni ascunse pe care le puteți activa sau dezactiva, în funcție de ceea ce aveți nevoie pentru sesiunea de editare.

Pasul 2: Verificați opțiunea clase CSS

În panoul Opțiuni ecran, veți găsi o opțiune etichetatăClase CSS .

Bifând această casetă de selectare, deblocați, în esență, capacitatea de a atribui clase CSS personalizate elementelor individuale din meniul dvs. Această funcție puternică vă permite să vizați anumite elemente de meniu cu stiluri unice, diferențiandu-le de restul elementelor de navigare ale site-ului dvs.

Pasul 3: Adăugarea CSS personalizat în meniu

Cu clasele CSS acum disponibile, întoarceți-vă la structura meniului în secțiuneaAspect > Meniuri .Când adăugați sau editați un element de meniu, veți observa un câmp suplimentar numitClase CSS (opțional) .Puteți introduce unul sau mai multe nume de clasă personalizate (separate prin spații) pentru a crea un identificator unic pentru acest element de meniu.

Faceți clic pe butonulSalvare meniu după adăugarea claselor CSS.

Crearea unui CSS personalizat

După ce ai atribuit clase personalizate articolelor din meniu, următorul pas este să dai viață viziunii tale de stil. Navigați la secțiunea Aspect > Personalizare a tabloului de bord și căutați opțiunea CSS suplimentară. Această zonă este pânza dvs. pentru toate lucrurile legate de CSS cu site-ul dvs. Introduceți aici regulile dvs. CSS personalizate, vizând numele claselor pe care le-ați configurat anterior. De exemplu:

 .meniu-derulant-personalizat {
    culoare de fundal: #f2f2f2;
    culoare: #333;
    chenar-rază: 5px;
}

.custom-dropdown-menu:hover {
    culoare de fundal: #ddd;
}

Acest fragment CSS modifică culorile de fundal și text și adaugă o rază ușoară a marginii elementelor de meniu cu clasa .custom-dropdown-menu . De asemenea, schimbă stilul la hover.

Inserați fragmentul, apoi faceți clic pe butonulPublicați din partea de sus a paginii.

Adăugarea pictogramelor sau imaginilor în meniul drop-down

Îmbunătățirea meniurilor drop-down WordPress cu elemente vizuale, cum ar fi imagini sau pictograme, poate îmbunătăți semnificativ experiența utilizatorului pe site-ul dvs. Aceste indicii vizuale pot ajuta utilizatorii să navigheze pe site-ul dvs. mai intuitiv, facilitând găsirea conținutului pe care îl caută.

Plugin-uri precum Menu Image, Icons Made Easy ajută utilizatorii de toate nivelurile de calificare să adauge aceste elemente vizuale utile.

Cum să adăugați un meniu derulant folosind blocul de navigare

Blocul Navigare este un instrument puternic care vă permite să creați meniuri de navigare complexe fără a atinge o singură linie de cod.

Adăugarea unui meniu drop-down pe site-ul dvs. WordPress folosind blocul Navigare este un proces simplu, mai ales odată cu introducerea editorului Gutenberg, care face editarea site-ului mult mai intuitivă. Iată cum să adăugați un meniu drop-down în WordPress folosind acest bloc:

Pasul 1: Deschideți pagina sau editorul de postări

Navigați la pagina sau postarea în care doriți să adăugați meniul drop-down. Dacă este o pagină sau o postare nouă, pur și simplu adăugați un titlu și faceți clic pe pictograma + pentru a începe să adăugați blocuri.Alternativ, puteți introduce o bară oblică și începe să tastați navigare pentru a adăuga blocul.

Pasul 2: Adăugați blocul de navigare

Faceți clic pe butonul+ (Adăugați bloc) din editor pentru a deschide biblioteca de blocuri.Căutați blocul de navigare și faceți clic pe el pentru a-l adăuga pe pagina dvs. Blocul Navigare poate fi găsit și în categoria Design de blocuri.

Pasul 3: Creați-vă meniul

După adăugarea blocului de navigare, veți avea opțiunea de a utiliza un nou meniu, de a alege un meniu existent sau de a importa un meniu clasic. Faceți clic pe meniul kebab din panoul de blocuri din dreapta. Apoi, puteți comuta la un alt meniu sau puteți selectaCreare meniu nou.

Pasul 4: Adăugați elemente de meniu

Veți începe apoi să adăugați elemente în meniu. Faceți clic pe butonul+ din blocul de navigare pentru a adăuga elemente noi.

Puteți alege tipul de link pentru fiecare articol din meniul dvs.: pagină, Postare, Link personalizat sau Categorie. Pentru a adăuga un meniu drop-down, veți folosi de obicei Pagini sau Linkuri personalizate. SelectațiLink pentru pagină pentru a adăuga o pagină în meniul dvs. sau Link personalizatpentru a adăuga o adresă URL personalizată.

De asemenea, puteți adăuga un submeniu direct în blocul Navigare, plasând cursorul într-un element de meniu și făcând clic pe pictogramaAdăugați submeniu .

Pasul 5: Indentați elementele derulante

Pentru a face un element un meniu derulant, adăugați elemente sub el și indentați-le. După ce adăugați un articol pe care doriți să-l serviți ca meniu derulant, faceți clic din nou pe butonul+ pentru a adăuga un alt articol.Odată ce noul element apare sub elementul derulant dorit, faceți clic și trageți pictograma cu șase puncte de lângă elementul nou la dreapta. Această acțiune indentează elementul, indicând că este un element de submeniu al meniului drop-down.

Repetați acest proces pentru fiecare articol pe care doriți să îl adăugați în meniul drop-down. Prin indentarea elementelor în continuare, puteți chiar să creați meniuri derulante imbricate.

Pasul 6: Personalizați-vă blocul de navigare

Cu articolele pe loc, puteți personaliza aspectul blocului de navigare. Faceți clic pe bloc pentru a-și dezvălui setările în bara laterală. Aici, puteți ajusta orientarea (orizontală sau verticală), puteți seta culorile, puteți defini tipografia și multe altele. Fiecare element de meniu poate fi, de asemenea, personalizat individual, selectându-l și folosind opțiunile din bara laterală.

Pasul 7: Salvați sau publicați pagina

Odată ce sunteți mulțumit de meniul de navigare, salvați schița sau publicați pagina pentru a activa noul dvs. meniu drop-down pe site-ul dvs.

Cum să adăugați un meniu drop-down în WordPress Site Editor

Pe măsură ce peisajul temelor WordPress evoluează, temele bazate pe blocuri au adus confortul Editorului de site în prim plan, permițând personalizare extinsă fără a intra în cod. O astfel de personalizare este crearea de meniuri drop-down.

Rețineți că pentru a adăuga un meniu drop-down în WordPress utilizând Editorul de site, trebuie să aveți o temă compatibilă bazată pe blocuri.

Iată un ghid pas cu pas despre cum să adăugați un meniu drop-down în WordPress cu Editorul de site.

Pasul 1: Accesarea Editorului site-ului

Începeți prin a naviga la Aspect > Editor în tabloul de bord WordPress.

Această cale vă duce în lumea Editorului de site, unde posibilitățile de personalizare sunt aproape nesfârșite. Inițial, vi se va prezenta șablonul de pornire al temei dvs., dar nu lăsați acest lucru să vă limiteze imaginația.

Pasul 2: Alegeți șablonul sau modelul dvs

Pentru a personaliza o anumită parte a site-ului dvs., cum ar fi adăugarea unui meniu drop-down la antet, faceți clic peȘabloane sau Modele. Această secțiune prezintă toate șabloanele sau părțile de șablon care compun tema WordPress. Selectați zona în care vă imaginați meniul drop-down, de obicei partea șablonului Antet sau Subsol pentru un meniu de navigare.

Pasul 3: Editarea șablonului selectat

După alegerea șablonului dorit, WordPress va afișa o previzualizare. Pentru a începe editarea, căutați și faceți clic pe pictograma creion mică. Această acțiune te duce în modul de editare, unde începe adevărata distracție.

Pasul 4: Adăugarea blocului de navigare

Când șablonul este gata pentru editare, faceți clic pe pictograma albastră+ din colțul din stânga sus.Va apărea o bară de căutare; tastațiNavigare pentru a găsi blocul corespunzător.

Trageți și plasați blocul de navigare pe pânza de design. Selectarea acestui bloc va dezvălui diverse setări de personalizare, inclusiv opțiuni de aspect, setări de afișare și ajustări de stil pentru culoarea textului, fundal și dimensiunea fontului.

Pasul 5: completarea meniului

Pentru a adăuga pagini de nivel superior în meniul dvs., apăsați butonul+ din blocul de navigare.AlegețiLink-ul paginii dintre opțiuni.O fereastră pop-up vă va solicita să introduceți titlul sau adresa URL a paginii pe care doriți să o includeți. După ce apare pagina corectă, faceți clic pentru a o adăuga în meniul dvs. Repetați acest pas pentru toate elementele de nivel superior pe care doriți să le adăugați.

Pasul 6: Adăugarea unui meniu vertical

Pentru a introduce un submeniu oricărui element părinte, faceți clic pe pictograma punctată de lângă elementul părinte relevant și selectațiAdăugați link pentru submeniu .

La fel ca adăugarea paginilor de nivel superior, introduceți titlul sau adresa URL pentru pagina pe care intenționați să o afișați în meniul drop-down. Faceți clic pentru a-l adăuga ca element de submeniu și continuați acest proces pentru fiecare element dorit din meniul drop-down.

Pasul 7: Salvarea meniului

După ce v-ați configurat meticulos meniul, nu uitați să salvați modificările făcând clic peSalvare .Nu vrei să-ți pierzi toată munca grea.

Odată salvat, faceți-vă un moment pentru a vă vizita site-ul web și pentru a fi martor la acțiunea noului dvs. meniu drop-down.

Cum să adăugați un meniu drop-down în WordPress folosind un plugin

Pluginurile pot fi un adevărat schimbător de joc atunci când vine vorba de îmbunătățirea navigației site-ului dvs. WordPress cu meniuri drop-down. Ele oferă funcționalitate extinsă, opțiuni personalizabile și ușurință de utilizare care ar putea să nu fie realizabilă doar prin setările standard ale meniului WordPress.

Iată câteva dintre cele mai populare pluginuri WordPress, atât gratuite, cât și premium, pentru adăugarea unui meniu drop-down. Să revizuim câteva dintre punctele lor cheie pentru a vă ajuta să decideți care dintre ele se potrivește cel mai bine nevoilor site-ului dvs.

Max Mega Meniu

Max Mega Menu transformă meniurile existente în mega meniuri. Puteți plasa widget-uri în meniuri, puteți restructura aspectul cu un editor drag-and-drop și puteți personaliza stilul direct în personalizarea WordPress. Acceptă mai multe locații de meniu, meniuri verticale și acordeon și este compatibil cu dispozitivele mobile.

Dacă sunteți în căutarea unui plugin robust, bogat în funcții, care este și gratuit, Max Mega Menu este o alegere excelentă. Este benefic pentru site-urile care necesită structuri complexe de navigare fără a fi nevoie de abilități de codare.

Meniul Eroilor

Hero Menu vă permite să creați meniuri derulante personalizate cu ușurință. Este conceput pentru a fi prietenos pentru începători, dar nu se zgâriește cu funcțiile. Puteți crea meniuri mega și sticky și chiar puteți integra listele de produse WooCommerce direct în navigarea dvs. Hero Menu oferă diverse opțiuni de personalizare pentru a vă asigura că meniurile dvs. se potrivesc cu designul site-ului dvs.

Alegeți Meniul Hero dacă acordați prioritate ușurinței de utilizare, dar doriți flexibilitatea de a crea meniuri detaliate și receptive. Accentul său pe receptivitate asigură meniurile dvs. să arate grozav pe orice dispozitiv, făcându-l o alegere solidă pentru site-urile web moderne, mai întâi mobile.

UberMenu

UberMenu este o soluție premium care oferă un control extins asupra stilului, aspectului și funcționalității meniului dvs. Include funcții precum generarea dinamică a elementelor, integrarea imaginilor și pictogramelor și integrarea Google Maps. UberMenu acceptă, de asemenea, submeniuri cu file și meniuri verticale și are un sistem puternic de grile pentru crearea unor aspecte complexe de meniu.

UberMenu este ideal pentru cei care au nevoie de control complet asupra designului și funcționalității meniului. Opțiunile sale extinse de personalizare îl fac perfect pentru site-urile care necesită un grad ridicat de complexitate de navigare și atractivitate vizuală.

Pagini imbricate

Pagini imbricate oferă o interfață de tip drag-and-drop pentru a vă organiza paginile și postările într-o structură imbricată, simplificând procesul de creare a meniurilor drop-down. Îmbunătățește gestionarea implicită a paginilor WordPress, permițându-vă să vă organizați paginile și postările mai intuitiv.

Să presupunem că site-ul dvs. se bazează în mare măsură pe o ierarhie structurată a paginilor și doriți o modalitate mai ușoară de a gestiona și de a crea meniuri derulante imbricate. În acest caz, WP Nested Pages este o soluție simplă care se integrează perfect cu WordPress.

Meniul WP Mobile

WP Mobile Menu este conceput pentru a îmbunătăți navigarea site-ului dvs. mobil cu un meniu mobil ușor de utilizat și receptiv. Vă permite să creați meniuri elegante și frumoase pentru vizitatorii dvs. de pe mobil, fără a compromite funcționalitatea.

WP Mobile Menu este un plugin esențial pentru site-urile care primesc o parte semnificativă a traficului de pe dispozitivele mobile. Se asigură că navigarea pe site-ul dvs. mobil este la fel de optimizată și ușor de utilizat ca și navigarea pe desktop.

Adăugați manual un meniu drop-down în WordPress cu PHP personalizat

Adăugarea de cod PHP personalizat la fișierul functions.php al temei dvs. poate îmbunătăți sau modifica funcționalitatea meniurilor dvs. WordPress. Această abordare este pentru utilizatorii avansați și poate activa elemente de meniu dinamice, logica condiționată și multe altele.

Înainte de a începe, faceți o copie de rezervă a site-ului dvs. înainte de a face orice modificări și testați-le amănunțit pentru a asigura o experiență perfectă pentru utilizator.

Iată un proces pas cu pas despre cum să adăugați un meniu drop-down în WordPress folosind PHP.

Pasul 1: Înregistrați locațiile meniului în tema dvs

Începeți în fișierul functions.php al temei , unde veți înregistra o nouă locație de meniu. Acest pas îi spune WordPress unde va fi plasat meniul tău în tema ta.

Introduceți următorul fragment de cod în functions.php :

 funcția mytheme_register_nav_menu() {
    register_nav_menus(matrice(
        'primary' => __('Meniul principal', 'theme-slug'),
    ));
}
add_action('after_setup_theme', 'mytheme_register_nav_menu');

Acest cod definește o nouă locație de meniu etichetată ca Meniu principal .Înlocuiți „theme-slug” cu slug-ul real al temei pentru a asigura compatibilitatea.

Pasul 2: implementați meniul în tema dvs

Apoi, navigați la fișierul header.php al temei sau la orice fișier șablon care corespunde locului în care doriți să apară meniul. Pentru a implementa meniul, utilizați funcția wp_nav_menu() așa cum se arată mai jos:

 wp_nav_menu(array('theme_location' => 'principal', 'container_class' => 'principal-nav'));

Acest apel de funcție îi spune WordPress să afișeze meniul atribuit locațieiprimare , împachetându-l într-un container div cu clasa main-nav .Această clasă poate fi folosită mai târziu în scopuri de styling.

Pasul 3: Creați și atribuiți-vă meniul

Cu locația meniului înregistrată și implementată, mergeți la Tabloul de bord WordPress Admin, în special laAspect > Meniuri .Aici, creați-vă meniul drop-down adăugând elemente de meniu și aranjandu-le ierarhic pentru funcționalitatea drop-down. Odată ce meniul este gata, atribuiți-l locațieiprincipale pe care ați înregistrat-o mai devreme.

Pasul 4: stilați-vă meniul

Pentru a vă asigura că meniul drop-down se potrivește cu aspectul site-ului dvs., adăugați CSS personalizat în foaia de stil a temei. Acest lucru ar putea implica stilul clasei container .main-nav , precum și orice alte clase pe care WordPress le adaugă la elementele de meniu:

 .main-nav { /* Stiluri de containere */ }
.main-nav ul { /* Listă stiluri */ }
.main-nav li { /* Stiluri de articole */ }
.main-nav li ul { /* Stiluri dropdown */ }

Acest CSS este doar un punct de plecare. În funcție de designul dvs., poate fi necesar să adăugați mai multe selectoare și proprietăți specifice.

Pasul 5: Asigurați-vă funcționalitatea drop-down

Pentru ca meniul derulant să funcționeze, tema dvs. trebuie să o accepte, ceea ce ar putea necesita HTML, CSS sau JavaScript suplimentar. Unele teme includ deja această funcționalitate, dar dacă a dvs. nu o include, poate fi necesar să integrați JavaScript sau jQuery pentru a gestiona comportamentul drop-down:

 jQuery('.main-nav ul li').hover(function() {
    jQuery(this).find('ul').stop(true, true).slideDown();
}, function() {
    jQuery (this) .find ('ul'). Stop (true, true) .slideup ();
});

Acest script jQuery simplu adaugă funcționalități derulante de bază. Amintiți -vă, pentru JavaScript personalizat, trebuie să vă înscrieți în mod corespunzător scriptul în fișierul dvs. funcții.php pentru JavaScript personalizat.

Sfaturi și cele mai bune practici pentru proiectarea meniului derulant

Proiectarea meniurilor derulante eficiente implică simplitate, structură logică și accesibilitate rapidă. Asigurați -vă că meniurile dvs. nu copleșesc vizitatorii cu prea multe opțiuni și utilizați etichete descriptive pentru claritate. Îmbunătățirea funcționalității poate include adăugarea de funcționalitate de căutare în meniu sau asigurarea reacției de telefonie mobilă.

Iată câteva sfaturi practice pentru proiectarea meniurilor derulante utile și ușor de utilizat, asigurându-se că vizitatorii își pot găsi cu ușurință drumul și se vor angaja mai profund cu conținutul dvs.

Creați meniuri derulante pe mai multe niveluri

Trecând dincolo de elementele de bază, meniurile derulante pe mai multe niveluri permit o prezentare mai structurată și mai ierarhică a conținutului site-ului dvs. web, ceea ce o face ideală pentru site-urile cu conținut extins sau mai multe categorii de conținut. Această abordare de submeniu este utilă în special pentru site -urile de comerț electronic sau pentru cele cu nevoi complexe de clasificare.

Iată cum să creați un meniu derulant pe mai multe niveluri:

• Începeți prin crearea meniului dvs. derulant principal, așa cum este descris anterior.
• Pentru a adăuga un alt strat, trageți un element de meniu sub o sub-element și mutați-l ușor spre dreapta, creând un nou nivel sub acea sub-articol.
  
  

Această metodă este deosebit de benefică pentru clasificarea produselor sau conținutului în categorii și subcategorii largi, cum ar fi o categorie de electronice cu o subcategorie laptopuri, care ar putea include laptopuri Apple sau pungi și cutii laptop.

Creați mai multe meniuri derulante

Adăugarea meniurilor derulante pentru diverse secțiuni sau pagini poate beneficia de site -ul dvs. web. De exemplu, o piață online ar putea avea un meniu derulant pentru categoriile de produse și alta pentru diferite zone de site, cum ar fi formularul de contact și blogul.

Pentru a implementa mai multe meniuri derulante:

• Urmați pașii pentru a crea un meniu derulant pentru fiecare meniu de care aveți nevoie.
• Utilizați setările locației din editorul de meniu WordPress pentru a atribui fiecare meniu în diferite zone ale site -ului dvs. web.
  
  Acest lucru asigură că vizitatorii văd opțiuni de navigație relevante în funcție de locul în care se află pe site -ul dvs.

Creați meniuri derulante cu previzualizare live

Pentru cei care consideră că editorul de meniu de bord greoi, puteți adăuga un meniu derulant cu o caracteristică de previzualizare live în interfața WordPress Personalizer.

Pentru a crea meniuri cu o previzualizare live:

• Navigați la aspect> Personalizați pentru a deschide personalizarea temei WordPress.
• Faceți clic pe fila Meniuri , selectați meniul de navigare și utilizați editorul de drag-and-drop din partea stângă a ecranului.
• Pe măsură ce faceți modificări, le veți vedea reflectate în previzualizarea live din dreapta, permițându-vă să vă ajustați meniul în timp real până când vă satisface nevoile.

Crearea unui mega mega mare ca dropdown în WordPress

Pentru site -urile web cu o cantitate semnificativă de conținut, adăugarea unui meniu derulant standard ar putea să nu fie suficientă. În astfel de cazuri, un mega meniu poate afișa o structură mai detaliată a site-ului dvs., prezentând mai multe link-uri, sub-menus și elemente într-un format derulant cuprinzător.

Pentru a crea un mega meniu:

• Luați în considerare utilizarea unui plugin conceput pentru crearea de mega meniuri, deoarece WordPress nu acceptă meniuri mega nativ.
• Aceste pluginuri vă permit să proiectați meniuri derulante extinse care apar atunci când utilizatorii trec pe un element de meniu principal, oferind o imagine de ansamblu detaliată a structurii de conținut a site -ului dvs. web.

Meniurile derulante bine proiectate reprezintă o piatră de temelie a navigației eficiente a site-urilor web, care afectează semnificativ experiența utilizatorului, conversii și implicarea. Urmând aceste sfaturi și cele mai bune practici, vă puteți asigura că site -ul dvs. WordPress nu numai că îndeplinește așteptările utilizatorului pentru o experiență de navigație lină și intuitivă.

Depanare Probleme comune ale meniului derulant

Depanarea meniului derulant WordPress poate fi un proces complicat, dar verificând metodic fiecare problemă potențială, puteți identifica și rezolva problema. Iată o abordare structurată pe care o puteți încerca să vă depanați meniul derulant:

Pasul 1: Treceți la o temă implicită

Primul pas în diagnosticarea oricărei probleme de meniu WordPress este eliminarea problemelor legate de temă. Schimbați site-ul dvs. la o temă WordPress implicită, cum ar fi douăzeci și douăzeci sau douăzeci și douăzeci și unu. Dacă meniul funcționează corect după comutare, problema se află probabil în tema dvs. În acest caz, este recomandabil să vă adresați dezvoltatorului sau Forumului de asistență pentru ajutor al temei, deoarece acestea pot avea deja o soluție sau o actualizare disponibilă.

Pasul 2: Verificați codul greșit

Dacă ați adăugat orice CSS sau JavaScript personalizat pentru a vă îmbunătăți meniul drop-down, o mică greșeală de tipar ar putea fi de vină. Examinați cu atenție codul pentru orice erori, acordând o atenție deosebită sintaxei, punctului și virgulă lipsă sau numelor incorecte ale claselor. Utilizați instrumentele pentru dezvoltatori de browser (accesibile apăsând F12 în majoritatea browserelor) pentru a vă inspecta meniul și a vedea dacă sunt înregistrate erori în consolă.

Pasul 3: Investigați incompatibilitatea pluginului

Pluginurile îmbunătățesc funcționalitatea WordPress, dar uneori pot intra în conflict între ele sau cu tema dvs., ceea ce duce la probleme precum meniurile defectuoase. Pentru a testa conflictele de plugin:

• Dezactivați toate pluginurile legate de funcționalitatea meniului sau orice plugin instalat sau actualizat recent.
• Verificați dacă meniul începe să funcționeze corect după dezactivarea fiecărui plugin.
• Reactivați pluginurile unul câte unul, testând meniul de fiecare dată pentru a identifica pluginul ofensator.
• Odată identificat, puteți alege să căutați un plugin alternativ sau să contactați dezvoltatorul de plugin pentru asistență.

Pasul 4: Actualizați jQuery

WordPress și multe teme și pluginuri se bazează pe jQuery pentru conținut și efecte dinamice, inclusiv meniuri drop-down. Asigurați-vă că site-ul dvs. folosește cea mai recentă versiune de jQuery. Dacă nu sunteți sigur cum să faceți acest lucru, pluginul jQuery Updater vă poate ajuta prin actualizarea automată a jQuery la cea mai recentă versiune.Amintiți-vă, faceți întotdeauna copii de rezervă ale site-ului înainte de a face modificări sau actualizări semnificative.

Pasul 5: Folosiți forumuri de asistență WordPress

Dacă ați încercat pașii de mai sus și meniul încă nu funcționează, forumurile de asistență WordPress sunt o resursă fantastică. Când postați, furnizați cât mai multe detalii posibil despre problema dvs., inclusiv pașii pe care i-ați luat deja pentru a o rezolva. Comunitatea este incredibil de bine informată și poate oferi adesea soluții care pot să nu fie imediat evidente.

Concluzie

Învățând cum să adăugați un meniu drop-down în WordPress, puteți combina funcționalitatea cu estetica pentru a îmbunătăți gradul de utilizare al site-ului. Diverse metode, cum ar fi instrumentele încorporate ale WordPress, pluginurile sau codificarea personalizată, vă pot ajuta să creați o navigare dinamică cu submeniuri care vă vor ridica site-ul. Amintiți-vă, scopul este de a maximiza eficiența navigării și de a vă asigura că vizitatorii dvs. au o experiență plăcută și lină de explorare a site-ului dvs.