Cum să vă personalizați antetul WordPress (Ghid pentru începători)

Știți sentimentul acela când vizitați un site WordPress și acesta pare... generic? Ca și cum ar fi ieșit direct dintr-un șablon, fără nimic personal sau memorabil la el?

Aceasta este exact impresia pe care o dai atunci când te mulțumești cu antetul implicit WordPress și te poate costa credibilitatea cu fiecare vizitator.

Antetul dvs. este primul lucru pe care îl văd oamenii când ajung pe site-ul dvs., așa că trebuie să facă o impresie puternică. Personalizarea acestuia vă permite să adăugați elemente cheie, cum ar fi linkuri de navigare, pictograme sociale și o bară de căutare.

Aceste caracteristici fac site-ul dvs. mai ușor de utilizat și vă ajută să lăsați o impresie profesională de durată. În plus, am văzut cum un antet personalizat poate crește atât încrederea, cât și implicarea.

În acest ghid, vă vom arăta exact cum să vă personalizați antetul WordPress, chiar dacă sunteți un începător complet. Veți învăța multiple metode care nu necesită codare, astfel încât să puteți construi un antet care să iasă în evidență și să vă servească mai bine vizitatorii. 🌟

Ce este antetul în WordPress?

Antetul site-ului dvs. este secțiunea de sus a fiecărei pagini de pe site-ul dvs. WordPress și este probabil primul lucru pe care îl văd vizitatorii. Acesta afișează adesea logo-ul site-ului și titlul, meniurile de navigare și alte elemente importante pe care doriți ca utilizatorii să le vadă primele.

De exemplu, iată zona noastră de antet pe WPBeginner pe care o văd milioane de cititori lunar.

Prin personalizarea antetului site-ului dvs., îi puteți oferi o notă unică și îl puteți face mai util pentru vizitatorii dvs. Puteți crea legături către cele mai populare pagini ale dvs., puteți afișa pictograme sociale sau numărul dvs. de telefon de afaceri și puteți afișa butoane de apel la acțiune pentru mai multe conversii.

În secțiunile următoare, vă vom arăta cum să vă personalizați antetul WordPress cu ușurință. Puteți utiliza următoarele linkuri pentru a sări la secțiunea pe care doriți să o citiți:

• Personalizați antetul folosind personalizatorul de temă WordPress
• Personalizați antetul folosind editorul complet de site-uri WordPress
• Creați anteturi personalizate și aspecte de pagină cu SeedProd
• Adăugarea unui antet personalizat pentru fiecare categorie
• Adăugați o zonă de widget în antetul WordPress
• Adăugați imagini aleatorii pentru antet pe blogul dvs. WordPress
• Adăugați codul în antetul site-ului dvs. web (Avansat)
• Sfat bonus: Testați diferite stiluri de antet (folosind testarea A/B)
• Întrebări frecvente: Personalizați antetul WordPress
• Resurse suplimentare: Mai multe sfaturi de design și navigare WordPress

Gata? Să începem.

Personalizați antetul folosind personalizatorul de temă WordPress

Teme populare WordPress vă permit să utilizați personalizatorul temei WordPress pentru a face modificări în zona antetului site-ului dvs. Această funcție este uneori numită antet personalizat, dar rețineți că nu toate temele o suportă.

Ar trebui să începeți prin a naviga la Aspect » Personalizare în zona de administrare WordPress.

Tema dvs. poate include o secțiune „Antet” în personalizator sau poate oferi opțiuni de antet în secțiunea „Culoare”. Cu toate acestea, acest lucru variază de la o temă la alta. Iată câteva exemple.

Unele teme, precum Twenty Twenty-One, nu oferă deloc opțiuni de personalizare a antetului. În acest caz, recomandăm utilizarea unui plugin de construire de teme drag-and-drop precum SeedProd, pe care îl vom prezenta mai jos.

Tema Twenty Sixteen vă permite să adăugați o imagine de fundal în antet și chiar să adăugați imagini aleatorii în antet.

Unele teme WordPress gratuite și premium oferă opțiuni și mai multe de personalizare a temei.

