Cum să adăugați meniuri de navigare personalizate în temele WordPress

La WPBeginner, am ajutat nenumărați cititori să-și personalizeze site-urile WordPress pentru a îmbunătăți experiența utilizatorului, a consolida brandul și a genera conversii. Și am văzut că, atunci când este făcut corect, un meniu de navigare unic poate ajuta la creșterea implicării și la menținerea oamenilor pe site-ul dvs. mai mult timp.

Problema este că toate temele WordPress au locații prestabilite unde puteți afișa un meniu de navigare, deci schimbarea acestuia poate fi dificilă. Acest lucru este valabil mai ales dacă sunteți începător, deoarece modificarea fișierelor temei este un proces delicat.

Când utilizați o temă de bloc, puteți face acest lucru cu Editorul complet al site-ului. Dar, din experiența noastră, există opțiuni mai bune care vor funcționa pentru toate tipurile de teme.

De exemplu, dacă doriți personalizări avansate, puteți folosi un constructor de pagini puternic precum SeedProd. Sau, dacă căutați o modalitate simplă de a utiliza cod personalizat, WPCode este de departe cea mai bună alegere.

În acest articol, vă vom arăta cum să adăugați un meniu de navigare personalizat în orice zonă a temei dvs. WordPress. Vă vom ghida prin 3 opțiuni diferite, astfel încât să puteți alege tutorialul potrivit nevoilor dvs.

De ce să adăugați meniuri de navigare personalizate în temele WordPress?

Un meniu de navigare este o listă de linkuri care indică zone importante ale site-ului dvs. web. Acestea facilitează găsirea de conținut interesant de către vizitatori, ceea ce poate crește numărul de vizualizări de pagină și să reducă rata de respingere în WordPress.

Locația exactă a meniului dvs. va varia în funcție de tema WordPress. Majoritatea temelor au mai multe opțiuni, astfel încât puteți crea meniuri diferite și le puteți afișa în locații diferite.

Pentru a vedea unde puteți afișa meniuri în tema dvs. WordPress actuală, accesați pur și simplu Aspect » Meniuri și apoi consultați secțiunea „Locație de afișare”.

Următoarea imagine arată locațiile care sunt acceptate de tema Astra WordPress.

Uneori, este posibil să doriți să afișați un meniu într-o zonă care nu este listată ca „Locație de afișare” în tema dvs.

Având în vedere acest lucru, să vedem cum să adăugăm un meniu de navigare personalizat în orice zonă a temei dvs. WordPress. Pur și simplu utilizați linkurile rapide de mai jos pentru a sări la metoda preferată:

• Metoda 1: Folosind Editorul complet al site-ului (doar teme bazate pe blocuri)
• Metoda 2: Utilizarea unui plugin Page Builder (funcționează cu toate temele)
• Method 3: Create a Custom Navigation Menu in WordPress Using Code (Advanced)

Metoda 1: Folosind Editorul complet al site-ului (doar teme bazate pe blocuri)

Dacă utilizați o temă de bloc precum ThemeIsle Hestia Pro, atunci puteți adăuga un meniu de navigare personalizat utilizând Editarea completă a site-ului (FSE) și editorul de blocuri.

Pentru mai multe detalii, puteți consulta articolul nostru despre cele mai bune teme WordPress pentru editarea completă a site-ului.

Această metodă nu funcționează cu orice temă și nu vă permite să personalizați fiecare parte a meniului. Dacă doriți să adăugați un meniu complet personalizat la orice temă WordPress, atunci vă recomandăm să folosiți în schimb un plugin de page builder.

Dacă utilizați o temă bazată pe blocuri, accesați Aspect » Editor.

În mod implicit, editorul complet al site-ului afișează șablonul de pagină principală al temei dvs., dar puteți adăuga un meniu de navigare în orice zonă.

Pentru a vedea toate opțiunile disponibile, selectați fie „Șabloane”, „Modele” sau „Pagini”.

Acum puteți face clic pe șablon, pe partea de șablon sau pe pagina unde doriți să adăugați un meniu de navigare personalizat.

