Tutoriale WordPress de încredere, atunci când aveți cea mai mare nevoie.
Ghidul începătorului pentru WordPress
Cupa WPB
25 de milioane+
Site-uri web care folosesc plugin-urile noastre
16+
Ani de experiență WordPress
3000+
Tutoriale WordPress de la experți

Cum să creezi un meniu lateral colapsabil în WordPress (Metoda ușoară)

Un meniu lateral colapsabil este o modalitate excelentă de a oferi acces ușor la linkuri și conținut important, menținând în același timp designul site-ului dvs. curat și organizat.

Această funcție permite utilizatorilor să extindă și să restrângă meniul, oferindu-le control asupra experienței de navigare.

Am observat că multe site-uri mari, magazine eCommerce și site-uri cu layout-uri mai complexe îl folosesc pentru a facilita navigarea.

În acest articol, îți vom arăta cum să creezi cu ușurință un meniu de bară laterală colapsabil în WordPress.

Cum să creezi un meniu lateral colapsabil în WordPress (Metoda ușoară)

💡Răspuns rapid: Cum să adăugați un meniu lateral colapsabil în WordPress

Cel mai simplu mod de a adăuga un meniu lateral colapsabil este utilizând pluginul Bellows Accordion Menu.

Acesta vă permite să proiectați un meniu pe mai multe niveluri în panoul de administrare și să îl adăugați în bara laterală folosind un simplu shortcode.

Ce este un meniu de bară laterală colapsabil? (Și când să folosești unul)

Un meniu lateral colapsabil (sau meniu extensibil) este o listă de navigare care ascunde sub-elementele până când un vizitator face clic pentru a le dezvălui. Organizează linkurile într-o structură 'părinte-copil', păstrând designul site-ului curat.

Recomandăm adesea utilizarea meniurilor colapsabile pentru site-uri web mari sau magazine de eCommerce. Iată de ce sunt eficiente:

  • Organizează layout-uri complexe: Te ajută să sortezi sute de categorii sau pagini fără a copleși utilizatorul.
  • Economisește spațiu pe ecran: Prin ascunderea elementelor copil, păstrezi bara laterală scurtă și ordonată.
  • Îmbunătățește experiența pe mobil: Previne utilizatorii de mobil să fie nevoiți să deruleze prin liste nesfârșite de linkuri.

De exemplu, publicația de știri Guardian folosește un meniu colapsabil pentru site-ul său mobil pentru a gestiona numeroasele sale categorii de știri.

Un exemplu de meniu colapsabil.

Acum, să vedem cum poți crea cu ușurință un meniu lateral colapsabil pe site-ul tău WordPress.

Cum să creați un meniu lateral colapsabil în WordPress

Poți crea un meniu de bară laterală colapsabil în WordPress folosind pluginul Bellows Accordion Menu.

Oferă un scurt cod la îndemână care vă permite să plasați meniul dvs. colapsabil pe orice pagină, postare sau zonă de widget, inclusiv bara laterală.

Un meniu colapsabil în bara laterală WordPress.

Notă: Acest plugin este conceput pentru a fi utilizat cu teme clasice.

Pasul 1: Instalați și activați pluginul Bellows Accordion

Mai întâi, va trebui să instalezi și să activezi pluginul Bellows Accordion Menu. Dacă ai nevoie de ajutor, consultă ghidul nostru pentru începători despre cum să instalezi un plugin WordPress.

Pasul 2: Creați un meniu nou

După activare, vizitați pagina Aspect » Meniuri din tabloul de bord WordPress. 

Crearea unui meniu în tabloul de bord WordPress.

Tastați un nume pentru meniul dvs. în câmpul „Nume meniu”. Apoi, faceți clic pe butonul „Creează meniu”.

Pasul 3: Adăugați și aranjați elementele meniului

Apoi, alegeți paginile pe care doriți să le adăugați din coloana din stânga și faceți clic pe „Adaugă la meniu”.

Dacă doriți să vedeți o listă cu toate paginile site-ului dvs., faceți clic pe fila „Vezi tot”. Pentru mai multe detalii, consultați ghidul nostru despre cum să adăugați un meniu de navigare în WordPress.

Adăugarea paginilor la meniul WordPress.

Pentru a crea efectul colapsabil, trebuie să aranjați elementele într-o relație părinte-copil. Pur și simplu trageți un element de pagină ușor spre dreapta sub un element părinte.

Trageți-l spre dreapta până când vedeți conturul punctat deplasându-se spre interior. Acest lucru confirmă că elementul este acum un sub-element, care va fi ascuns până când se face clic pe părinte.

Acum, când un vizitator face clic pe un element părinte din meniul dvs. colapsabil, acesta se va extinde pentru a dezvălui tot conținutul copil.

Adăugarea postărilor la meniul WordPress.

Nu uitați să faceți clic pe butonul „Salvare meniu” când ați terminat.