De exemplu, s-ar putea să poți schimba stilul fontului antetului, aspectul, culorile și multe altele. Dar tot va diferi de la o temă la alta și ești limitat la ceea ce permite dezvoltatorul temei.

De exemplu, Sydney are o opțiune dedicată „Header Builder” în panoul său de personalizare din stânga.

Aici veți găsi diferite setări pentru a edita aspectul și stilul antetului. Puteți construi un antet personalizat adăugând blocuri, la fel ca atunci când editați o postare de blog sau o pagină în editorul de conținut WordPress.

Pentru a începe, pur și simplu treceți cu mouse-ul peste o zonă goală din antet și faceți clic pe pictograma „+” pentru a adăuga un bloc de antet – fie că este în rândul de sus, mijloc sau jos.

Apoi, puteți selecta orice bloc doriți să adăugați la antetul personalizat. De exemplu, puteți adăuga un bloc de widget, un bloc de cont, un bloc de căutare și multe altele.

Constructorul de antet vă permite, de asemenea, să glisați și să plasați blocuri pentru a le plasa deasupra sau dedesubtul antetului.

Apoi, puteți personaliza în continuare fiecare bloc pe care îl adăugați la antet.

De exemplu, selectarea blocului Titlu site & Logo vă va oferi opțiuni pentru a încărca un titlu și un logo al site-ului, a schimba lățimea logo-ului, a afișa un slogan al site-ului și multe altele.

Pe lângă acestea, puteți schimba și culoarea de fundal a antetului sau puteți adăuga o imagine de fundal care să apară în antet.

Când ați terminat de editat antetul personalizat, pur și simplu faceți clic pe butonul „Publicare”.

Pentru mai multe detalii, consultați ghidul nostru complet despre cum să folosiți personalizatorul de teme WordPress.

Personalizați antetul folosind editorul complet de site-uri WordPress

WordPress a adăugat editarea completă a site-ului în WordPress în versiunea 5.9. Dacă tema dvs. suportă noua funcționalitate, atunci aceasta înlocuiește personalizatorul de temă. Cu toate acestea, în acest moment, există doar câteva teme care funcționează cu editorul complet al site-ului.

Când utilizați o temă compatibilă, puteți personaliza antetul navigând la Aspect » Editor. Aceasta va lansa editorul complet al site-ului, care este similar cu editorul de blocuri pe care îl folosești pentru a scrie postări și pagini WordPress.

Când faceți clic pe antet, veți observa că numele șablonului din partea de sus a paginii se schimbă în „Antet pagină”.

Acum, când faceți clic pe pictograma „Setări” din bara de instrumente, veți vedea opțiuni pentru a personaliza aspectul, culoarea, marginea și dimensiunile antetului.

Ca exemplu, vom schimba culoarea de fundal a antetului. Mai întâi, va trebui să extindeți secțiunea „Culoare” și apoi să faceți clic pe opțiunea „Fundal”.

În fereastra pop-up care apare, veți selecta mai întâi o culoare solidă sau un gradient.

Apoi, puteți alege dintr-un număr de culori predefinite. Când faceți clic pe o culoare, fundalul antetului dvs. va fi schimbat imediat.

Puteți găsi mai multe opțiuni de personalizare făcând clic pe pictograma „Stiluri” din dreapta sus a paginii. Aceasta vă va permite să modificați fontul, culorile și aspectul antetului.

Pentru a afla mai multe despre cum funcționează editorul complet al site-ului, consultați ghidul nostru pentru începători despre cum să vă personalizați tema WordPress.

Creați anteturi personalizate și aspecte de pagină cu SeedProd

Doriți să aveți control total asupra antetelor, subsolurilor și barelor laterale pentru a oferi site-ului dvs. web un design unic? Atunci vă recomandăm să folosiți SeedProd, cel mai bun plugin constructor de teme WordPress.

SeedProd vă permite să creați cu ușurință o temă WordPress personalizată fără a scrie niciun cod. Aceasta include crearea de antete, subsoluri și tot ce este necesar pentru o temă WordPress atractivă.

Puteți chiar crea mai multe stiluri de antet personalizate pentru diferite pagini și secțiuni ale site-ului dvs. web.

