Cum să adăugați pictograme pentru rețelele sociale în meniul WordPress

Publicat: 2020-10-24

Indiferent dacă conduceți o afacere sau un site personal, trebuie să vă asigurați că utilizatorii vă pot distribui conținutul pe rețelele sociale. De aceea, în această postare, vă vom arăta cum să adăugați pictograme pentru rețelele sociale în meniul dvs. WordPress .

De ce să adăugați pictograme Social Media la meniul WordPress?

Potrivit unor studii recente, aproape 50% din populația globală folosește cel puțin o rețea socială. Conectarea site-ului dvs. la Facebook sau adăugarea feedurilor Instagram la site-ul dvs. sunt opțiuni bune, dar puteți face altceva pentru a vă crește prezența pe rețelele sociale. Meniul este unul dintre cele mai proeminente elemente de pe site-ul dvs. În plus, este unul dintre primele lucruri pe care utilizatorii le văd atunci când vă vizitează site-ul. De exemplu, aruncați o privire la meniul principal al site-ului nostru web.

antet quadlayers Așadar, pentru a vă personaliza site-ul și a profita la maximum de canalele de rețele sociale, puteți adăuga pictograme de rețele sociale în meniul dvs. WordPress. În plus, puteți afișa pictograme în alte zone ale site-ului dvs. care acceptă widget-uri, cum ar fi subsolul, bara laterală și așa mai departe.

Chiar dacă unele teme precum Divi includ unele opțiuni pentru a adăuga pictograme de rețele sociale în meniu, majoritatea temelor nu vin cu această funcție. Și nici WordPress nu include o funcție nativă pentru a include pictograme în meniu.

Deci, în această postare, vă vom arăta trei metode de a adăuga cu ușurință pictograme pentru rețelele sociale în meniul dvs. WordPress .

Cum să adăugați pictograme Social Media în meniul dvs. WordPress

Există trei moduri principale de a adăuga pictograme pentru rețelele sociale în meniul WordPress:

  1. Cu pluginuri
    1. QuadMenu
    2. Pictograme sociale WP
  2. Din personalizarea temei
  3. Folosind manual pictogramele FontAwesome

În acest ghid, vom descrie fiecare metodă pas cu pas, astfel încât să o puteți alege pe cea care vă place cel mai mult.

1) Pluginuri

Utilizarea pluginurilor este cea mai simplă modalitate de a include pictograme de rețele sociale în meniul dvs. Există mai multe opțiuni, așa că, pentru a vă ușura viața, am enumerat două dintre cele mai bune plugin-uri pe care le puteți utiliza.

1.1) QuadMenu

Adăugați pictograme Social Media în meniul WordPress - QuadMenu

QuadMenu este cel mai bun instrument pentru a personaliza cu ușurință și a duce meniurile WordPress la nivelul următor. Acesta este un plugin freemium. Există o versiune gratuită cu funcții de bază și trei planuri premium care vin cu funcții mai avansate și asistență prioritară.

prețuri cu patru meniu

Pentru a adăuga pictograme pentru rețelele sociale în meniu, aveți nevoie de versiunea premium. Deci, să vedem cum să-l instalăm și să activăm pluginul pe site-ul tău.

Instalare și activare

Mai întâi, trebuie să achiziționați pluginul și să descărcați fișierele pe desktop. Apoi, înainte de a-l instala, trebuie să instalați versiunea gratuită pe site-ul dvs. Pentru a face acest lucru, accesați tabloul de bord WP > Plugin-uri > Adăugați nou . Apoi, utilizați bara de căutare și căutați QuadMenu. După aceea, apăsați pe Instalare și apoi pe Activare .

instalați pluginul quadmenu

După activare, folosește fișierele versiunii premium pe care ai descărcat-o înainte și instalează-le pe site-ul tău.

instalați quadmenu premium Odată ce ați activat pluginul, va trebui să vă verificați cheia de licență. Din tabloul de bord al contului QuadMenu, veți vedea opțiunea de licențe.

licențe cu patru meniu

Copiați cheia de acolo și inserați-o în câmpul de licențe cu adresa de e-mail înregistrată pentru a vă verifica cheia.

opțiune de licențiere cu patru meniu

Pluginul este disponibil în magazinul nostru, Envato și Piața Elegant, așa că utilizați meniul drop-down pentru a selecta opțiunea potrivită pentru achiziția dvs. După ce ai verificat, ești gata.

Adăugați pictograme de rețele sociale în meniul dvs. WordPress cu QuadMenu

