Doriți să adăugați un widget WordPress în zona de antet a site-ului dvs. web?

Widgeturile vă permit să adăugați cu ușurință blocuri de conținut în secțiuni desemnate ale temei dvs. WordPress.

În acest tutorial, vă vom arăta cum să adăugați cu ușurință un widget WordPress în antetul site-ului dvs. web.

notițe: Acesta este un tutorial de nivel intermediar. Va trebui să adăugați cod la fișiere cu tema WordPress și stăpânește unele CSS.

Dar înainte de orice modificare, descoperă-ne plugin-uri WordPress 5 pentru a face backup blog-ul dvs. sau Cum se instalează o temă WordPress et Cât de multe plugin-uri ar trebui să instalez pe WordPress.

Apoi să revenim la motivul pentru care suntem aici. 

De ce și când trebuie să adăugați un widget în antet?

Widgeturile vă permit să adăugați cu ușurință blocuri de conținut într-o zonă desemnată din tema dvs. WordPress. Aceste zone desemnate se numesc „ Barele laterale „Sau zone din” widget-uri".

O zonă de widget din antet poate fi utilizată pentru a afișa anunțuri, articole recente sau orice doriți.

Acest domeniu particular este utilizat pe toate site-urile web populare pentru a afișa informații cu adevărat importante.

Descoperă și tu Cum să adăugați widget-uri personalizate după ce postați pe WordPress

widgetisee de zonă în wordpress head

Ca o regulă generală, Teme WordPress adăugați bare laterale lângă conținut sau în zona de subsol. Foarte puține teme WordPress adaugă zone widget deasupra conținutului sau în antet.

De asemenea, vă sfătuim să ne descoperim MailChimp tutorial în limba franceză: ghid complet pentru a crea un buletin informativ

De aceea, în acest tutorial vă vom arăta cum să adăugați o zonă de widget în antetul site-ului dvs. WordPress.

Pasul 1: Creați o zonă widget

În primul rând, trebuie să creăm o zonă widget personalizată. Acest pas vă va permite să vedeți o zonă widget personalizată în „ Aspect> Widgeturi Pe tabloul de bord WordPress.

Va trebui să adăugați acest cod la fișier functions.php De tema ta.