Pasul 4: Obțineți scurt codul meniului

Acum, dorim să adăugăm acest meniu colapsabil în bara laterală WordPress. Pentru a face acest lucru, vom folosi câteva shortcode-uri pe care Bellows Accordion le creează automat. 

Pentru a obține shortcode-ul, accesați pagina Aspect » Meniu Bellows din tabloul de bord WordPress. Dacă nu este deja selectată, asigurați-vă că selectați fila „Afișați tot”.

Shortcode-ul meniului retractabil în tabloul de bord WordPress.

Acum puteți face clic pe caseta Shortcode, care ar trebui să evidențieze tot codul. Acum, copiați acest cod folosind fie scurtătura de la tastatură Command + C, fie Ctrl + C. 

Pasul 5: Adăugați meniul în bara laterală

Acum trebuie să adăugăm meniul în aspectul site-ului dvs. Accesați pagina Aspect » Widget-uri din zona de administrare WordPress.

Aceasta va afișa toate zonele widget din tema dvs. curentă. Opțiunile pe care le vedeți pot varia, dar majoritatea temelor WordPress moderne au o bară laterală.

Configurarea meniului lateral retractabil.

Găsiți zona de widget-uri din bara laterală și faceți clic pe pictograma „+” pentru a adăuga un bloc nou.

Căutați „Shortcode” și selectați blocul.

Cum să adăugați un widget în bara laterală WordPress.

Lipiți shortcode-ul copiat în bloc și faceți clic pe „Actualizare”. Când vizitați site-ul dvs., ar trebui să vedeți noul dvs. meniu pliabil.

Pe dispozitivele mobile, această bară laterală va apărea de obicei în partea de jos a paginii, unde funcția pliabilă ajută la economisirea spațiului valoros de derulare verticală.

Exemplu de meniu colapsabil funcțional
Pasul 6: Personalizați meniul pliabil

Pluginul Bellows Accordion face, de asemenea, extrem de ușoră personalizarea acestui meniu implicit. De exemplu, ați putea schimba schema de culori pentru a reflecta mai bine brandingul site-ului tău. 

Dacă doriți să ajustați meniul implicit, accesați pur și simplu pagina Aspect » Meniu Bellows din tabloul de bord WordPress. 

Acest meniu conține toate setările de care aveți nevoie pentru a personaliza meniul dvs. colapsabil. Există multe setări de explorat. Cu toate acestea, este posibil să doriți să începeți prin a accesa Configurare principală » Configurare de bază.

Configurarea aspectului meniului dvs. colapsabil în bara laterală WordPress.

Aici, puteți comuta între mai multe culori de meniu diferite. Puteți alege, de asemenea, dacă vizitatorii pot extinde mai multe submeniuri simultan folosind setările „Accordion Folding”. 

Pentru a schimba alinierea și lățimea meniului, fă clic pe fila „Layout & Position”.

Plasarea meniului colapsabil pe site-ul WordPress.

Dacă preferați să previzualizați modificările în timp real, puteți edita meniul barei laterale retractabile în Personalizatorul WordPress.

Pentru a face acest lucru, accesați pagina Aspect » Personalizare din zona de administrare și selectați fila „Bellows” din coloana din stânga.

Configurarea meniului retractabil în Personalizatorul WordPress.

Aici veți găsi o mulțime de setări diferite pentru bara laterală. Acestea includ modificarea lățimii, alinierii și culorii meniului barei laterale retractabile. 

Bonus: Trucuri pentru bara laterală WordPress pentru rezultate maxime

Odată ce ați creat un meniu retractabil în bara laterală, puteți folosi alte sfaturi pentru a genera mai multe lead-uri cu ajutorul barei laterale.

De exemplu, puteți face ca widget-ul din bara laterală să fie fix, astfel încât să fie vizibil pe pagină chiar și atunci când utilizatorul derulează în jos.

În afară de asta, poți adăuga un formular de contact sau un formular de înscriere prin e-mail în bara laterală pentru a-ți construi lista de e-mailuri. Pentru a face acest lucru, poți folosi WPForms, care este cel mai bun plugin de formulare de contact de pe piață.

La WPBeginner, îl folosim pentru a crea formulare de contact și sondaje anuale și ne place. Pentru a afla mai multe, consultați recenzia noastră completă despre WPForms.

Va trebui pur și simplu să creați un formular și apoi să îl adăugați în bara laterală folosind blocul WPForms din meniul de blocuri.

Adaugă blocul widget WPForms

Pentru mai multe detalii, puteți consulta tutorialul nostru despre cum să creați un formular de contact în WordPress.

În plus, puteți afișa cele mai populare postări în bara laterală, puteți adăuga imagini, afișa pictograme de rețele sociale și puteți afișa dovezi sociale. Acest lucru va încuraja utilizatorii să exploreze mai mult site-ul dvs. și va crește conversiile.