QuadMenu funcționează cu orice temă gratuită sau premium. Pentru această demonstrație, vom folosi GeneratePress, dar procesul este similar cu orice altă temă. Mai întâi, să mergem la setările pluginului accesând QuadMenu > Opțiuni .

Adăugați pictograme pentru rețelele de socializare în meniul WordPress - opțiuni cu patru meniu Acolo, veți vedea mai multe opțiuni de personalizare, cum ar fi:

  • Meniu principal
  • Receptiv
  • Tema implicită
  • Personalizați
  • Social
  • Import Export
Configurați opțiunile sociale

În cazul nostru, trebuie să adăugăm pictograme pentru rețelele sociale în meniul nostru principal. Deci, vom selecta opțiunea Social .

opțiune socială

Veți vedea mai multe opțiuni implicite pe care le puteți edita sau șterge în funcție de canalele pe care le aveți. Au deja alocate pictograme cu profiluri de social media.

Cu toate acestea, le puteți personaliza și făcând clic pe butonul + Adăugați pictogramă . În plus, puteți adăuga noi canale de rețele sociale apăsând butonul + . adăugați pictograme

Să presupunem că doriți să schimbați pictograma Facebook. Apăsați + Adăugați pictograma și veți vedea o fereastră pop-up cu o mulțime de pictograme din care puteți alege.

toate pictogramele disponibile

Există multe pictograme, așa că vă recomandăm să utilizați funcția de căutare pentru a filtra rezultatele.

caută pictograma fb După cum puteți vedea, am căutat pictograme Facebook. Vă va afișa toate pictogramele disponibile legate de interogarea dvs. de căutare, așa că selectați-o pe cea care vă place și salvați-o. De asemenea, puteți modifica titlurile și adresele URL. După ce ați făcut toate modificările dorite în QuadMenu, salvați setările.

salvați setările pluginului quadmenu

După aceea, accesați meniurile WordPress. Veți vedea acolo toate meniurile disponibile. Pentru a utiliza opțiunile QuadMenu din meniul dvs., trebuie să-l marcați ca QuadMenu Dev sub setările meniului . După aceea, salvați meniul.

Opțiunea de dezvoltare cu patru meniu

La următoarea încărcare a paginii, veți vedea opțiunile QuadMenu. opțiuni cu patru meniu

Sub elementele QuadMenu, veți vedea lista de pictograme sociale . Selectați-le și apăsați Adăugare la meniu .

adăugați pictograme sociale în meniu

După aceea, veți vedea secțiunea Social sub opțiunile meniului principal. Treceți mouse-ul peste și veți vedea opțiunile de personalizare QuadMenu.

icoane sociale cu patru meniu

Dacă aveți nevoie de personalizare suplimentară, selectați acea opțiune. În caz contrar, apăsați butonul Save Menu și sunteți gata.

Adăugați pictograme Social Media în meniul WordPress - Salvați meniul wordpress

Pictograme din meniu (Frontend)

Acum, este timpul să verificați rezultatele. Deci, accesați pagina de pornire a site-ului dvs. și veți vedea pictogramele sociale. Și când treceți cu mouse-ul peste ele, pictogramele vor fi redate.

Adăugați pictograme Social Media în meniul WordPress - QuadMenu final

Asta e! Ați adăugat cu succes pictograme de rețele sociale la meniurile dvs. WordPress cu QuadMenu .

1.2) Pictogramele meniului WP

Dacă nu vă puteți permite niciun plugin premium, nu vă faceți griji. Avem o soluție gratuită pentru tine. În această secțiune, vă vom arăta cum să adăugați pictograme de rețele sociale la WordPress cu un plugin gratuit numit WP Menu Icons. Adăugați pictograme pentru rețelele de socializare în meniul WordPress - plugin pentru pictograme de meniu WP

Instalare și activare

Mai întâi, instalați și activați pictogramele de meniu WP pe site-ul dvs.

instalați pluginul pentru pictograme de meniu wp Acest instrument este foarte ușor de utilizat și nu necesită personalizare suplimentară.

Personalizarea pictogramelor de meniu

Dacă nu aveți un meniu pe site-ul dvs., puteți crea unul din secțiunea de configurare. creați meniul

Atribuiți o locație meniului dvs. și apoi sunteți gata să adăugați elemente la acesta. Pentru a adăuga profilurile de rețele sociale în meniu, alegeți elementul Linkuri personalizate . Va trebui să introduceți adresa URL a paginii pe care doriți să o conectați și o etichetă. Apoi, apăsați Adăugare la meniu .

