Cum să adăugați pictograme imagine la meniurile de navigare WordPress

De-a lungul anilor, am ajutat mii de cititori să-și personalizeze site-urile WordPress pentru a îmbunătăți atât experiența utilizatorului, cât și atractivitatea vizuală. Din experiența noastră practică cu designul web, am învățat că adăugarea de pictograme de imagini la meniurile de navigare WordPress poate îmbunătăți drastic utilizabilitatea site-ului dvs.

Acest lucru se datorează faptului că pictogramele de imagini pot oferi indicii vizuale intuitive vizitatorilor dvs., făcându-le mai ușor să vă navigheze site-ul. Astfel, interfața site-ului dvs. web este mai interactivă și mai captivantă, ceea ce ajută la reducerea ratei de respingere.

În acest articol, vă vom arăta cum să adăugați cu ușurință pictograme de imagini la meniurile de navigare în WordPress. 

De ce să adăugați pictograme imagine la meniurile de navigare în WordPress?

De obicei, meniurile de navigare WordPress sunt linkuri text simple. Aceste linkuri funcționează bine pentru majoritatea site-urilor web, dar nu arată întotdeauna interesante sau captivante. 

Prin adăugarea de pictograme de imagini la meniul de navigare, puteți încuraja vizitatorii să acorde atenție meniului și să exploreze mai mult site-ul dvs.

Dacă meniul dvs. are multe opțiuni diferite, atunci pictogramele imagine pot facilita scanarea conținutului de către vizitatori și găsirea a ceea ce caută. Aceasta poate fi o modalitate ușoară de a crește vizualizările paginilor și de a reduce rata de respingere în WordPress. 

Ați putea chiar să folosiți o pictogramă imagine pentru a evidenția cel mai important element de meniu, cum ar fi linkul de Finalizare comandă în piața dvs. online. 

Prin evidențierea unui apel la acțiune în meniu, puteți obține adesea mai multe înscrieri, vânzări, membri și alte conversii.

Acestea fiind spuse, să vedem cum puteți adăuga pictograme imagine la meniul de navigare WordPress. Pur și simplu folosiți linkurile rapide de mai jos pentru a sări direct la metoda pe care doriți să o utilizați:

• Metoda 1: Adăugați pictograme imagine la meniurile de navigare folosind un plugin (rapid și ușor)
• Metoda 2: Adăugați pictograme la meniurile WordPress folosind cod (mai personalizabil)
• Bonus: Adăugați pictograme de rețele sociale la meniurile WordPress

Metoda 1: Adăugați pictograme imagine la meniurile de navigare folosind un plugin (rapid și ușor)

Cel mai simplu mod de a adăuga pictograme la meniurile WordPress este prin utilizarea Menu Image. Acest plugin vine cu pictograme dashIcon pe care le puteți adăuga cu doar câteva clicuri.

Dacă ați configurat Font Awesome pe site-ul dvs. web, atunci puteți adăuga cu ușurință aceste pictograme la meniul de navigare folosind Menu Image. Pentru mai multe informații despre cum să instalați Font Awesome, consultați ghidul nostru despre cum să adăugați cu ușurință fonturi cu pictograme la tema dvs. WordPress.

O altă opțiune este să folosiți imagini sau pictograme din biblioteca media WordPress.

Primul lucru pe care trebuie să îl faceți este să instalați și să activați pluginul Menu Image. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum se instalează un plugin WordPress.

La activare, faceți clic pe Imagine meniu în tabloul de bord WordPress. Pe acest ecran, puteți alege dacă doriți să primiți notificări de securitate și funcționalități sau să faceți clic pe butonul „Omite”.

Acest lucru vă va duce la un ecran unde puteți configura setările pluginului. Pentru început, veți vedea toate dimensiunile diferite pe care le puteți utiliza pentru pictogramele de imagine.

Dacă intenționați să utilizați pictograme de la Font Awesome sau dashicons, atunci Menu Image le va redimensiona automat. Cu toate acestea, dacă utilizați imagini din biblioteca media, atunci va trebui să selectați dimensiunea manual.

Pluginul suportă dimensiunile implicite ale imaginilor WordPress WordPress image sizes, cum ar fi miniaturi, imagini și mari. De asemenea, adaugă trei dimensiuni unice care sunt setate implicit la 24×24, 36×36 și 48×48 pixeli.