WordPress va afișa acum o previzualizare a designului. Pentru a edita acest șablon, faceți clic pe pictograma mică cu creion.

Următorul pas este adăugarea unui bloc de Navigare în zona unde doriți să afișați meniul.

În colțul din stânga sus, faceți clic pe butonul albastru „+”.

Acum, continuați și tastați „Navigare” în bara de căutare.

Când apare blocul „Navigare”, pur și simplu trageți-l și plasați-l pe aspectul dvs.

Apoi, faceți clic pentru a selecta blocul de navigare.

Dacă ați creat deja meniul pe care doriți să îl afișați, faceți clic pentru a selecta blocul de Navigare. În meniul din dreapta, faceți clic pe pictograma cu trei puncte de lângă „Meniu”.

Puteți apoi alege un meniu din meniul derulant.

O altă opțiune este să construiți un meniu în editorul complet al site-ului, adăugând pagini, postări, linkuri personalizate și multe altele. Pentru a adăuga elemente în noul meniu, pur și simplu faceți clic pe pictograma „+”.

Aceasta deschide o fereastră pop-up unde adăugați orice postare sau pagină și decideți dacă aceste linkuri ar trebui să se deschidă într-o filă nouă.

Puteți, de asemenea, adăuga o bară de căutare în meniul WordPress, adăuga pictograme de rețele sociale și multe altele. În fereastra pop-up, pur și simplu tastați blocul pe care doriți să îl adăugați la meniu și selectați opțiunea corectă atunci când apare.

Puteți apoi configura acest bloc folosind setările din mini-bara de instrumente și meniul din dreapta. Pur și simplu repetați acești pași pentru a adăuga mai multe elemente în meniu.

Când sunteți mulțumit de aspectul meniului, pur și simplu faceți clic pe butonul „Salvați”.

Site-ul dvs. va folosi acum noul șablon, iar vizitatorii pot interacționa cu meniul dvs. de navigare personalizat.

Metoda 2: Utilizarea unui plugin Page Builder (funcționează cu toate temele)

Editorul complet al site-ului vă permite să adăugați meniuri la temele bazate pe blocuri. Cu toate acestea, dacă doriți să adăugați un meniu avansat, complet personalizabil, la orice temă WordPress, atunci veți avea nevoie de un plugin de tip page builder.

SeedProd este cel mai bun plugin de page builder pentru WordPress de pe piață, care vă permite să personalizați fiecare parte a meniului de navigare.

Avem o experiență vastă în utilizarea acestui instrument pentru a crea meniuri de navigare personalizate, pagini de destinație și multe altele. Pentru mai multe detalii, consultați recenzia noastră completă despre SeedProd.

Când vine vorba de pagini, SeedProd vine cu peste 350 de șabloane proiectate profesional pe care le puteți folosi ca punct de plecare. După alegerea unui șablon, puteți adăuga un meniu de navigare personalizat pe site-ul dvs. folosind blocul Nav Menu gata făcut de SeedProd.

Mai întâi, trebuie să instalați și să activați pluginul SeedProd. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activarea pluginului, SeedProd vă va solicita cheia de licență.

Puteți găsi aceste informații în contul dvs. pe site-ul SeedProd. După ce ați introdus cheia, faceți clic pe butonul „Verificați cheia”.

După ce ați făcut acest lucru, accesați SeedProd » Pagini de destinație și faceți clic pe butonul „Adăugați o pagină de destinație nouă”.

Acum puteți alege un șablon pentru pagina dvs. personalizată.

Pentru a vă ajuta să găsiți designul potrivit, toate șabloanele SeedProd sunt organizate pe diferite tipuri de campanii, cum ar fi în curând și campanii de tip lead squeeze. Puteți chiar folosi șabloanele SeedProd pentru a îmbunătăți pagina ta 404.

Pentru a privi mai atent orice design, pur și simplu plasați mouse-ul peste acel șablon și apoi faceți clic pe pictograma lupă.

Când găsești un design pe care vrei să-l folosești, fă clic pe „Alege acest șablon”.