adaugă linkul Facebook la meniu După ce adăugați pictograma în meniu, pagina de configurare va arăta astfel.

fb adăugat în meniu În mod similar, puteți adăuga alte pictograme de rețele sociale. În acest caz, am adăugat pictograme Twitter, Pinterest și Instagram în meniul nostru.

profiluri sociale adăugate În elementele de meniu, există un buton + . Aceasta este setarea pe care trebuie să o utilizați pentru a adăuga pictograme la elementele de meniu, așa că faceți clic pe ea.

Adăugați pictograme Social Media în meniul WordPress - adăugați pictogramă Apoi, veți vedea o selecție mare de articole din care să alegeți.

toate icoanele Există zeci de pictograme, așa că utilizați funcția de căutare pentru a filtra rezultatele dorite. În acest caz, am selectat elementul de meniu Facebook, așa că vom căuta pictograma Facebook. pictograme facebook După ce îl selectați pe cel care vă place, veți vedea setările pictogramei în coloana din dreapta. Aici puteți afișa sau ascunde eticheta, puteți personaliza poziția, dimensiunea și alinierea. În acest caz, vom ascunde eticheta. După ce ați terminat cu personalizarea, faceți clic pe Salvați .

ascunde eticheta Puteți personaliza pictogramele Pinterest, Twitter și Instagram în același mod. După adăugarea pictogramelor necesare, salvați meniul.

Adăugați pictograme pentru rețelele sociale în meniul WordPress - pictograme pentru meniul WP Meniu Salvare Acum este timpul să verificați rezultatul. Accesați interfața site-ului dvs. și veți vedea noile pictograme.

Adăugați pictograme de rețele sociale în meniul WordPress - pictograme de meniu WP în frontend

Așa puteți adăuga pictograme pentru rețelele sociale la meniurile de antet în WordPress cu WP Menu Icons . În cele din urmă, puteți, de asemenea, să vă stilați pictogramele din pagina de setări pentru pictograme din meniul WP.

2) Adăugați pictograme Social Media cu Personalizatorul de teme

Dacă nu doriți să instalați niciun plugin, puteți include pictograme pentru rețelele de socializare în meniuri folosind personalizarea temei. Unele teme premium, cum ar fi Divi, Newspaper sau Avada, vin cu panouri tematice integrate care vă permit să personalizați tema și să adăugați pictograme pentru rețelele sociale.

Dacă nu sunteți sigur dacă tema dvs. vine cu opțiunea de a adăuga pictograme pentru rețelele sociale, în tabloul de bord WordPress accesați Aspect > Personalizare > Meniuri > Vizualizare locații și verificați dacă există un meniu social sau o opțiune de pictogramă socială.

Pentru demonstrația noastră, vom folosi tema Divi de la Elegant Themes. Mai întâi, accesați tabloul de bord WP > Aspect > Personalizare .
personalizați tema divi wordpress

Apoi, accesați personalizarea antetului și elementele antetului. Acolo, veți vedea o opțiune pentru a activa pictogramele sociale de antet.

arată pictogramele sociale din antet

Activați această opțiune și apoi o veți vedea în antetul site-ului dvs. web. icoane sociale divi

În plus, le puteți personaliza accesând Divi > Opțiuni teme .

Adăugați pictograme pentru rețelele sociale în meniul WordPress - Personalizator de teme Divi

Acolo, puteți activa pictogramele dorite și puteți introduce adresa URL a profilurilor de rețele sociale. Pictogramele rețelelor sociale vor apărea în mod implicit atât în ​​antetul, cât și în subsolul site-ului dvs.

Adăugați pictograme Social Media în meniul WordPress - pictograme Divi la subsol

Cu toate acestea, puteți alege să le ascundeți prin setările de personalizare.

ascunde pictogramele de subsol Alte teme precum Newspaper și Newsmag au propriile opțiuni de personalizare, astfel încât să puteți activa/dezactiva pictogramele și să le afișați chiar prin panoul tematic dedicat. Dacă nu găsiți secțiunea de pictograme pentru rețelele sociale în personalizarea temei sau panoul, nu ezitați să lăsați un comentariu mai jos și vom încerca să vă ajutăm.

3) Utilizarea FontAwesome

În cele din urmă, puteți adăuga manual pictograme pentru rețelele sociale în meniurile dvs. din WordPress. Chiar dacă nu sunteți dezvoltator sau nu aveți abilități de codare, puteți afișa pictograme de rețele sociale cu puțin cod HTML. Pentru a face asta, vom folosi pictogramele FontAwesome.