Unele dintre mărcile noastre partenere folosesc SeedProd pentru a-și construi site-urile web și a obținut rezultate remarcabile pentru ele. Pentru a afla mai multe despre acest subiect, puteți consulta recenzia noastră completă despre SeedProd.

Mai întâi, recomandăm să urmați ghidul nostru despre cum să creezi ușor o temă WordPress personalizată fără cod. Odată ce ați făcut acest lucru, puteți începe să vă personalizați antetul în editorul SeedProd.

Pentru a accesa editorul, tot ce trebuie să faceți este să faceți clic pe linkul „Edit Design” găsit sub antet.

Aceasta va deschide antetul în editorul drag-and-drop al SeedProd.

De aici, puteți personaliza cu ușurință antetul adăugând noi blocuri.

Există blocuri pentru etichete de șabloane, cum ar fi logo-ul site-ului sau oricare dintre widget-urile dvs. WordPress, și blocuri avansate, cum ar fi un contor de timp, meniul de navigare sau butoane de partajare socială.

Partea cea mai bună este că puteți personaliza în continuare fiecare bloc folosind constructorul de teme. De exemplu, puteți schimba dimensiunea și alinierea logo-ului dvs. sau puteți alege ce pagini să afișați în meniul de navigare. Acesta vă permite chiar și să adăugați o imagine în antet.

Cu SeedProd, puteți adăuga, de asemenea, o secțiune completă la antetul șablonului temei dvs.

Secțiunile sunt grupuri de blocuri pe care le puteți utiliza pentru diferite zone ale site-ului dvs. Acestea includ antete, subsoluri, caracteristici, testimoniale, apeluri la acțiune și multe altele.

Pentru a utiliza o secțiune de antet, veți dori să comutați la fila „Secțiuni” din panoul „Design”.

După aceea, alegeți o secțiune de antet pe care ați dori să o utilizați pentru site-ul dvs. SeedProd oferă șabloane cu mai multe secțiuni pe care le puteți folosi.

Continuați și începeți personalizarea secțiunii antetului.

Odată ce sunteți mulțumit de antetul dvs. personalizat, asigurați-vă că faceți clic pe butonul „Salvare” pentru a vă stoca modificările.

Acum, sunteți gata să publicați antetul personalizat.

Pur și simplu accesați SeedProd » Constructor de teme din tabloul de bord WordPress și faceți clic pe comutatorul de lângă opțiunea „Activare temă SeedProd” la „Da”.

Odată ce activați opțiunea, SeedProd va înlocui tema WordPress implicită cu o nouă temă și antet personalizat.

Acum puteți vizita site-ul dvs. web pentru a vedea noul antet personalizat în acțiune.

Creați anteturi personalizate diferite pentru fiecare pagină

În plus, SeedProd face extrem de ușor să creați antete personalizate pentru pagini specifice ale site-ului dvs.

Constructorul de teme vă permite să adăugați antete personalizate pentru fiecare pagină de pe site-ul dvs. WordPress. Astfel, puteți afișa un antet personalizat pentru diferite categorii, etichete, tipuri de postări, tipuri de pagini și multe altele.

Pentru a începe, va trebui să accesați SeedProd » Constructor de teme din tabloul de bord WordPress și să faceți clic pe butonul „Adăugare șablon temă nouă”.

Va apărea o nouă fereastră pop-up unde va trebui să introduceți detaliile șablonului temei.

Continuați și introduceți un nume pentru șablonul temei dvs. După aceea, pur și simplu alegeți „Header” ca tip de șablon din meniul derulant. Puteți lăsa câmpul „Priority” gol.

În continuare, va trebui să introduceți condițiile de afișare pentru antetul dvs. personalizat. De exemplu, am folosit condițiile în care acesta ar apărea pe toate postările și paginile care se află în categoria tutoriale.

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

După aceea, continuați și editați antetul personalizat folosind constructorul de teme drag-and-drop SeedProd.

Când ați terminat de editat antetul personalizat, pur și simplu faceți clic pe butonul „Salvare” din partea de sus.