Folosim șablonul „Pagina de vânzări de Black Friday” în toate imaginile noastre, dar puteți folosi orice șablon doriți.

După ce ați ales un șablon, introduceți un nume pentru acea pagină personalizată. SeedProd va crea automat un URL bazat pe titlul paginii, dar puteți schimba acest URL cu orice doriți.

De exemplu, puteți adăuga cuvinte cheie relevante pentru a ajuta motoarele de căutare să înțeleagă despre ce este vorba pe pagină. Acest lucru vă poate îmbunătăți SEO-ul WordPress și poate ajuta motorul de căutare să afișeze pagina persoanelor care caută conținut similar cu al dvs.

După ce ați introdus aceste informații, faceți clic pe butonul „Salvați și începeți editarea paginii”.

Majoritatea șabloanelor conțin deja unele blocuri, care sunt componentele de bază ale tuturor layout-urilor de pagină SeedProd.

Pentru a personaliza un bloc, faceți clic pentru a-l selecta în editorul de pagină.

Bara de instrumente din stânga va afișa acum toate setările pentru acel bloc. De exemplu, în imaginea de mai jos, schimbăm textul dintr-un bloc „Titlu”.

Puteți formata textul, îi puteți schimba alinierea, adăuga linkuri și multe altele, utilizând setările din meniul din stânga.

Dacă selectați fila „Avansat”, veți avea acces la și mai multe setări. De exemplu, puteți face ca blocul să iasă cu adevărat în evidență prin adăugarea de umbre de casetă și animații CSS.

Pentru a adăuga noi blocuri la designul dvs., pur și simplu găsiți orice bloc din meniul din stânga și apoi trageți-l pe pagină. Dacă doriți să ștergeți un bloc, faceți clic pentru a selecta acel bloc și apoi folosiți pictograma coșului de gunoi.

Deoarece dorim să creăm un meniu de navigare personalizat, trageți un bloc „Nav Menu” pe pagină.

Acest lucru creează un meniu de navigare cu un singur element implicit „Despre”.

Acum puteți fie să creați un meniu nou în editorul SeedProd, fie să alegeți un meniu pe care l-ați creat deja în panoul de administrare WordPress.

Pentru a afișa un meniu pe care l-ați creat anterior, faceți clic pe butonul „Meniu WordPress”. Puteți deschide acum meniul derulant „Meniuri” și alegeți orice opțiune din listă.

După aceea, puteți schimba dimensiunea fontului, alinierea textului și multe altele folosind setările din meniul din stânga.

Dacă doriți să creați un nou meniu în SeedProd, selectați butonul ‘Simplu’.

Apoi, faceți clic pentru a extinde elementul „Despre” pe care SeedProd îl creează în mod implicit.

Aceasta deschide niște controale unde puteți schimba textul și adăuga URL-ul la care va face legătura elementul de meniu.

Implicit, linkul va fi „dofollow” și se va deschide în aceeași fereastră de browser. Puteți modifica aceste setări utilizând casetele de selectare din secțiunea „Link URL”.

În imaginea următoare, creăm un link „nofollow” care se va deschide într-o fereastră nouă. Pentru mai multe informații despre acest subiect, vă rugăm să consultați ghidul nostru pentru începători despre linkuri nofollow.

Pentru a adăuga mai multe elemente în meniu, pur și simplu faceți clic pe butonul „Adăugare element nou”.

Puteți apoi personaliza fiecare dintre aceste elemente urmând același proces descris mai sus.

Meniul din stânga are, de asemenea, setări care modifică dimensiunea fontului și alinierea textului.

Puteți chiar crea o linie de separare, care va apărea între fiecare element din meniu.

După aceea, continuați și comutați la fila „Avansat”. Aici puteți modifica culorile meniului, spațierea, tipografia și alte opțiuni avansate.

Pe măsură ce faceți modificări, previzualizarea live se va actualiza automat, astfel încât să puteți încerca diferite setări pentru a vedea ce arată bine în designul dvs.

Implicit, SeedProd afișează același meniu pe dispozitive mobile și desktop. Cu toate acestea, dispozitivele mobile au, de obicei, ecrane mult mai mici comparativ cu computerele desktop.

