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.

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

Meniurile cele mai prietenoase cu utilizatorul oferă acces ușor la toate linkurile de care vizitatorii au nevoie. Cu toate acestea, acest lucru poate fi dificil pentru site-urile WordPress care au multe pagini sau un aspect mai complex. 

Gândiți-vă la un magazin mare de eCommerce care are o mulțime de categorii și subcategorii de produse, cum ar fi Amazon. 

Afișarea fiecărei categorii de produse într-un meniu standard nu ar fi o idee bună. Clienții ar trebui probabil să deruleze prin meniu pentru a găsi categoria de care sunt interesați. 

Aici intervin meniurile retractabile. Aceste meniuri organizează conținutul într-o abordare „părinte-copil”. Asta înseamnă că, dacă vizitatorul face clic pe un element părinte dintr-un meniu retractabil, acesta se va extinde pentru a afișa tot conținutul copil al acelui element părinte. 

Un exemplu în acest sens este publicația de știri Guardian, care folosește un meniu colapsabil pentru site-ul său mobil.

Meniurile colapsabile în bara laterală sunt uneori numite și meniuri extensibile. Acest lucru se datorează faptului că secțiunile lor diferite se extind atunci când un vizitator face clic pe ele. 

În mod implicit, meniurile retractabile ascund mult conținut și complexitate vizitatorilor. Acest lucru este mult mai ușor de utilizat decât derularea unei liste lungi de categorii și subcategorii pe blogul tău WordPress.

Acestea fiind spuse, să vedem cum puteți crea cu ușurință un meniu lateral colapsabil pe site-ul dvs. 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.

Acesta oferă un scurt cod util pentru a plasa meniul tău colapsabil pe orice pagină, postare sau zonă de widget, inclusiv în bara laterală.

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.

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

Pentru a începe, introduceți un nume pentru meniul dvs. în câmpul „Nume meniu”. Rețineți că vizitatorii site-ului dvs. nu vor vedea acest nume, deoarece este doar pentru referința dvs.

Puteți apoi face clic pe butonul „Creare meniu”. 

Apoi, alege paginile pe care vrei să le adaugi la meniul derulant din bara laterală. Implicit, WordPress afișează doar cele mai recente pagini ale tale.

Dacă doriți să vedeți o listă cu toate paginile site-ului dvs. web, faceți clic pe fila „Vizualizați tot”. 

Alternativ, poți face clic pe „Select All”. Aceasta va adăuga toate paginile tale la meniul derulant.

Odată ce ești mulțumit de selecția ta, fă clic pe butonul „Add to Menu”. Poți selecta, de asemenea, postări și categorii de bloguri sau poți adăuga linkuri personalizate. Pentru mai multe detalii, te rugăm să consulți ghidul nostru despre cum să adaugi un meniu de navigare în WordPress.

După ce ai adăugat toate paginile tale web în meniu, le poți muta prin tragere și plasare. Acest lucru va schimba ordinea în care apar aceste pagini în meniul tău colapsabil. 

Meniurile colapsabile se referă la relațiile părinte-copil.

Când un vizitator face clic pe un element părinte din meniul tău retractabil, acesta se va extinde pentru a dezvălui tot conținutul copil.

Pentru a crea această relație, pur și simplu folosește drag and drop pentru a aranja toate paginile copilului sub părintele lor.

Apoi, luați fiecare copil și trageți-l puțin spre dreapta. Puteți apoi să eliberați această pagină. Acest lucru va indentă elementul și îl va transforma într-o pagină copil. 

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

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”.

Acum poți face clic pe caseta Shortcode, care ar trebui să evidențieze tot codul. Acum, copiază acest cod folosind scurtătura de la tastatură Command + c sau Ctrl + c. 

Următorul pas este să lipiți acest shortcode într-un widget, așa că accesați pagina Aspect » Widgeturi din zona de administrare.

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ă.

Odată ce ați găsit zona barei laterale, faceți clic pe ea. Această secțiune se va extinde acum.

Pentru a adăuga un bloc, faceți clic pe pictograma + și începeți să tastați „Shortcode”. Când apare, selectați blocul „Shortcode”. 

Acum, pur și simplu lipiți shortcode-ul meniului colapsabil în acest bloc. Pentru a publica meniul, va trebui să faceți clic pe butonul „Actualizare” din partea de sus a ecranului. 

Acum, când vizitați site-ul dvs., ar trebui să vedeți un nou meniu colapsabil în bara laterală. 

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ă.

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”.

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.

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.

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

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.