Aceste setări ar trebui să funcționeze bine pentru majoritatea site-urilor web, dar puteți face pictogramele mai mari sau mai mici tastând numere diferite pentru prima, a doua sau a treia dimensiune a imaginii meniului.

Când adăugați pictograme la meniul dvs., veți vedea implicit un câmp „imagine la hover”. Acest lucru vă permite să afișați o pictogramă diferită atunci când vizitatorul trece cu mouse-ul peste acel element de meniu.

Doar fiți conștient că această setare este disponibilă numai atunci când utilizați propriile imagini. Nu trebuie să vă faceți griji cu privire la funcția „imagine la hover” dacă intenționați să utilizați pictograme dashIcons sau Font Awesome.

Afișarea unei pictograme diferite poate ajuta vizitatorii să vadă unde se află în meniul de navigare. Acest lucru este deosebit de util dacă meniul dvs. are multe elemente diferite. De exemplu, ați putea folosi culori sau dimensiuni diferite ale pictogramei pentru a evidenția elementul selectat în prezent.

Dacă doriți să creați efecte diferite la hover, asigurați-vă că bifați „Activați câmpul imagine la hover”.

Cu aceasta făcută, faceți clic pe „Salvare modificări” pentru a stoca setările.

Pentru a adăuga pictograme la meniul de navigare, accesați pagina Aspect » Meniuri. Implicit, WordPress va afișa meniul principal al site-ului dvs.

Dacă doriți să editați un alt meniu, atunci pur și simplu deschideți meniul derulant „Selectați un meniu de editat” și alegeți un meniu din listă. După aceea, faceți clic pe „Selectați”.

Acum, plasați cursorul peste primul element de meniu unde doriți să adăugați o pictogramă. Când apare „Imagine meniu”, faceți clic pe ea.

Acum puteți decide dacă să folosiți propria imagine sau să alegeți o pictogramă gata făcută, cum ar fi o pictogramă Font Awesome.

Pentru a utiliza o pictogramă gata făcută, faceți clic pe butonul radio de lângă „Pictograme”.

Puteți apoi să faceți clic pentru a selecta orice pictogramă dashicon sau Font Awesome.

Dacă doriți să utilizați propria imagine, selectați butonul radio de lângă „Imagine” și faceți clic pe linkul „Setare imagine”.

Acum puteți alege o imagine din biblioteca media WordPress sau puteți încărca un fișier nou de pe computerul dvs.

Dacă ați bifat câmpul „Activați imaginea la trecerea cu mouse-ul” în setările pluginului, atunci va trebui, de asemenea, să faceți clic pe „Setare imagine la trecerea cu mouse-ul”.

Acum, alegeți o imagine de afișat atunci când utilizatorul trece cu mouse-ul peste acest element de meniu.

Uneori, este posibil să doriți să ignorați această setare și să afișați aceeași pictogramă indiferent de situație. Pentru a face acest lucru, faceți clic pe „Set image on hover” și apoi alegeți exact aceeași pictogramă.

Dacă nu selectați o imagine, atunci pictograma va dispărea complet atunci când vizitatorul trece cu mouse-ul peste ea.

După aceea, deschideți meniul derulant Dimensiune imagine și alegeți o dimensiune din listă.

Utilizarea aceleiași dimensiuni pentru toate pictogramele tinde să facă meniul să pară mai organizat. Cu toate acestea, uneori este o idee bună să folosiți o pictogramă mai mare pentru cel mai important element.

De exemplu, dacă ați creat un magazin online folosind un plugin precum WooCommerce, atunci ați putea folosi o pictogramă mai mare pentru „Finalizare comandă” pentru a o face să iasă în evidență.

Când sunteți mulțumit de pictogramă, este timpul să vă uitați la eticheta elementului de meniu. În mod implicit, pluginul afișează eticheta titlului după pictogramă.

Pentru a schimba acest lucru, selectați oricare dintre butoanele radio din secțiunea „Poziția titlului”.

O altă opțiune este să eliminați complet eticheta de navigare și să creați un meniu doar cu pictograme. Dacă meniul dvs. are multe elemente, acest lucru îl poate face să pară mai puțin aglomerat.