Puteți vedea mai multe idei despre cum să vă personalizați antetul folosind SeedProd în ghidul nostru pentru începători despre cum să creați ușor o temă WordPress personalizată folosind constructorul de teme SeedProd.

Adăugarea unui antet personalizat pentru fiecare categorie

Majoritatea site-urilor web afișează același antet pe toate postările, paginile, categoriile și paginile de arhivă. Cu toate acestea, puteți afișa un antet diferit pentru fiecare categorie WordPress.

Acest lucru se poate face adăugând cod la fișierele temei dvs., dar veți avea mai mult control folosind un constructor de teme.

V-am arătat mai devreme cum să vă personalizați antetul folosind pluginul constructor de teme SeedProd. Acum, SeedProd vă permite, de asemenea, să creați mai multe antete personalizate și să le afișați pentru diferite categorii folosind logica condițională.

Pentru a crea un antet nou, trebuie să navigați la SeedProd » Constructor de teme și să faceți clic pe butonul portocaliu „Adăugați un șablon de temă nou”. Alternativ, puteți duplica antetul curent și îl puteți folosi ca punct de plecare.

Va apărea o fereastră pop-up, unde puteți denumi șablonul temei și puteți selecta „Antet” din meniul derulant Tip.

De asemenea, trebuie să introduceți o prioritate. Deci, dacă mai mult de un antet îndeplinește condițiile pentru o anumită pagină, antetul cu cea mai mare prioritate va fi afișat.

Antetul implicit are o prioritate de 0, așa că asigurați-vă că introduceți 1 sau mai mare.

După aceea, va trebui să setați una sau mai multe condiții. Acest lucru îi permite SeedProd să știe când să afișeze un anumit antet. Pur și simplu selectați condițiile din meniurile derulante.

Pe primele două meniuri, va trebui să selectați „Include” și apoi „Has Category”. În ultimul câmp, ar trebui să introduceți numele categoriei unde doriți ca antetul să fie afișat.

Puteți afișa cu ușurință același antet pentru mai multe categorii, făcând clic pe butonul „Adăugare condiție” și incluzând o altă categorie. Când ați terminat, asigurați-vă că faceți clic pe butonul „Salvare” pentru a salva noul antet.

Acum, puteți personaliza designul fiecărui antet nou folosind editorul drag-and-drop al SeedProd, așa cum v-am arătat mai devreme.

Pentru a afla mai multe, inclusiv cum să faceți acest lucru folosind cod, consultați ghidul nostru despre cum să adăugați un antet, subsol sau bară laterală personalizate pentru fiecare categorie.

Adăugați o zonă de widget în antetul WordPress

Dacă construiți o temă personalizată de la zero folosind cod, atunci s-ar putea să doriți să adăugați un widget WordPress în antetul dvs. pentru a capta atenția vizitatorilor.

Widget-urile vă permit să adăugați cu ușurință blocuri de conținut în secțiuni specifice ale temei dvs., dar rețineți că nu toate temele includ o zonă de antet pentru widget-uri.

Am menționat mai devreme cât de simplu este să adăugați widgeturi la antetul dvs. folosind constructorul de teme SeedProd. Dar ce se întâmplă dacă doriți să adăugați un widget la antetul unei teme WordPress normale?

Unele teme, precum tema Sydney, vă permit să faceți acest lucru folosind personalizatorul de teme WordPress. Sydney adaugă o opțiune numită „Header Builder” pentru a personaliza complet antetul, inclusiv adăugarea de widgeturi.

Dacă tema dvs. WordPress nu are în prezent o zonă pentru widget-uri în antet, va trebui să o adăugați manual.

Deși abordarea generală este de a adăuga fragmente de cod în fișierul functions.php, abordarea mai ușoară și mai sigură este utilizarea WPCode. Este cel mai bun plugin pentru a adăuga fragmente de cod fără a vă strica site-ul.

Unele dintre mărcile noastre partenere folosesc WPCode pentru a adăuga și gestiona fragmentele lor de cod personalizat. Am auzit lucruri grozave despre plugin și puteți citi și recenzia noastră detaliată despre WPCode pentru a afla mai multe despre acesta.