Pentru mai multe sfaturi, puteți consulta lista noastră cu cele mai bune trucuri pentru bara laterală WordPress pentru rezultate maxime.

Tutorial video

Dacă nu preferați instrucțiuni scrise, atunci urmăriți tutorialul nostru video.

Abonează-te la WPBeginner

Întrebări frecvente despre meniurile laterale pliabile în WordPress

Iată câteva întrebări pe care cititorii noștri le-au adresat frecvent înainte de a adăuga un meniu lateral pliabil pe site-urile lor:

Cum pliez un meniu în WordPress?

Puteți plia un meniu folosind un plugin precum Bellows Accordion Menu. În mod implicit, meniurile WordPress nu au această funcționalitate pe ecranele desktop. Un plugin adaugă codul necesar pentru ca elementele să se extindă și să se ascundă la clic.

Cum adaug o secțiune pliabilă în WordPress?

Cea mai ușoară metodă este să folosiți blocul implicit WordPress „Details”. Acest bloc vă permite să încadrați conținutul într-o linie de rezumat clicabilă. Pentru stilizare mai avansată în cadrul postărilor dvs., puteți utiliza un plugin dedicat pentru acordeon.

Cum creez un meniu dropdown în WordPress?

Puteți crea un meniu dropdown accesând Aspect » Meniuri în tabloul de bord. Pur și simplu trageți un element de meniu ușor spre dreapta, sub un link părinte. Această indentare îi spune WordPress să afișeze acel element într-o listă dropdown.

Pentru mai multe detalii, consultați tutorialul nostru despre crearea unui meniu dropdown în WordPress.

Cum pun elemente unul lângă altul în WordPress?

Puteți pune elemente unul lângă altul folosind blocul Coloane. În editorul de blocuri, selectați „Coloane” și alegeți aspectul preferat. Apoi, pur și simplu adăugați textul sau imaginile în fiecare coloană.

Ce este pluginul de bloc acordeon pentru WordPress?

Un plugin de bloc acordeon vă permite să adăugați secțiuni de conținut pliabile la postările dvs. Ajută la organizarea conținutului lung prin ascunderea textului sub titluri. Utilizatorii fac pur și simplu clic pe titlu pentru a citi informațiile de care au nevoie.

Dacă doriți să adăugați acordioane pe site-ul dvs., consultați selecția noastră de top pentru cele mai bune pluginuri WordPress pentru acordioane.

Sperăm că acest articol v-a ajutat să învățați cum să creați un meniu lateral colapsabil în WordPress. Pentru mai multe sfaturi despre personalizarea designului site-ului dvs. WordPress, puteți consulta, de asemenea, ghidurile noastre despre cum să vă personalizați antetul WordPress și cele mai utile widgeturi WordPress pentru site-ul dvs.

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.

Dezvăluire: Conținutul nostru este susținut de cititori. Acest lucru înseamnă că dacă faceți clic pe unele dintre linkurile noastre, este posibil să câștigăm un comision. Vedeți cum este finanțat WPBeginner, de ce contează și cum ne puteți susține. Iată procesul nostru editorial.

Cel mai bun instrumentar WordPress

Obține acces GRATUIT la instrumentarul nostru - o colecție de produse și resurse legate de WordPress pe care fiecare profesionist ar trebui să le aibă!

Interacțiuni cu cititorii

6 CommentsLeave a Reply

  1. Mulțumesc pentru acest ghid, dacă am înțeles corect, asta înseamnă că pluginul va genera un shortcode care poate fi plasat oriunde pe site, chiar și în interiorul unui articol?

    • Deși ați putea încerca să utilizați shortcode-ul în alte locații, chiar dacă funcționează, este posibil să nu se afișeze într-un mod util.

    • Am încercat și, da, ideea ta este corectă. Chiar funcționează. Cu toate acestea, merită să te gândești cum îl vei folosi în final. Pentru că în cazul meu, nu am găsit nicio altă utilizare pentru el, în afară de bara laterală. Dar poate site-ul tău este diferit și vei găsi o utilizare pentru el. Deci, răspunsul la întrebarea ta este da, funcționează așa cum ai descris.

  2. Pentru site-urile web care au multe categorii, aceasta este opțiunea perfectă pentru a face bara laterală clară. Acum am aproximativ 15 categorii pe site și mă gândesc la ceva similar cu acordeonul. Mulțumesc pentru inspirație.

  3. Mulțumesc pentru asta. Cum poți ajusta spațiul dintre subcategorii? Am multe categorii și faptul că pare a fi un spațiu dublu între ele face meniurile foarte lungi.

Lăsați un răspuns

Vă mulțumim că ați ales să lăsați un comentariu. Vă rugăm să rețineți că toate comentariile sunt moderate conform politicii noastre de comentarii, iar adresa dvs. de e-mail NU va fi publicată. Vă rugăm să NU folosiți cuvinte cheie în câmpul nume. Să avem o conversație personală și semnificativă.