Cu toate acestea, ar trebui să ascundeți etichetele doar dacă este evident ce înseamnă fiecare pictogramă. Dacă este neclar, vizitatorii vor avea dificultăți în a naviga pe blogul sau site-ul dvs. WordPress.

Pentru a ascunde eticheta, selectați butonul radio de lângă „Niciuna”.

Când sunteți mulțumit de modul în care este configurat elementul de meniu, faceți clic pe „Save Changes”.

Pentru a adăuga o pictogramă la alte elemente de meniu, urmați pur și simplu același proces descris mai sus.

Când ați terminat, nu uitați să faceți clic pe butonul „Salvează meniul”. Acum, dacă vizitați site-ul dvs. WordPress, veți vedea meniul de navigare actualizat în direct.

Metoda 2: Adăugați pictograme la meniurile WordPress folosind cod (mai personalizabil)

Puteți adăuga, de asemenea, pictograme de imagini la meniurile de navigare folosind CSS.

În acest fel, puteți controla exact unde apar pictogramele în meniurile dvs. Puteți folosi, de asemenea, orice imagine ca pictogramă, deci este o modalitate excelentă de a adăuga propria marcă.

Înainte de a începe, încărcați toate fișierele imagine pe care doriți să le utilizați ca pictograme. Acestea pot fi fotografii de stoc, imagini gratuite pe care le-ați găsit online sau grafice personalizate create folosind o aplicație precum Canva.

După ce ați adăugat fiecare imagine în biblioteca media WordPress, asigurați-vă că îi copiați URL-ul și îl lipiți într-un editor de text precum Notepad. Veți avea nevoie de toate aceste linkuri în pasul următor.

Pentru a găsi URL-ul unei imagini, pur și simplu selectați-o în biblioteca media WordPress și apoi căutați câmpul „URL fișier”.

Pentru instrucțiuni mai detaliate, consultați ghidul nostru despre cum să obțineți URL-ul imaginilor pe care le încărcați în WordPress.

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

Apoi, deschideți meniul derulant „Selectați un meniu de editat” și alegeți meniul unde doriți să adăugați pictogramele imagine.

După aceea, continuați și faceți clic pe „Selectați”.

Apoi, trebuie să activați clasele CSS personalizate făcând clic pe „Opțiuni ecran”.

În panoul care apare, bifați căsuța de lângă „Clase CSS”.

Cu aceasta finalizată, puteți adăuga clase CSS personalizate oricărui element din meniul de navigare. Acesta este modul în care veți lega fiecare element de meniu de o imagine din biblioteca media WordPress.

Puteți numi aceste clase cum doriți, dar este o idee bună să folosiți ceva ce vă ajută să identificați elementul de meniu.

Pentru a începe, pur și simplu faceți clic pe primul element la care doriți să adăugați o pictogramă imagine. În câmpul „Clase CSS (opțional)”, introduceți numele clasei pe care doriți să o utilizați.

Veți utiliza aceste clase CSS personalizate în pasul următor, așa că notați-le în Notepad sau într-o aplicație similară.

Pur și simplu urmați același proces pentru a adăuga o clasă separată tuturor elementelor din meniul dvs. După aceea, faceți clic pe „Save Menu” pentru a salva setările.

Acum sunteți gata să adăugați pictograme de imagini la meniurile de navigare WordPress folosind CSS.

Adesea, tutorialele WordPress vă vor spune să adăugați fragmente de cod în fișierele temei WordPress. Cu toate acestea, acest lucru poate cauza erori comune WordPress și nu este foarte prietenos pentru începători.

De aceea recomandăm WPCode.

Este cel mai bun plugin de fragmente de cod WordPress utilizat de peste 1 milion de site-uri web și vă permite să adăugați cod personalizat fără a edita fișierul functions.php al temei dumneavoastră.

Primul lucru pe care trebuie să îl faceți este să instalați și să activați pluginul gratuit WPCode. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, accesați Fragmente de cod » Adaugă fragment.

Acest lucru vă va duce la pagina „Adăugare fragment”, unde puteți vedea biblioteca de fragmente gata făcute a WPCode. Acestea includ fragmente care vă permit să îmbunătățiți securitatea WordPress prin dezactivarea XML-RPC, încărcarea tipurilor de fișiere pe care WordPress nu le acceptă implicit și multe altele.