Pentru a începe, să ne asigurăm că aveți instalat și activat pluginul de fragmente de cod WPCode pe site-ul dvs. WordPress. Dacă aveți nevoie de ajutor, nu ezitați să consultați ghidul nostru despre cum să instalați un plugin WordPress.

La activare, veți dori să navigați la Fragmente de cod » + Adăugare fragmente.

Acum, primul lucru pe care va trebui să-l faceți este să creați titlul fragmentului. De exemplu, noi îl numim „Adăugarea unui widget WordPress în zona antetului”. Al doilea pas este să extindeți meniul derulant tip cod și să alegeți „Fragment PHP”.

Odată terminat, pur și simplu copiați următorul cod și lipiți-l în secțiunea „Previzualizare cod”.

function wpb_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Custom Header Widget Area',
        'id'            => 'custom-header-widget',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_init' );

Acest cod va înregistra un nou antet sau o zonă pregătită pentru widget-uri pentru tema dvs.

Iată cum ar putea arăta în editorul tău WPCode:

Pentru a activa fragmentul, puteți comuta comutatorul de lângă butonul albastru „Save Snippet” la „Active”. Apoi, nu uitați să faceți clic pe butonul „Save Snippet” pentru a salva modificările.

Odată ce ați activat comutatorul și ați salvat modificările, așa ar trebui să arate editorul:

Acum, dacă mergeți la Aspect » Widgeturi, veți vedea o nouă zonă de widgeturi etichetată „Zonă de widget antet personalizat”.

Aici veți adăuga widget-urile dvs. Dacă aveți nevoie de ajutor, puteți consulta ghidul nostru despre cum să adăugați și să utilizați widget-uri în WordPress.

În funcție de tema dvs., s-ar putea să fie necesar să adăugați CSS în WordPress pentru a controla modul în care este afișată zona widget-ului.

Pentru instrucțiuni detaliate, puteți consulta ghidul nostru despre cum să adăugați un widget WordPress în antetul site-ului dvs..

Adăugați imagini aleatorii pentru antet pe blogul dvs. WordPress

Un alt mod prin care puteți face antetele WordPress mai atractive este prin adăugarea de imagini aleatorii în secțiunea antetului.

Afișarea imaginilor care se schimbă aleatoriu ajută la captarea atenției vizitatorilor dvs. și face conținutul mai captivant.

Pentru a adăuga imagini aleatorii în antetul blogului dvs. WordPress, puteți utiliza personalizatorul de temă și puteți încărca imagini în secțiunea antet. Această opțiune poate varia în funcție de tema WordPress pe care o utilizați.

Apoi, selectați opțiunea „Randomize uploaded headers”.

Dacă doriți mai mult control și flexibilitate în afișarea imaginilor aleatorii în secțiunea antet, atunci puteți folosi și un plugin WordPress.

Pentru mai multe detalii, consultați ghidul nostru despre cum să adăugați imagini aleatorii în antetul blogului dvs. WordPress.

Adăugați cod în antetul site-ului dvs. (Avansat)

În cele din urmă, dacă doriți să adăugați cod personalizat în secțiunea antet a site-ului dvs. web, puteți face acest lucru cu ușurință din tabloul de bord WordPress. Această metodă este recomandată utilizatorilor avansați și s-ar putea să nu fie potrivită pentru începători, deoarece implică editarea codului și necesită cunoștințe tehnice.

Puteți găsi fișierele antetului temei dvs. accesând Aspect » Editor fișiere temă din panoul de administrare WordPress. În fișierele temei „style.css”, puteți derula în jos la secțiunea antetului site-ului și puteți adăuga sau elimina cod.

O modalitate mai ușoară de a adăuga cod personalizat pentru a edita antetul site-ului dvs. este prin utilizarea WPCode, cel mai bun plugin de fragmente de cod de pe piață.

Mai întâi, instalați și activați pluginul gratuit WPCode. Pentru mai multe detalii, vă rugăm să consultați ghidul nostru despre cum să instalați un plugin WordPress.

După activare, puteți accesa Fragmente de cod » Antet și subsol din tabloul de bord WordPress. Apoi, pur și simplu introduceți codul personalizat în secțiunea „Antet”.

