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
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 ".
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.
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 ".
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.
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.
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.
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”.
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ă. .
Descarca | Demo | 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.
- Cum de a crea documente Word și Excel pe WordPress
- Cum să personalizați logo-ul WordPress al tabloul de bord
- Cum de a găsi fișierele pentru a edita o temă WordPress
- Cum să personalizați CSS-ul site-ului dvs. WordPress
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.
...
Bună! Aș dori să știu dacă aveți șansa să-mi spuneți cum să pun o „casetă de informații” similară cu cea utilizată aici la începutul acestui articol, inclusiv butoanele care pot fi făcute clic pe lângă „Descărcați” și „Foi de calcul”, aspectul este foarte frumos. Mulțumesc!
Codul care adaugă header.php nu funcționează
Domnule, am încercat. Într-adevăr, pagina widgeturilor este afișată, definind adăugarea widgeturilor. Și am adăugat-o. Când pasul 2 nu reușește să introducă codul în antetul php. Ghici 2, care este greșeala, domnule?
În primul cod afișat, care este de a genera o nouă zonă de widget, începeți tastând „funcție”, dar aș spune că începe cu „funcție”. De fapt, acest cod are mai multe erori care îl fac greșit în timp ce îl scriem. Aș aprecia să fie corectat.
OK.
🙂 Totul este în regulă, doar că nimeni din sfaturile lor nu explică unde să adăugați codul la „functions.php !!! " Este important! Toată lumea folosește temele „diferite” ...
hi,
Vă mulțumim pentru aceste suporturi.
Știam cum să adaug bara de căutare în antetul personalizat. Pe de altă parte, personalizarea stilului este mai complicată ...
Aș dori să schimb dimensiunea, poziția (că nu ia întreaga lățime a antetului), precum și culoarea de fundal.
Merci d'avance.
Salut Thomas,
Este nevoie de un pic de cunoștințe CSS pentru asta. Dar eu recomand acest plugin WordPress excelent: https://codecanyon.net/item/yellow-pencil-visual-css-style-editor/11322180?ref=voirplusgrand