Deci, primul lucru pe care trebuie să-l faceți este să accesați site-ul web FontAwesome.

Adăugați pictograme Social Media în meniul WordPress - Fontawesome

Utilizați funcția de căutare pentru a găsi pictogramele de care aveți nevoie. Pentru această demonstrație, vom căuta pictograme Twitter .

pictograme Twitter

Pe pagina următoare, site-ul web vă va afișa rezultatele căutării. Alegeți-l pe cel care vă place cel mai mult.

selectați logo-ul

Pe pagina următoare, veți vedea detaliile pictogramei selectate, așa că pur și simplu copiați codul HTML al pictogramei. Adăugați pictograme Social Media în meniul WordPress - HTML

Adăugarea de pictograme Font Awesome la WordPress

Apoi, accesați secțiunea meniuri de pe site-ul dvs. WordPress. În partea stângă, veți vedea secțiunea de linkuri personalizate. Va trebui să introduceți adresa URL a profilului dvs. Twitter și să lipiți codul HTML pe care tocmai l-ați copiat în câmpul Link Text . După ce ați făcut asta, apăsați Adăugare la meniu . adăugați în meniu

După aceea, salvați modificările. Apoi, accesați interfața site-ului dvs. și veți vedea pictograma.

pictograma twitter pe frontend

În acest fel, veți putea adăuga orice pictogramă de social media în meniul dvs. .

Codul HTML nu funcționează

Dacă ați urmat fiecare pas din acest tutorial, dar HTML-ul nu funcționează, încercați acest lucru. Dacă codul fab nu funcționează, încercați să schimbați codul HTML eliminând b din fab .

Deci, de exemplu, în cazul nostru, codul HTML final va arăta astfel <i class="fa fa-twitter”></i> în loc de <i class="fab fa-twitter”></i> . Exemplu: Adăugați pictograme Social Media în meniul WordPress - cod HTML modificat

Adăugați pictograme pentru rețelele sociale în antetul WordPress

Antetul este unul dintre cele mai populare locuri în care este posibil să doriți să adăugați pictograme pentru rețelele sociale, așa că haideți să vedem rapid cum să faceți acest lucru folosind Personalizarea temei.

Rețineți că veți avea nevoie de o temă care vă oferă opțiunea de a adăuga pictograme pentru rețelele sociale în meniu. De asemenea, rețineți că pașii pot fi ușor diferiți în funcție de tema dvs., dar ar trebui să puteți urma pașii fără probleme în majoritatea temelor.

Să aruncăm o privire la două opțiuni: crearea unui nou meniu și editarea unuia existent.

Adăugarea pictogramelor de rețele sociale la antet într-un meniu nou

  1. În tabloul de bord WordPress, accesați Aspect > Meniuri
  2. Apăsați linkul Creați un nou meniu de lângă butonul Selectați și dați-i un nume
  3. Acum puteți adăuga pictogramele la acesta. Selectați noul meniu și introduceți rețelele sociale și adresele URL pe care doriți să le includeți (Instagram, Facebook, YouTube și așa mai departe) și apăsați Adăugare la meniu
  4. Salvați modificările
  5. După aceea, plasați meniul pe care tocmai l-ați creat în secțiunea antet
  6. Salvează modificările și gata! Așa adaugi pictograme de rețele sociale în antetul WordPress!

Adăugarea pictogramelor de rețele sociale la antet într-un meniu existent

  1. În tabloul de bord WordPress, accesați Aspect > Personalizare > Meniuri
  2. Accesați secțiunea Antet și apăsați butonul Adăugați articole
  3. Apoi selectați pictograma platformei de socializare pe care doriți să o adăugați, introduceți adresa URL și apăsați Adăugare la meniu . Trebuie să faceți același lucru pentru fiecare rețea socială pe care doriți să o adăugați
  4. Selectați locația meniului în care doriți să afișați pictogramele. Opțiunile pe care le aveți vor depinde de tema dvs.
  5. Salvați modificările. Asta e!

Alternativ, dacă doriți să adăugați pictograme la subsol, de exemplu, urmați același proces, dar selectați Subsolul ca locație pentru pictograme.

Bonus: deschideți pictogramele rețelelor sociale într-o filă nouă

Adăugarea pictogramelor rețelelor sociale în meniul WordPress vă va ajuta să vă creșteți prezența în rețelele sociale. Cu toate acestea, problema este că atunci când un utilizator dă clic pe pictograma din meniul tău, pagina rețelei sociale se va încărca în aceeași fereastră, iar utilizatorul va părăsi site-ul tău. Soluția este să faceți pictograma rețelei sociale să încarce pagina într-o filă nouă. Să vedem cum se face.