Având în vedere acest lucru, s-ar putea să doriți să creați un meniu separat pentru a-l afișa pe dispozitive mobile. De exemplu, ați putea folosi un aspect vertical, astfel încât utilizatorii de mobil să nu fie nevoiți să deruleze lateral. S-ar putea să doriți, de asemenea, să afișați mai puține linkuri pe smartphone-uri și tablete.

Pentru a crea un meniu pregătit pentru mobil, pur și simplu proiectați meniul urmând același proces descris mai sus. Apoi, selectați fila „Avansat” și faceți clic pentru a extinde secțiunea „Vizibilitate dispozitiv”.

Puteți activa acum glisorul „Ascunde pe desktop”.

Acum, SeedProd va afișa acest meniu doar utilizatorilor de mobil.

Când ești mulțumit de cum arată meniul tău personalizat, este timpul să îl publici.

Pur și simplu faceți clic pe săgeata derulantă de lângă „Salvare” și apoi selectați „Publicare”.

Acum, dacă vizitați blogul dvs. WordPress, veți vedea meniul de navigare personalizat în acțiune.

Metoda 3: Crearea unui meniu de navigare personalizat în WordPress folosind cod (Avansat)

Dacă nu doriți să configurați un plugin de page builder, atunci puteți adăuga un meniu de navigare personalizat folosind cod. Veți găsi adesea ghiduri cu instrucțiuni despre cum să adăugați fragmente de cod personalizate în fișierul functions.php al temei dvs.

Cu toate acestea, nu recomandăm această metodă, deoarece chiar și o mică greșeală în codul dvs. ar putea cauza o serie de erori comune WordPress sau chiar ar putea defecta complet site-ul dvs. De asemenea, veți pierde codul personalizat atunci când actualizați tema WordPress.

De aceea recomandăm utilizarea WPCode. Este cea mai ușoară și sigură modalitate de a adăuga cod personalizat în WordPress fără a fi nevoie să editați fișierele de bază ale WordPress.

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 » Adăugați fragment în tabloul de bord WordPress.

Aici veți vedea toate snippet-urile gata făcute pe care le puteți adăuga pe site-ul dvs.  Acestea includ un snippet care vă permite să dezactivați complet comentariile, să încărcați tipuri de fișiere pe care WordPress nu le suportă de obicei, să dezactivați paginile de atașament și multe altele.

Pentru a crea propriul dvs. fragment, plasați cursorul mouse-ului peste „Adăugați codul dvs. personalizat (Fragment nou)” și apoi faceți clic pe butonul „+ Adăugați fragment personalizat”.

Apoi, trebuie să alegeți un tip de cod din lista de opțiuni care apar pe ecran. Pentru acest tutorial, selectați „Fragment PHP” ca tip de cod.

Vei fi acum direcționat către pagina Creare Fragment Personalizat.

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

Odată ce ați făcut acest lucru, pur și simplu lipiți următorul fragment în editorul de cod:

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Aceasta va adăuga o nouă locație pentru meniu în tema dvs. numită „Meniul meu personalizat”. Pentru a utiliza un nume diferit, pur și simplu ajustați fragmentul de cod.

Dacă doriți să adăugați mai mult de un meniu de navigare personalizat la tema dvs., pur și simplu adăugați o linie suplimentară la fragmentul de cod.

De exemplu, aici, adăugăm două noi locații de meniu temei noastre, numite „Meniul meu personalizat” și „Meniu suplimentar”:

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

După aceea, derulați la opțiunile „Inserare”. Dacă nu este deja selectată, alegeți metoda „Inserare automată” pentru ca WPCode să adauge fragmentul pe întregul site.

Apoi, deschideți meniul derulant „Locație” și faceți clic pe „Rulează peste tot”.

Acum, sunteți gata să derulați în partea de sus a ecranului și să faceți clic pe glisorul „Inactiv” pentru ca acesta să devină „Activ”.

În final, faceți clic pe „Salvare” pentru a face acest fragment live.