După ce ați introdus codul, faceți clic pe butonul „Salvați modificările”.

Pentru mai multe detalii, puteți consulta ghidul nostru despre cum să adăugați cod pentru antet și subsol în WordPress.

Asta e tot!

Sfat bonus: Testați diferite stiluri de antet (folosind testarea A/B)

După personalizarea antetului, este absolut normal să vă întrebați: *„Este aceasta cea mai bună versiune pentru vizitatorii mei?”* Aici intervine testarea A/B split.

Vă permite să comparați diferite versiuni ale antetului dvs., fie că este vorba de o modificare a aspectului, culoarea unui buton sau un element adăugat, cum ar fi o bară de căutare, și să vedeți care dintre ele funcționează mai bine.

Veți putea lua decizii de design bazate pe comportamentul real al utilizatorilor, nu doar pe presupuneri.

Nu vă faceți griji, nu trebuie să fiți un dezvoltator pentru a face acest lucru.

Cu instrumente prietenoase pentru începători precum Thrive Optimize și Nelio AB Testing, veți testa ca un profesionist în cel mai scurt timp. Această abordare ajută antetul dvs. să se îmbunătățească cu fiecare ajustare.

Pentru detalii complete, consultați ghidul nostru despre cum să faceți testarea A/B split în WordPress.

Întrebări frecvente: Personalizați antetul WordPress

Încă aveți întrebări despre personalizarea antetului WordPress? Nu vă faceți griji; vă acoperim noi! Iată câteva întrebări frecvente pe care începătorii le pun adesea:

Ce este un antet WordPress și de ce este important?

Antetul este secțiunea de sus a site-ului dvs. WordPress și este primul lucru pe care îl văd vizitatorii. De obicei, include logo-ul site-ului dvs., meniul de navigare și alte elemente cheie. Un antet bine conceput vă ajută să faceți o primă impresie excelentă și îi ghidează pe oameni către cele mai importante părți ale site-ului dvs.

Trebuie să știu să codez pentru a-mi personaliza antetul WordPress?

Deloc! Nu ai nevoie de abilități de codare. Multe teme WordPress și plugin-uri (precum SeedProd) îți permit să-ți personalizezi antetul cu un simplu constructor drag-and-drop – perfect pentru începători.

Care sunt beneficiile utilizării unui plugin precum SeedProd pentru antete?

SeedProd face ușor să creați anteturi personalizate fără a atinge niciun cod. Aveți control complet asupra aspectului și dispunerii, plus opțiuni avansate pentru a se potrivi stilului site-ului dvs. și pentru a îmbunătăți experiența generală a utilizatorului.

Cum poate adăugarea unui widget în antetul meu să-mi îmbunătățească site-ul?

Adăugarea de widget-uri în antetul dvs., cum ar fi o bară de căutare, pictograme sociale sau informații de contact, face ca funcțiile cheie să fie mai ușor de găsit. Acest lucru ajută vizitatorii să navigheze mai rapid pe site-ul dvs. și oferă site-ului dvs. un aspect mai rafinat și profesional.

Pot avea anteturi diferite pentru pagini sau postări diferite?

Da! Cu instrumentele potrivite, cum ar fi SeedProd, puteți adăuga antete personalizate la diferite pagini, postări, categorii sau chiar etichete. Acest lucru vă oferă mai mult control asupra aspectului site-ului dvs. în diferite secțiuni.

Resurse suplimentare: Mai multe sfaturi de design și navigare WordPress

Sperăm că acest tutorial v-a ajutat să învățați cum să vă personalizați antetul WordPress. În continuare, poate doriți să consultați ghidurile noastre despre:

• Cum să adăugați imagini corect în WordPress
• Cum să adăugați un redimensionator de fonturi în WordPress pentru accesibilitate
• Cum să stilizați fiecare postare WordPress diferit
• Cum să creați un meniu lateral colapsabil în WordPress
• Cum să afișați bare laterale diferite pentru fiecare postare și pagină WordPress
• Cum să creezi o pagină de destinație virală cu listă de așteptare în WordPress
• Elemente cheie de design pentru un site web WordPress eficient
• Ghid complet: Cum să schimbați corect o temă 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.