În tabloul de bord WordPress, accesați Aspect > Meniuri , deschideți Opțiunile ecranului din dreapta sus și activați opțiunea Link Target . Apoi, accesați fiecare element de meniu și bifați caseta de selectare Deschidere într-o filă nouă . Alternativ, puteți seta fiecare țintă la _blank.

În sfârșit, salvează modificările și gata!

Cum să adăugați feeduri sociale pe site-ul dvs

Pe lângă adăugarea pictogramelor de rețele sociale în meniul dvs., puteți adăuga și fluxuri sociale pe site-ul dvs. pentru a crește implicarea cu utilizatorii dvs. În secțiune, vă vom arăta cum să conectați Instagram și TikTok la site-ul dvs. web.

Adăugați un feed Instagram la WordPress

Cel mai simplu mod de a conecta Instagram la site-ul tău este să folosești pluginul Social Feed Gallery. Este un instrument freemium care vă permite să afișați feedul Instagram în câteva clicuri.

Mai întâi, instalați și activați pluginul din acest link. Apoi, accesați Galeria Social Feed și conectați -vă la contul dvs. de Instagram.

După aceea, accesați Galeria de feeduri sociale > Conturi și veți avea opțiunea de a vă conecta la contul dvs. personal sau de afaceri (rețineți că contul de afaceri are mai multe opțiuni). Apoi, adăugați un cont, conectați-vă și acordați aplicației permisiunile necesare pentru a vă conecta contul la WordPress.

După ce ați terminat, accesați fila Fluxuri , apăsați pe +Feed și adăugați fluxul pe care doriți să îl afișați. În cele din urmă, personalizați-vă feedul și odată ce ați terminat, veți vedea că pluginul vă oferă un shortcode pe care îl puteți lipi pe orice pagină sau postare pentru a vă afișa feedul.

Pentru mai multe informații, consultați ghidul nostru despre cum să integrați Instagram cu WordPress.

Adăugați un feed TikTok la WordPress

În mod similar, vă puteți conecta site-ul cu TikTok. Pentru a afișa fluxurile TikTok, vom folosi un plugin dedicat numit WP TikTok Feed. Acesta este cel mai popular plugin TikTok pentru WordPress și are o versiune gratuită și câteva planuri premium.

După instalarea și activarea pluginului, în tabloul de bord WordPress , trebuie să vă conectați contul TikTok și apoi să accesați Tiktok Feed > Feeds . Acolo, apăsați pe +Feed și adăugați feedul pe care doriți să îl afișați. În plus, veți vedea mai multe opțiuni pentru a personaliza modul în care afișați feedul pe site-ul dvs.

Pentru mai multe informații despre aceasta, consultați tutorialul nostru despre cum să încorporați videoclipuri TikTok în WordPress.

Concluzie

Una peste alta, adăugarea pictogramelor pentru rețelele sociale la meniurile tale WordPress este o modalitate excelentă de a-ți spori prezența în rețelele sociale. În acest ghid, am văzut 3 moduri diferite de a face acest lucru:

  1. Cu pluginuri
  2. Din personalizarea temei
  3. Manual

Dacă tema dvs. vă permite să adăugați pictograme în mod implicit, nu trebuie să utilizați niciun plugin suplimentar sau cod HTML. Dacă preferați un plugin, vă recomandăm să utilizați QuadMenu. Vă va permite să obțineți controlul deplin asupra întregii personalizări a meniului WordPress și, de asemenea, vine cu o mulțime de funcții puternice.

Cu toate acestea, dacă preferați o soluție gratuită, aruncați o privire la Pictogramele meniului WP. Este un instrument simplu care vă va ajuta să includeți pictograme sociale în cel mai scurt timp.

Pe de altă parte, dacă nu doriți să instalați niciun plugin, puteți adăuga pictograme de rețele sociale folosind un pic de pictograme HTML și FontAwesome. Această opțiune vă permite, de asemenea, să personalizați pictogramele cu un pic de CSS sau puteți evita partea de stil și să utilizați pictogramele implicite.

Ți s-a părut util acest articol? Dacă ai făcut-o, lasă-ne un comentariu mai jos și distribuie această postare pe rețelele sociale. Pentru mai multe tutoriale conexe, consultați următoarele ghiduri:

  • Cele mai bune plugin-uri pentru a adăuga feeduri de rețele sociale la WordPress
  • Cum să adăugați fluxuri de grup Facebook la WordPress