funcție bpc_widgets_init () {register_sidebar (array ('name' => 'Zona personalizată a widgetului de antet', 'id' => 'custom-header-widget', 'before_widget' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'bpc_widgets_init');

Acest cod salvează o nouă bară laterală sau zonă widget pe tema WordPress.

Dacă nu ați instalat niciodată WordPress local, aflați Cum se instalează WordPress local pe un PC / Windows cu XAMPP

Puteți merge la " Aspect> Widgeturi Și veți vedea o nouă zonă de widget marcată " Obiect widget personalizat pentru ziduri ".

noua zonă de widget WordPress

Continuați și adăugați un widget text în această zonă nou creată și salvați-o.

Încercați și voi ghidul nostru pentru adăugarea de widget-uri.

Pasul 2: afișați widgetul în antet

Dacă vizitați site-ul dvs. web, nu veți putea vedea widgetul text pe care tocmai l-ați adăugat.

Pentru că nu v-am arătat încă cum să afișați zonele din widget-uri personalizate WordPress.

Acest lucru îl vom face în acest pas.

Iată și o listă cu 5 plugin-uri critice WordPress pentru a spori câștigurile blogului tău

Va trebui să editați fișierul header.php În tema dvs. WordPress și adăugați acest cod unde doriți să afișați widget-urile.


 
 
 
 

Nu uitați să salvați modificările.

Puteți apoi să vizitați site-ul dvs. web și veți vedea widgetul text în antetul dvs.

site-ul demonstrativ în minte

Rezultatul nu va fi neapărat cel mai atractiv. De aceea, veți avea nevoie de CSS, astfel încât să se afișeze corect.

Pasul 3: dați stil anteturilor CSS

În funcție de tema dvs. WordPress, va trebui să adăugați cod CSS pentru a controla modul în care sunt afișate antetul și zona widgetului.

Una dintre cele mai simple modalități de a face acest lucru este prin utilizarea CSS Hero. Acesta din urmă vă permite să utilizați o interfață intuitivă pentru a modifica CSS-ul unei teme WordPress.

De asemenea, vă sfătuim să descoperiți acest lucru Ce puteți face cu pluginul WordPress Pencil galben?

Dacă nu doriți să utilizați un plugin, puteți adăuga CSS personalizat la tema dvs. WordPress vizitând " Aspect »Personalizează Pentru a personaliza tema WordPress.

Citiți și articolul nostru pe 10 plugin-uri WordPress pentru a îmbunătăți traficul unui blog

Acest lucru vă va permite să afișați interfața WordPress Customizer. Va trebui să faceți clic pe „ CSS suplimentare ".

suplimentar css WorDPress

Fila « CSS suplimentare În „ Customizer Vă permite să adăugați CSS personalizat în timp ce vizualizați modificările din previzualizare în dreapta.

Din motive inerente acestui tutorial, presupunem că veți utiliza această zonă pentru a adăuga un singur widget pentru a afișa reclame banner sau un widget de meniu personalizat.

Iată un exemplu de CSS pentru a începe:

div # header-widget-area {lățime: 100%; fundal-culoare: # f7f7f7; frontală de fundal: 1px solid #eeeeee; text-align: centru; } h2.chw-titlu {margin-top: 0px; text-aliniere: stânga; text-transform: majuscule; font-size: mic; fundal-culoare: #feffce; lățime: 130px; padding: 5px; }

Iată cum va apărea widget-ul nostru personalizat în antetul temei Douăsprezece.

tema demo douăzeci și șaptesprezece wordpress

Descoperiți și câteva plugin-uri premium WordPress  

Puteți folosi altele WordPress plugin-uri pentru a oferi un aspect modern și pentru a optimiza gestionarea blogului sau site-ului dvs.

Vă oferim aici câteva plugin-uri WordPress premium care vă vor ajuta să faceți asta.

1. Expert Smart4y

Smart4y Tooltip este un WordPress plug-in instrument flexibil dedicat creării de sfaturi cu instrumente moderne, fără nicio dependență de biblioteca Javascript. Este complet responsive și oferă posibilitatea de a introduce conținut HTML.

Plugin WordPress Smart4y Tooltip Responsive

Editorul său WYSIWYG vă va permite să creați vizual fiecare sugestie fără a fi necesar să introduceți niciun cod, dar dacă sunteți dispus, îl puteți face întotdeauna.

Descoperiți și noi Pluginurile 10 WordPress pentru a evalua articolele din blogul dvs.

Celelalte caracteristici ale sale sunt: Suport pentru pagina de constructor, un aspect destul de receptiv, capacitatea de a defini parametri globali pentru toate sfaturile de instrumente sau de a defini parametri specifici pentru fiecare sfat de instrumente, suport pentru efecte vizuale predefinite, calculul poziției sfatului de instrumente pe fereastra redimensionată, documentație detaliată etc ....

Descărcați | Demo | web hosting

2. justificat

Le WordPress plug-in Justified este un plugin de galerie receptiv care vă aliniază miniaturile într-o grilă justificată folosind jQuery, ca pe Flickr. 

Justificat-Plugin pentru WordPress-Fotografi,

Acesta aduce funcții care vă vor distinge galeriile de cele ale concurenților!

Principalele sale caracteristici sunt: ​​dispunerea receptivă, efectele speciale de transfer, realinierea automată a rețelei,  un editor de coduri scurte, aspectul ecomplet personalizabil, suportul paginiispectatorii și multe altele…

Descarca | Demo | web hosting  

3. Programați e-mailuri

ce WordPress plug-in după cum sugerează și numele, vă permite să programați publicarea e-mailului pe site-ul dvs. web. Face parte din extensiile de plugin WordPress „Follow My Blog Post”. Programați e-mailurile Urmați blogul meu Postați pluginul wordpress

Acum veți putea programa programarea publicării e-mailurilor în funcție de ore, zile sau săptămâni.

Citiți și articolul nostru pe Plugin-urile 10 WordPress pentru a utiliza hărți pe site-ul dvs.

Oferă posibilitatea de a trimite un e-mail combinat pentru toate notificările în locul fiecărui e-mail pentru fiecare notificare și, de asemenea, permite definirea unor șabloane de e-mail diferite pentru e-mailuri diferite, în cele din urmă pentru a face recepția e-mailurilor mai digerabilă. .

DescarcaDemo |web hosting

Resurse recomandate

Aflați despre alte resurse recomandate pentru a vă ajuta să construiți și să gestionați site-ul dvs. web.

Concluzie

Asta e! Asta-i tot pentru acest tutorial, sper să vă ajute să adăugați o zonă de widget în antetul temei dvs. WordPress. Nu ezita sa împărtășiți cu prietenii de pe rețelele de socializare preferate

Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress.

Dacă aveți sugestii sau observații, lăsați-le în secțiunea noastră comentarii.

...