Cum să personalizați anteturile în WordPress (plugin-uri + cod personalizat)
Publicat: 2017-04-21Securitatea și viteza site-ului dvs. sunt domenii critice pe care să vă concentrați. Cu toate acestea, o altă modalitate de a face o impresie pozitivă asupra vizitatorilor dvs. este să rafinați unul dintre elementele pe care le văd mai întâi când ajung pe site-ul dvs. - antetul.
Dacă doriți ca site-ul dvs. să iasă în evidență, vă ajută să știți cum să vă creați propriul antet personalizat WordPress . Există o varietate de tutoriale WordPress, dar puține se concentrează doar pe editarea acestui element important. Din fericire, există mai multe metode pe care le puteți folosi pentru a atinge acest obiectiv.
În această postare, vom explica ce este un antet în WordPress, unde să-l găsiți și cum să creați un antet personalizat WordPress atât cu cât și fără un plugin . Vom încheia prin a discuta câteva dintre cele mai bune practici și vom răspunde la întrebările frecvente (FAQ). Să începem!
În acest articol
- Ce este un antet în WordPress?
- Unde este antetul în WordPress?
- Cum să vă personalizați antetul în WordPress (3 metode)
- Utilizați Personalizatorul
- Editați codul temei dvs
- Instalați un plugin pentru antet WordPress
- Cele mai bune practici personalizate pentru antet WordPress
- Întrebări frecvente (Întrebări frecvente) despre anteturile personalizate WordPress
- Încheierea
Ce este un antet în WordPress?
Antetul unui site WordPress este un element universal care apare pe fiecare pagină și postare . Folosind site-ul nostru WP Buffs ca exemplu, antetul este bara portocalie situată în partea de sus a acestei pagini, precum și toate caracteristicile conținute în acesta:
Având în vedere plasarea sa proeminentă, antetul servește adesea ca prima impresie a vizitatorilor dvs. despre site-ul dvs. De asemenea, este locul în care merg informațiile critice și apelurile la acțiune (CTA) . De exemplu, în exemplul de mai sus, este posibil să observați logo-ul nostru, linkurile de meniu cheie și butonul Rezervați un apel.
Nu contează dacă site-ul tău este un blog, magazin online, portofoliu sau cu totul altceva – antetul tău WordPress este extrem de important. Multe teme vin cu funcții care vă permit să adăugați propriul stil, text sau imagine la antet , care este cunoscut sub numele de antet personalizat WordPress.
Unde este antetul în WordPress?
Desigur, antetul este situat în partea de sus a site-ului dvs. (în partea din față), în timp ce subsolul WordPress este secțiunea care apare în partea de jos. Cu toate acestea, găsirea fișierului antet pe partea din spate poate fi confuză dacă nu sunteți familiarizat cu WordPress.
Depinde și de tema pe care o utilizați . De exemplu, de obicei puteți găsi fișierul care conține antetul dvs. WordPress navigând la Aspect > Editor de teme :
Aici vei vedea toate fișierele care compun tema ta. Funcțiile de antet sunt conținute în fișierul header.php , în timp ce codul pentru stilul și aspectul acestuia se află în fișierul style.css :
Cu toate acestea, cu alte teme, cum ar fi Twenty Seventeen, vă puteți găsi antetul navigând la Aspect > Antet din tabloul de bord WordPress:
Acest lucru vă va duce la Personalizatorul WordPress, unde puteți găsi secțiuni dedicate pentru schimbarea media antetului WordPress :
Cel mai bun mod de a accesa sau edita antetul WordPress variază în funcție de câțiva factori. Mai precis, se va baza pe nivelul dvs. de experiență, pe modificarea (modificările) pe care doriți să le faceți și pe tema pe care o utilizați.
Cum să vă personalizați antetul în WordPress (3 metode)
Acum că ați înțeles puțin mai multe despre anteturile WordPress, este timpul să explorați diferitele opțiuni pentru personalizarea dvs. Să aruncăm o privire la trei metode pentru a face acest lucru:
- Utilizați Personalizatorul
- Editați codul temei dvs
- Instalați un plugin pentru antet WordPress
1. Utilizați Personalizatorul
Așa cum tocmai am menționat, una dintre modalitățile prin care vă puteți personaliza antetul WordPress este prin utilizarea WordPress Customizer . În funcție de tema dvs., este posibil să puteți face acest lucru accesând Aspect > Antet .
Cu toate acestea, cu majoritatea temelor, îl veți accesa navigând la Aspect > Personalizare . În cadrul Personalizatorului, puteți schimba imaginea antet, precum și edita titlul site-ului și sloganul (Notă: în unele teme, aceste elemente vor fi în fila Identitate site ):
Avantajul utilizării Personalizatorului este că nu trebuie să atingeți niciun cod dacă nu doriți. De asemenea, veți putea vedea modificările dvs. în panoul de previzualizare live din dreapta.
2. Editați codul temei dvs
O altă opțiune pe care o aveți pentru a vă personaliza antetul WordPress este să editați direct codul fișierelor temei dvs. Acest lucru oferă mai mult control asupra personalizărilor, dar în mod evident necesită anumite cunoștințe de codare. Înainte de a începe, este inteligent să creezi o temă pentru copii.
Pentru a edita codul antetului , navigați la Aspect > Editor de teme , apoi deschideți fișierul style.css :
Puteți adăuga sau elimina cod în secțiunea Antet site a acestui fișier:
Comenzile pe care le puteți utiliza includ, dar nu se limitează la:
- font: italic; Acest cod schimbă stilul fontului în cursiv.
- opacitate de fundal: .5; Aceasta modifică opacitatea fundalului (0 este complet transparent și 1 nu este deloc transparent).
- dimensiunea fontului: 20px; Folosiți-l pentru a modifica dimensiunea fontului textului antetului (schimbați px-ul în orice doriți).
- umplutură: 20px; Puteți folosi acest lucru pentru a schimba umplutura sau spațiul din jurul antetului (schimbați 20 în ceea ce doriți).
- chenar: 20px; Acest lucru creează o chenar în jurul antetului.
- culoare-chenar: alb; Aceasta schimbă culoarea chenarului în alb (puteți folosi și o culoare hexagonală).
- înălțimea liniei: 20px; Utilizați acest lucru pentru a seta spațierea pentru a se potrivi cu dimensiunea fontului dvs., ceea ce poate fi util dacă utilizați un font mai mare și se suprapune între rupturi de linie.
Dacă noul tău cod nu funcționează, încearcă să adaugi !important la sfârșitul comenzii, ca în padding-left: 0 !important; . Dacă acest lucru tot nu funcționează, antetul dvs. poate să nu fie numit „header” .
Unele teme WordPress folosesc „masthead”, „inline-header” sau alte etichete.
De asemenea, puteți face modificări fișierului header.php dacă considerați că este necesar. Cu toate acestea, acest cod se ocupă mai degrabă de funcții decât de stil. Deoarece majoritatea oamenilor care doresc să-și personalizeze anteturile sunt mai interesați de actualizarea aspectului site-urilor lor decât de ceea ce se întâmplă în culise, probabil că vă veți concentra cea mai mare parte a atenției asupra CSS-ului acestuia.
3. Instalați un plugin pentru antet personalizat WordPress
O modalitate mai ușoară de a vă personaliza antetul WordPress este cu un plugin . Această metodă este recomandată dacă nu vă simțiți confortabil să editați direct fișierele site-ului dvs.
Există o mână de instrumente disponibile, în funcție de nivelul de experiență și de editările pe care doriți să le faceți. Un plugin gratuit și popular este Insert Headers and Footers:
După ce este activat pe site-ul dvs., îl puteți găsi în Setări > Inserați anteturi și subsol :
Apoi, în secțiunea Antet , puteți adăuga cod pentru orice doriți să adăugați sau să eliminați din antet:
Scripturile pe care le puneți aici vor fi adăugate automat la eticheta „head” a site-ului dvs. WordPress . Când ați terminat, faceți clic pe butonul Salvați modificările .
O altă opțiune este să utilizați un plugin WordPress premium cu antet personalizat, cum ar fi Popping Sidebars & Widgets:
Acest plugin vă permite să creați widget-uri (text, formulare, pictograme de rețele sociale etc.), pe care le puteți adăuga la antet. Dacă doriți să evitați codul cu totul, această soluție poate fi ideală. De asemenea, vă permite să vă personalizați zonele barei laterale și de subsol.
Pentru a începe cu pluginul Popping Sidebars & Widgets, puteți previzualiza o demonstrație pe site-ul web OTWthemes. Dacă doriți să-l testați înainte de a cumpăra pluginul premium, vă puteți înscrie și pentru o încercare gratuită.
Cele mai bune practici personalizate pentru antet WordPress
Odată ce știți cum să personalizați anteturile WordPress, va trebui să vă dați seama de designul pe care doriți să îl utilizați pentru al tău. Pentru a profita la maximum de aceasta, există câteva bune practici și sfaturi pe care le puteți urma:
- Încercați să utilizați o ilustrație. Fotografiile de stoc fade pot fi plictisitoare și plictisitoare. Ele pot chiar să facă site-ul dvs. să pară generic și nesigur. Prin urmare, poate doriți să luați în considerare utilizarea unei ilustrații pentru a infuza creativitate în antetul dvs. și pentru a o scoate în evidență.
- Alegeți imagini care se potrivesc branding-ului dvs. Atunci când alegeți imagini și logo-uri, utilizați unele care se referă la dvs. sau la afacerea dvs. Consecvența este cheia în branding. Sigur, florile sunt frumoase, dar dacă nu sunteți florar, ele pot induce în eroare.
- Folosiți propriile imagini atunci când este posibil. Dacă și când este posibil, includeți propriile lucrări și imagini personalizate. Aceasta este o idee simplă pentru artiști, designeri și fotografi. Cu toate acestea, chiar și constructorii, companiile industriale și alte companii mai puțin orientate vizual pot prezenta o imagine a unuia dintre propriile lor produse.
Dacă sunteți în căutarea unor idei despre cum să vă personalizați antetul WordPress , ar putea ajuta să vă inspirați din alte site-uri web. Vă recomandăm să verificați aceste 14 modele artistice de antet WordPress.
Întrebări frecvente despre anteturile personalizate WordPress
Sperăm că, în acest moment, aveți o înțelegere solidă a modului în care puteți edita sau crea un antet personalizat WordPress. Cu toate acestea, există încă câteva întrebări frecvente pe care le primim pe care vrem să le abordăm aici.
Multe teme WordPress vă permit doar să modificați titlul site-ului și sloganul din Personalizator. Cu toate acestea, dacă doriți să adăugați mai mult text la antetul dvs. personalizat WordPress, puteți face acest lucru editând fișierulheader.php.
De exemplu, puteți adăuga următorul cod la fișierul dvs., care va adăuga o casetă de text la antetul dvs. WordPress:
<div class="custom-header">
<div class="custom-header-media">
<?php the_custom_header_markup(); ?>
</div>
<div class="custom_textbox">
<div class="custom_textbox_content"><p>Aici vă puteți pune textul antetului.</p></div>
</div>
După cum am discutat în această postare, puteți edita fișierul header.php direct din tabloul de bord prin Editorul de teme. Dacă doriți să adăugați text fără a edita fișierele tematice , puteți utiliza un plugin precum Insert Headers and Footers sau Popping Sidebars & Widgets (pe care l-am introdus mai devreme).
Multe teme implicite din WordPress vă permit să vă încărcați propria imagine de antet WordPress prin intermediul Personalizatorului. Cu toate acestea, dacă tema dvs. nu oferă această opțiune sau doriți să utilizați o imagine de antet diferită pentru fiecare pagină web, puteți utiliza și un plugin precum Unique Headers sau WP Header Images.
Aceste plugin-uri vă permit să adăugați propriile imagini de antet personalizate WordPress la fiecare pagină web. De asemenea, pot adăuga imagini de antet personalizate pentru postări de blog, tipuri de postări personalizate și chiar produse WooCommerce.
Încheierea
Deși două anteturi WordPress nu ar trebui să fie la fel, toate au un scop similar. Antetele eficiente arată vizitatorilor despre ce este vorba despre site-ul dvs. și fac o primă impresie pozitivă. Acesta este motivul pentru care vă recomandăm să vă personalizați pentru a se potrivi cu obiectivele și brandingul dvs.
După cum am discutat în această postare, există trei metode principale pe care le puteți folosi pentru a crea un antet personalizat WordPress :
- Utilizați Personalizatorul, care este o opțiune prietenoasă pentru începători, care nu necesită codificare.
- Editați codul de antet al temei dvs. WordPress, care oferă mai mult control, dar necesită abilități CSS și PHP.
- Instalați un plugin pentru antet WordPress , cum ar fi Insert Headers and Footers, Popping Sidebars & Widgets sau WP Header Images.
Personalizarea antetului WordPress poate ajuta la îmbunătățirea aspectului și a gradului de utilizare . Cu toate acestea, cu cât aveți mai multe site-uri, cu atât acest lucru devine mai obositor. La WP Buffs, oferim planuri de îngrijire și soluții cu etichetă albă care pot face managementul site-ului, întreținerea și personalizările remarcabil de ușoare . Verificați-le astăzi!
Vrei să dai feedback-ul tău sau să te alături conversației? Adaugă comentariile tale pe Twitter.