După aceea, accesați Aspect » Meniuri și uitați-vă la zona „Locație de afișare”.

Ar trebui să vedeți acum o nouă opțiune „Meniul meu personalizat”.

Acum puteți adăuga câteva elemente de meniu în noua locație. Pentru mai multe informații, consultați ghidul nostru pas cu pas despre cum să adăugați meniuri de navigare pentru începători.

Când sunteți mulțumit de meniul dvs., următorul pas este să îl adăugați la tema dvs. WordPress.

Adăugarea meniului de navigare personalizat la tema dvs. WordPress

Majoritatea site-urilor web afișează meniul de navigare direct sub secțiunea antetului. Acest lucru înseamnă că meniul este unul dintre primele lucruri pe care vizitatorii le văd, alături de logo-ul site-ului sau titlul acestuia.

Puteți adăuga meniul de navigare personalizat în orice locație adăugând un cod în fișierul șablon al temei dvs.

În tabloul de bord WordPress, accesați Aspect » Editor fișiere temă.

În meniul din dreapta, alegeți șablonul unde doriți să adăugați meniul. De exemplu, dacă doriți să afișați meniul de navigare personalizat în antetul site-ului dvs., atunci veți selecta de obicei fișierul header.php.

Pentru ajutor în găsirea fișierului de șablon corect, vă rugăm să consultați ghidul nostru despre cum să găsești fișierele de editat în tema ta WordPress.

După selectarea fișierului, va trebui să adăugați o funcție wp_nav_menu și să specificați numele meniului dvs. personalizat.

De exemplu, în următorul fragment de cod, adăugăm „Meniul meu personalizat” la antetul temei:

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

După adăugarea codului, faceți clic pe butonul „Actualizare fișier” pentru a salva modificările.

Acum, dacă vizitați site-ul dvs., veți vedea meniul personalizat în acțiune.

În mod implicit, meniul dvs. va apărea ca o listă simplă cu marcatori.

Puteți stiliza meniul de navigare personalizat pentru a se potrivi mai bine cu tema WordPress sau cu brandingul companiei dvs. prin adăugarea de cod CSS personalizat pe site-ul dvs.

Pentru a face acest lucru, accesați Aspect » Personalizare.

În personalizatorul de teme WordPress, faceți clic pe „CSS suplimentar”.

Aceasta deschide un mic editor de cod unde puteți introduce niște CSS.

Acum puteți stiliza meniul folosind clasa CSS pe care ați adăugat-o șablonului temei dvs. În exemplul nostru, aceasta este .custom_menu_class.

În codul următor, adăugăm margini și spațiere, setăm culoarea textului la negru și aranjăm elementele meniului într-un layout orizontal:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
	display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 

div.custom-menu-class a {
    color:#000;
}

Personalizatorul WordPress se va actualiza automat.

Acum va arăta cum va arăta meniul cu noul stil.

Dacă sunteți mulțumit de aspectul meniului, faceți clic pe „Publică” pentru a face modificările live.

Pentru mai multe informații, vă rugăm să consultați ghidul nostru despre cum să stilizați meniurile de navigare WordPress.

Ghiduri experți: Faceți mai multe cu meniurile de navigare WordPress

Cu WordPress, puteți crea tot felul de meniuri utile și captivante. Având în vedere acest lucru, iată câteva ghiduri de specialitate care vă vor ajuta să profitați și mai mult de meniurile de navigare:

• Cum să adăugați pictograme de imagine cu meniuri de navigare în WordPress
• Cum să adăugați logică condițională la meniuri în WordPress (pas cu pas)
• Cum să adăugați descrieri de meniu în temele dvs. WordPress
• Cum să adăugați un meniu responsiv pe tot ecranul în WordPress
• Cum să adăugați un Mega Menu pe site-ul dvs. WordPress (Pas cu Pas)

Sperăm că acest ghid complet v-a ajutat să învățați cum să adăugați un meniu de navigare personalizat în WordPress. S-ar putea să doriți să consultați și ghidurile noastre despre cum să adăugați un buton în meniul antetului WordPress sau cum să evidențiați un element de meniu î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.