Pur și simplu plasează cursorul mouse-ului peste „Adaugă codul tău personalizat” și apoi dă clic pe „Utilizează fragmentul” când acesta apare.

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

Cu asta făcut, deschideți meniul derulant „Tip cod” și selectați „Fragment CSS”.

În editorul de cod, va trebui să adăugați cod pentru fiecare pictogramă pe care doriți să o afișați.

Pentru a vă ajuta, am creat un fragment de exemplu mai jos. Puteți merge mai departe și schimbați „.carticon” cu clasa CSS personalizată pe care ați creat-o în pasul anterior. De asemenea, va trebui să înlocuiți URL-ul cu un link către imaginea din biblioteca media WordPress:

.carticon {
background-image: url('http://localhost:10013/wp-content/my-media/cartcheckout.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

Va trebui să ajustați fragmentul de cod de mai sus pentru fiecare element de meniu individual pe care l-ați creat mai sus.

Când sunteți mulțumit de codul dvs., derulați la secțiunea „Inserare”. WPCode poate adăuga cod în diferite locații, cum ar fi după fiecare postare, doar pe frontend sau doar în administrator.

Pentru a utiliza codul CSS personalizat pe întregul blog sau site web WordPress, faceți clic pe „Inserare automată” dacă nu este deja selectat.

Apoi, deschideți meniul derulant „Locație” și alegeți „Antet la nivel de site”.

După aceea, sunteți gata să derulați în partea de sus a ecranului și să faceți clic pe comutatorul „Inactive” pentru ca acesta să devină „Active”.

În final, faceți clic pe „Salvați fragmentul” pentru a face CSS-ul personalizat live.

Acum, dacă vizitați site-ul dvs. web, veți vedea toate pictogramele de imagini din meniul de navigare.

În funcție de tema WordPress, este posibil să fie necesar să ajustați CSS-ul pentru ca pictogramele imaginilor să apară exact în locul potrivit. Dacă acesta este cazul, accesați Fragmente de cod » Fragmente de cod în tabloul de bord WordPress.

Apoi, pur și simplu treceți cu mouse-ul peste fragment și faceți clic pe linkul „Editare” atunci când apare.

Aceasta deschide editorul de cod, care este gata pentru a face câteva modificări.

Bonus: Adăugați pictograme de rețele sociale la meniurile WordPress

Pe lângă pictogramele meniului, puteți adăuga și pictograme pentru rețelele sociale în meniul de navigare WordPress. Acest lucru va ajuta la promovarea profilurilor dvs. de rețele sociale într-un mod vizual atractiv, fără a ocupa prea mult spațiu pe site-ul dvs.

Pentru a face acest lucru, puteți utiliza pluginul Menu Image. După activare, pur și simplu vizitați pagina Aspect » Meniuri din tabloul de bord WordPress și extindeți fila „Linkuri personalizate” din coloana din stânga.

Apoi, adăugați URL-ul pentru ID-ul dvs. de rețea socială și introduceți numele platformei. Apoi, faceți clic pe butonul „Adăugare la meniu”.

Odată ce profilul de rețea socială a fost adăugat ca element de meniu, acesta va fi afișat în partea dreaptă a ecranului.

Aici, trebuie să extindeți din nou fila elementelor și să faceți clic pe butonul ‘Menu Image’.

Aceasta va deschide o nouă fereastră pe ecran unde puteți face clic pe linkul „Setare imagine” pentru a încărca o pictogramă pentru rețelele sociale din biblioteca dvs. media.

Dacă doriți să adăugați o pictogramă predefinită, atunci puteți selecta opțiunea „Pictogramă” și puteți adăuga pictograma rețelei sociale din FontAwesome.

În final, faceți clic pe butonul „Salvează modificările” pentru a stoca setările.

Acum ați adăugat cu succes o pictogramă de rețea socială la meniul de navigare. Pentru mai multe informații, consultați tutorialul nostru despre cum să adăugați pictograme de rețea socială în meniurile WordPress.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați pictograme de imagini în meniul de navigare WordPress. Puteți, de asemenea, să consultați ghidul nostru despre cum să adăugați logică condiționată la meniuri în WordPress și cum să creați un meniu de navigare plutitor fix în 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.